Openlayers6叠加Mapbox地图

上古石

已于 2024-02-20 18:05:32 修改

阅读量567

点赞数

分类专栏： openlayers 文章标签： javascript 前端 html

于 2022-09-28 10:14:57 首次发布

本文链接：https://blog.csdn.net/gery1990/article/details/127084100

版权

openlayers 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

<html>
  <head>
    <title>OpenLayers Editor</title>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io/en/v6.5.0/css/ol.css"
    />
    <link
      rel="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>