leaflet+天地图+更换地图主题

就深咖啡色

已于 2025-03-25 17:09:20 修改

阅读量1k

点赞数 22

文章标签：前端

于 2025-03-25 17:07:16 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_47226752/article/details/146479378

版权

在这里插入图片描述

先弄清楚leaflet和天地图充当的角色

leaflet是用来在绘制、交互地图的
天地图是纯粹用来当个底图的，相当于在leaflet中底部的一个图层而已
进行Marker打点、geojson绘制等操作都是使用leaflet实现

1. 使用天地图当底图

在token处填自己的token
我这里用的是天地图的影像底图，如果需要可自行更换或添加底图
天地图底图网址：http://lbs.tianditu.gov.cn/server/MapService.html
只用替换我代码里的天地图链接里的http://{s}.tianditu.com/img_c/里的img_c为我图中圈起来的编号，其他不用动

在这里插入图片描述

const token = "填自己的天地图token";
// 底图
const VEC_C ="http://{s}.tianditu.com/img_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=";
// 文字标注
// const CVA_C = "http://{s}.tianditu.com/cia_c/wmts?layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=";
let map = L.map("map", {
  minZoom: 3,
  maxZoom: 17,
  center: [34.33213, 109.00945],
  zoomSnap: 0.1,
  zoom: 3.5,
  zoomControl: false,
  attributionControl: false,
  crs: L.CRS.EPSG4326,
});
L.tileLayer(VEC_C + token, {
  zoomOffset: 1,
  subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
  opacity: 0.2,
}).addTo(map);
// 添加文字标注
// L.tileLayer(CVA_C + token, {
//   tileSize: 256,
//   zoomOffset: 1,
//   subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
// }).addTo(map);

2. 绘制中国地图geojson

这里我需要国的边界和省的边界线颜色不一样，所以用了一个国的geojson和另一个包含省的geojson叠加来实现
获取geojson数据网站：https://datav.aliyun.com/portal/school/atlas/area_selector

L.geoJson(sheng, {
 style: {
    color: "#0c9fb8",
    weight: 1,
    fillColor: "#028297",
    fillOpacity: 0.1,
  },
}).addTo(map);
L.geoJson(guo, {
  style: {
    color: "#b8c3c8",
    weight: 2,
    fillOpacity: 0,
  },
}).addTo(map);

3. 更换背景主题色

我的实现思路比较简单粗暴，直接给天地图的图层设置透明度，对div元素设置背景色，如果UI配合，可以叫UI给个遮罩层的背景图，比如我这里就是用了四周有黑边渐变阴影，中间是透明的背景图。

<div id="map"></div>
<div class="mask"></div>

#map {
  height: 100vh;
  width: 100vw;
  background: #082941;
  z-index: 2;
}

.mask {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: url("./mask.png") no-repeat;
  background-size: 100% 100%;
  z-index: 1;
}

4. 完整代码

写自己天地图的token
自己下载geojson文件
自己看需要搞个遮罩层背景图，不需要就注释掉mask

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://cdn.bootcdn.net/ajax/libs/leaflet/1.9.4/leaflet.css"
      rel="stylesheet"
    />
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    #map {
      height: 100vh;
      width: 100vw;
      background: #082941;
      z-index: 2;
    }

    .mask {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background: url("./mask.png") no-repeat;
      background-size: 100% 100%;
      z-index: 1;
    }
  </style>
  <body>
    <div id="map"></div>
    <div class="mask"></div>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/leaflet/1.9.4/leaflet.js"></script>
  <script src="./china.js"></script>
  <script src="./guo.js"></script>

  <script>
    const token = "写自己天地图的token";
    // 底图
    const VEC_C =
      "http://{s}.tianditu.com/img_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=";
    //   文字标注
    // const CVA_C =
    //   "http://{s}.tianditu.com/cia_c/wmts?layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=";

    let map = L.map("map", {
      minZoom: 3,
      maxZoom: 17,
      center: [34.33213, 109.00945],
      zoomSnap: 0.1,
      zoom: 3.5,
      zoomControl: false,
      attributionControl: false, //版权控制器
      crs: L.CRS.EPSG4326,
    });
    L.tileLayer(VEC_C + token, {
      zoomOffset: 1,
      subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
      opacity: 0.2,
    }).addTo(map);
    // L.tileLayer(CVA_C + token, {
    //   tileSize: 256,
    //   zoomOffset: 1,
    //   subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
    // }).addTo(map);

    L.geoJson(sheng, {
      style: {
        color: "#0c9fb8",
        weight: 1,
        fillColor: "#028297",
        fillOpacity: 0.1,
      },
    }).addTo(map);
    L.geoJson(guo, {
      style: {
        color: "#b8c3c8",
        weight: 2,
        fillOpacity: 0,
      },
    }).addTo(map);
  </script>
</html>