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

看到我请叫我铁锤2025-09-26 18:59

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

其实很简单！！！

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

2.复制文件链接：

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

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

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

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

javascript 复制代码

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
            });
          }
        },})