Openlayers6叠加Mapbox地图

示例演示如何在openlayers里叠加mapbox矢量地图作为底图

<html><head><title>OpenLayers Editor</title><linkrel="stylesheet"type="text/css"href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io/en/v6.5.0/css/ol.css"/><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/mapbox-gl@1.12.0/dist/mapbox-gl.css"/><meta charset="utf-8" /></head><body><script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io/en/v6.5.0/build/ol.js"></script><script src="https://cdn.jsdelivr.net/npm/jsts@2.0.6/dist/jsts.min.js"></script><script src="https://cdn.jsdelivr.net/npm/mapbox-gl@1.12.0/dist/mapbox-gl.js"></script><style>#map {position: relative;height: 100%;}#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;color: #2c3e50;min-height: 100%;overflow: hidden;position: absolute;width: 100%;height: 100%;}</style><div id="app"><div id="map"></div></div><script type="text/javascript">let mbMap;mapboxgl.accessToken = '<your token>';var mbMap = new mapboxgl.Map({container: 'map',center: ol.proj.toLonLat([873708.375917, 6105425.847789]),attributionControl: false,interactive: false,style: 'mapbox://styles/mapbox/streets-v11', // style UR});var mbLayer = new ol.layer.Layer({render: function (frameState) {if (!mbMap) {return null;}var canvas = mbMap.getCanvas();var viewState = frameState.viewState;var visible = mbLayer.getVisible();canvas.style.display = visible ? 'block' : 'none';var opacity = mbLayer.getOpacity();canvas.style.opacity = opacity;var rotation = viewState.rotation;mbMap.jumpTo({center: ol.proj.toLonLat(viewState.center),zoom: viewState.zoom - 1,bearing: (-rotation * 180) / Math.PI,animate: false,});return canvas;},});var map = new ol.Map({layers: [mbLayer],target: 'map',view: new ol.View({center: [873708.375917, 6105425.847789],zoom: 15,}),keyboardEventTarget: document,});</script></body>
</html>

Openlayers6叠加Mapbox地图相关推荐

vue中，应用mapbox地图（一）——mapbox-gl地图设置中文是zh-Hans不是zh accessToken-访问令牌正确版本streets-v11
vue中,应用mapbox地图(一)--mapbox-gl地图设置中文是zh-Hans不是zh & accessToken-访问令牌 & 正确版本streets-v11 Mapbox ...
mapbox中文地图_使用 Mapbox 地图
如果您可以访问 Mapbox 地图,则可以将其添加至您的工作簿,或者使用它们在 Tableau Desktop 中创建地图视图.有关特定于国家/地区的可用数据的列表,请参见支持的地图数据. 将使用 M ...
vue中，应用mapbox地图——地图组件mapbox-gl和语言包@mapbox/mapbox-gl-language地图英文转中文 accesstokens-访问令牌移动端地图-leaflet
vue中,应用mapbox地图--地图组件mapbox-gl和语言包@mapbox/mapbox-gl-language用于将地图上的英文转中文 & accesstokens-访问令牌 &am ...
在iOS中进行Mapbox地图开发杂谈
最近因项目需要,在app中要集成Mapbox,并且要能与苹果地图切换使用.从最早认识Mapbox到最终集成完毕,中间有一些断断续续,但总的时间也不算短了,关于这方面的资料其实是比较少的,能参考的基本都 ...
Python地理可视化：plotly绘制mapbox地图热力密度图
Python地理可视化:plotly绘制mapbox地图热力密度图 import plotly.graph_objects as go import numpy as npKEYS = ['中心点经纬 ...
使用cesium加载mapbox地图底色的办法
使用cesium加载mapbox地图底色的办法安装:vue-cli-plugin-cesium插件 vue-cli-plugin-cesium - npm 获取cesium的token: 申请ces ...
Python，地理地图可视化：plotly绘制mapbox地图城市中心点经纬度marker标记
Python地理地图可视化:plotly标记mapbox地图城市中心点经纬度marker import plotly.graph_objects as goKEYS = ['中心点经纬度', '维度' ...
mapbox地图动画一键飞行
最近,Mapbox GL JS 从 v2.9 开始支持将地图显示为 3D 地球. 话不多说,马上看看效果怎么样: mapbox地图动画我们通过设置投影属性projection:globe,即可将地图 ...
005：vue+openlayers加载Mapbox地图示例
第005个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中加载Mapbox地图. 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果示例效果 ...

Openlayers6叠加Mapbox地图

Openlayers6叠加Mapbox地图相关推荐

最新文章

热门文章