vue3使用leaflet的时候高亮显示省市区

在使用leaflet的时候，有需求高亮显示省市区，难道我们要去找后端拿数据？

其实很简单！！！

1.首先第一步：DataV.GeoAtlas地理小工具系列打开这个工具，获取你想要的区域的json数据。

2.复制文件链接：​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

3.复制后通过浏览器打开你复制的链接，复制所有文字

4.复制后在你的项目的public中新增一个js文件：

5.在你新增的文件中写：export default加上你复制的的json数据。

6.打开你的运用地图的页面：

import chenghuaData from '/@/../public/libs/geojson/chenghua.js'
let chenghuahighlighted: L.Polygon | null = null
//在你的定义地图后编写，mapInstance是你的地图容器const coordinates = chenghuaData.features[0].geometry.coordinates[0][0];// 转换坐标格式 [lng, lat] -> [lat, lng]const convertedCoordinates = coordinates.map((coord: [number, number]) => [coord[1], coord[0]]);console.log('成华区坐标数据:', convertedCoordinates);chenghuahighlighted = L.polygon(convertedCoordinates, {color: '#3366FF',fillColor: '#3366FF',fillOpacity: 0.5,weight: 2}).addTo(mapInstance);
//为你的高亮添加一些样式
chenghuahighlighted.on({mouseover: function(e: any) {if (mapInstance && chenghuahighlighted) {chenghuahighlighted.setStyle({fillColor: '#3366FF',color: '#3366FF',weight: 3,fillOpacity: 0.7});}},mouseout: function(e: any) {if (chenghuahighlighted) {chenghuahighlighted.setStyle({fillColor: '#3366FF',color: '#3366FF',weight: 2,fillOpacity: 0.5});}},})