leaflet加载高德地图

yb305小白

已于 2023-07-13 15:24:40 修改

阅读量1.1k

点赞数

分类专栏： leaflet 文章标签： leaflet

于 2023-07-13 13:02:50 首次发布

本文链接：https://blog.csdn.net/yb305/article/details/131697767

版权

leaflet 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、高德瓦片

1.高德矢量地图：
'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}';
2.高德影像地图：
https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}

二、源代码

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
      integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
      crossorigin=""
    />
    <script
      src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
      integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
      crossorigin=""
    ></script>
    <style>
      #map {
        height: 800px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div class="btns" style="position: absolute; right: 20px; top: 12px; z-index: 8000">
      地图类型：<input
        type="radio"
        value="1"
        name="mapType"
        checked="checked"
        id="normal"
      />矢量地图 <input type="radio" value="2" name="mapType" id="Satellite" />卫星地图
    </div>
    <script>
      let map = null;
      let tileLayer = null;
      let titleGaoDe = {
        normal:
          'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
        satellite: 'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
      };
      initMap();
      //初始化地图
      function initMap() {
        map = L.map('map').setView([27.249374, 117.624815], 15);
        addTitleLayer("normal");
        L.marker([27.256151,117.630158]).addTo(map);
        const Normal = document.getElementById('normal');
        const Satellite = document.getElementById('Satellite');
        Normal.addEventListener('change', () => {
          cleartitleLayer();
          addTitleLayer("normal");
        });
        Satellite.addEventListener('change', () => {
          cleartitleLayer();
          addTitleLayer("satellite");
        });
      }

      function addTitleLayer(mapType){
        let url = titleGaoDe[mapType];
        tileLayer = L.tileLayer(url).addTo(map);
      }
      //移除瓦片层
      function cleartitleLayer() {
        if (map && tileLayer) {
          //removeLayer
          map.removeLayer(tileLayer);
        }
      }
    </script>
  </body>
</html>

暂时没有纠正偏移