Openlayers6 叠加高德地图

上古石

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

阅读量502

点赞数 2

分类专栏： openlayers 文章标签： javascript 前端开发语言

于 2022-09-28 10:07:12 首次发布

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

版权

openlayers 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

该例子是展示如何在ol里叠加高德矢量地图作为底图

<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"
    />
    <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://webapi.amap.com/loader.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%;
		}
		
	    <!-- 要加这个样式，ol的canvas叠加在高德canvas上-->
		.amap-layer {
		   position: absolute;
		   top: 0;
		   left: 0;
		 }
    </style>
    <div id="app">
      <div id="map"></div>
    </div>
    <script type="text/javascript">
      let mbMap;
      AMapLoader.load({
        key: '<your key>', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          mbMap = new AMap.Map('map', {
            zooms: [0, 28],
          });
          var mbLayer = new ol.layer.Layer({
            render: function (frameState) {
              if (!mbMap) {
                return null;
              }
              var canvas = mbMap.canvas;
              var viewState = frameState.viewState;
              var visible = mbLayer.getVisible();
              canvas.style.display = visible ? 'block' : 'none';
              var opacity = mbLayer.getOpacity();
              canvas.style.opacity = opacity;

              // adjust view parameters in mapbox
              var rotation = viewState.rotation;
              mbMap.setZoomAndCenter(
                viewState.zoom,
                ol.proj.toLonLat(viewState.center),
                true,
              );
              return canvas;
            },
          });

          var map = new ol.Map({
            layers: [mbLayer],
            target: 'map',
            view: new ol.View({
              center: [873708.375917, 6105425.847789],
              zoom: 15,
            }),
            keyboardEventTarget: document,
          });
        })
        .catch((e) => {
          console.error(e); //加载错误提示
        });
    </script>
  </body>
</html>