当前位置：首页 > article >正文

vue + leaflet + 天地图实现搜索省份后高亮

article 2024/12/25 2:08:09

实现省份高亮方法最重要的代码在于 L.geoJSON(district).addTo(map)这个方法，district为参数，可以在页面中引入当前省份的坐标json。

获取省份json文件的地址：https://datav.aliyun.com/portal/school/atlas/area_selector

import beijing from '../json/beijing.js';


//! 1. 每次先调用 clearLayers 清除所有图层
//! 2. 完了之后在使用 titleLayer 设置图层对象， addTo添加到地图当中

export const setLayer = (map, layerObject, district) => {
    clearLayers(map);
    const { spherical, mapLabel } = layerObject;
    let layer = L.tileLayer(spherical, {
        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],//8个子域可用
        maxZoom: 18,//最大缩放
        minZoom: 1,//最小缩放
    });
    layer.addTo(map);//添加图层

    //实现省份高亮方法
    L.geoJSON(district).addTo(map);
    // L.geoJSON(beijing).addTo(map);
    // L.geoJSON(hebei).addTo(map);

    //! 有些地图图层类型，可能没有 label 标注 这里判断
    if (!mapLabel || Object.keys(mapLabel).length === 0) {
        return;
    }
    const { spherical: sphericalLabel } = mapLabel;
    let layerLabel = L.tileLayer(sphericalLabel, {
        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
        maxZoom: 18,
        minZoom: 1
    });
    layerLabel.addTo(map);

    // 创建marker聚合层
    const markers = L.markerClusterGroup();//创建一个新的聚合标记组 (markers)，用于将多个标记聚合在一起显示。
    // 创建一个自定义的LayerGroup来控制层级
    const layerGroup = L.layerGroup([markers]);
    layerGroup.addTo(map);
    // 设置层级，注意这个方法会将图层在地图中移到指定位置
    layerGroup.setZIndex(9999999999999999999999); // 设置图层的层级
    // 将markers保存到map对象上，以便后续使用
    map.markers = markers;
    map.layerGroup = layerGroup;
}