如何在openlayer 6.4.3中添加layerswitcher

问题描述

如何在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不是构造函数。我按照以下示例 http://raw.githack.com/walkermatt/ol-layerswitcher/master/examples/layerswitcher.html

解决方法

在该示例中将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>

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

openlayers openlayers-3 openlayers-6

如何在openlayer 6.4.3中添加layerswitcher

问题描述

解决方法

相关问答