如何解决如何在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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。