leaflet 加载天地图改变地图底图颜色

不要停止努力呦！

已于 2024-09-23 16:13:42 修改

阅读量1.2k

点赞数 3

CC 4.0 BY-SA版权

文章标签：前端 leaflet 天地图 vue3

于 2024-09-23 09:52:35 首次发布

本文链接：https://blog.csdn.net/qq_42657934/article/details/142449526

最近在开发大屏的时候用到了leaflet 和天地图，但是加载出来的天地图是白色的，与大屏风格不统一
，最后经过一系列调整改为蓝色风格，效果如下图
在这里插入图片描述

      实现思路: 通过应用图层透明度，设置容器背景色而实现。是不是非常简单高效，嘻嘻
      ps: 开发前提 在天地图官网注册登录申请地图服务需要的key:[天地图控制台](https://console.tianditu.gov.cn/api/key)

在这里插入图片描述

主要代码如下：
在这里插入图片描述
源代码：src\utils\leaflet\j-map.js

import * as L from "leaflet";
export default function initMap(containerId, centralPoint, zoom, zoomSnap) {
  L.TileLayer.ChinaProvider = L.TileLayer.extend({
    initialize: function (type, options) { // (type, Object)
      const providers = L.TileLayer.ChinaProvider.providers;
      const parts = type.split('.');
      const providerName = parts[0];
      const mapName = parts[1];
      const mapType = parts[2];
      const url = providers[providerName][mapName][mapType];
      options.subdomains = providers[providerName].Subdomains;
      L.TileLayer.prototype.initialize.call(this, url, options);
    }
  });

  const imgParam = "&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles";
  const ciaParam = "&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles";

  const tk = "自己的token"
  L.TileLayer.ChinaProvider.providers = {
    TianDiTu: {
      Satellite: {
        Map: "https://t{s}.tianditu.gov.cn/img_w/wmts?tk=" + tk + imgParam,
        Annotation: "https://t{s}.tianditu.gov.cn/cia_w/wmts?tk=" + tk + ciaParam
      },
      Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
    },
  };


  L.tileLayer.chinaProvider = function (type, options) {
    return new L.TileLayer.ChinaProvider(type, options);
  };

  /**
   * 天地图内容
   */
  const imga = L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotation', {
      maxZoom: 26,
      minZoom: 1,
    });
  imga.bringToFront()


  //题图titleLayer
  const ia = L.layerGroup([imga])
  let map
  if (zoomSnap !== undefined) {
    map = L.map(containerId, {
      editable: false,
      center: centralPoint,
      editOptions: {},
      zoom: zoom,
      layers: [ia],
      zoomSnap: zoomSnap,
      closePopupOnClick: false,
      crs: L.CRS.EPSG3857,
      attributionControl: false,

    });
  } else {
    map = L.map(containerId, {
      editable: true,
      center: centralPoint,
      editOptions: {},
      zoom: zoom,
      layers: [ia],
      zoomControl: false,
      closePopupOnClick: false,
      crs: L.CRS.EPSG3857,
      // 去掉比列尺
      attributionControl: false,
    });
  } 
  ia.setZIndex(100000)
  return {
    "map": map,
  };
}

组件内部使用：

<template>
    <div class="map-container" id="mapContainer" />
</template>

<script setup>
import initMap from "@/utils/leaflet/j-map";
const initMapLayers = () => {
  const mapResult = initMap(`mapContainer`, [...epicentreLocation.value], 6, undefined);
  map.value = mapResult.map;
}
</script>
<style lang="less" scoped>
.map-container {
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 52, 204, 1), rgba(0, 52, 204, 1)) center/80% 80%, lightblue;
  }
</style>