如何在 openlayer 6.4.3 中添加 layerswitcher答案

【问题标题】：How to add layerswitcher in openlayer 6.4.3如何在 openlayer 6.4.3 中添加 layerswitcher
【发布时间】：2020-08-19 04:53:08
【问题描述】：

如何在ol 6中添加layerswitcher。

import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import XYZ from 'ol/source/XYZ';

  const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      title: 'District', 
      type: 'base', 
      source: new XYZ({
           url: "http://127.0.0.1:8080/tms/1.0.0/district/distgrid" + "/{z}/{x}/{-y}.png"  ,
          })
    }),
    new TileLayer({
      title: 'Landmark',
      source: new XYZ({
           url: "http://127.0.0.1:8080/tms/1.0.0/Landmark/landmarkgrid" + "/{z}/{x}/{-y}.png"  ,
          })
    }),
    new TileLayer({
      title: 'Road',
      source: new XYZ({
           url: "http://127.0.0.1:8080/tms/1.0.0/road/roadgrid" + "/{z}/{x}/{-y}.png"  ,
          })
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 1
  })
});

我尝试了上面的代码，但我得到了错误ol.control.LayerSwitcher is not a constructor。我按照这个例子http://raw.githack.com/walkermatt/ol-layerswitcher/master/examples/layerswitcher.html

【问题讨论】：

您也可以自己构建！例如观看该视频：youtube.com/watch?v=k4b3nqDHCIU

标签： openlayers openlayers-3 openlayers-6

【解决方案1】：

在该示例中将 OpenLayers 从 6.1.1 更改为 6.4.3 对我有用，但如果您直接链接到库，请务必将 https 指定为浏览器，以不允许从 https html 使用 http 库。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>OpenLayers - LayerSwitcher</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://openlayers.org/en/v6.4.3/css/ol.css" />
    <link rel="stylesheet" href="https://raw.githack.com/walkermatt/ol-layerswitcher/master/src/ol-layerswitcher.css" />
    <link rel="stylesheet" href="https://raw.githack.com/walkermatt/ol-layerswitcher/master/examples/layerswitcher.css" />
  </head>
  <body>
    <div id="map"></div>
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v6.4.3/build/ol.js"></script>
    <script src="https://raw.githack.com/walkermatt/ol-layerswitcher/master/dist/ol-layerswitcher.js"></script>
    <script src="https://raw.githack.com/walkermatt/ol-layerswitcher/master/examples/layerswitcher.js"></script>
  </body>
</html>

【讨论】：

我尝试使用 npm & parcel 安装 ol。但是我在安装时出错，所以选择了这种方法。正在尝试再次安装。
我已经使用 npm 安装了 ol 并获得了基于它的地图。所以我编辑了这个问题。请立即查看
您将需要导入 LayerSwitcher 及其 css 如果我在代码和框中打开 OpenLayers Bing 地图示例并将 html 选择替换为 LayerSwitcher codesandbox.io/s/reverent-fermat-zrhtu?file=/main.js
这行得通。从上面的链接获得了 layerswitcher。多谢。请用上面的代码更新答案，以便我接受你的答案。
任何解释为什么需要ol-layerswitcher和layerswitcher？ githubmate.com/repo/woodbri/ol-layerswitcher 只提到 ol-layerswitcher。

【解决方案2】：

查看此示例为图层切换器创建的控件和交互。切换器可与图层组一起使用，您可以对其进行调整以使其在所需的图层/图层组上工作。 Check this Example

【讨论】：