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

实现省份高亮方法最重要的代码在于 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;
}