Leaflet行政区划边界开发全攻略

环境准备与基础配置

前期准备工作回顾

在开始行政边界功能开发前，我们已经完成了以下基础工作：

npm包管理 ：
- 通过npm install leaflet安装了Leaflet地图库
- 使用npm install proj4安装坐标转换库（如需要）
HTML基础结构：

html 复制代码

<div id="my_map" style="width: 100%; height: 100vh;"></div>

基础地图初始化：

js 复制代码

import L from 'leaflet';
const map = L.map('my_map', {
  center: [30.5728, 104.0668], // 成都中心坐标
  zoom: 11
});

天地图底图集成 ：
- 申请天地图开发者密钥
- 配置WMTS图层
- 添加注记层和底图切换控制
- 详细的基础配置步骤可参考之前的教程文章：构建基础地图https://blog.csdn.net/weixin_64050524/article/details/150774605?spm=1001.2014.3001.5502

加载GeoJSON数据

在地图应用中，行政边界是常用的功能元素。根据官方文档，可通过L.geoJSON()方法解析GeoJSON数据，并自定义样式和交互效果。

数据获取与处理

行政边界数据可以从多个渠道获取：

阿里云DataV ：
- 提供全国各级行政区划GeoJSON数据
- 接口示例：https://geo.datav.aliyun.com/areas_v3/bound/510100.json
- 成都市区代码为510100
其他数据源 ：
- 国家基础地理信息中心
- OpenStreetMap
- 地方测绘部门在这里的测试数据可从地理小工具中获取，以下以成都市区行政区划边界为例：

完整实现代码

以成都市区的行政区划边界为例

js 复制代码

// 定义行政区划样式
let region_style = {
  weight: 2,         // 边界线宽度
  opacity: 1,        // 边界线透明度
  color: "#000",     // 边界线颜色（黑色）
  fillOpacity: 0.5,  // 填充透明度
  fillColor: "rgba(255,255,255,0.5)", // 填充颜色（半透明白色）
  dashArray: null    // 虚线样式，null表示实线
};

// 成都行政区划GeoJSON数据URL
let cdGeo = "https://geo.datav.aliyun.com/areas_v3/bound/510100.json";

// 异步加载并渲染GeoJSON
async function loadGeoJSON() {
  try {
    const response = await fetch(cdGeo);
    const data = await response.json();
    
    const geoLayer = L.geoJson(data, {
      style: region_style,
      pane: "region",
      onEachFeature: function(feature, layer) {
        // 添加交互事件
        layer.on({
          mouseover: highlightFeature,
          mouseout: resetHighlight,
          click: zoomToFeature
        });
      }
    }).addTo(map);
    
    // 自动调整视图适应行政区划
    map.fitBounds(geoLayer.getBounds());
    
  } catch (error) {
    console.error("加载GeoJSON数据失败:", error);
  }
}
// 调用加载函数
loadGeoJSON();

交互功能增强

js 复制代码

// 高亮显示当前区域
function highlightFeature(e) {
  const layer = e.target;
  layer.setStyle({
    fillColor: '#ff0000', // 红色高亮
    weight: 3
  });
  layer.bringToFront();
}

// 重置高亮样式
function resetHighlight(e) {
  geoLayer.resetStyle(e.target);
}

// 点击缩放至区域
function zoomToFeature(e) {
  map.fitBounds(e.target.getBounds().pad(0.2)); // 增加20%边距
}

最终加载出来的效果就是这样：

进阶应用：科幻风格大屏

涉及到有的同学可能会想要做成类似大屏科幻一点的风格，就可以将原来设置的天地图底图去掉，只显示注记层就可以了

js 复制代码

 L.map("my_map", {
    layers: [
      // default_base_layer_ref,//底图
      default_label_layer_ref,//注记
    ],
    doubleClickZoom: false, // 禁用双击缩放
    center: map_all_detail.center,
    zoom: map_all_detail.default_map_zoom,
    // 禁用默认的缩放控制器
    zoomControl: false,
    // 禁用版权信息控件
    attributionControl: false,
    // maxBounds,
    wheelPxPerZoomLevel: 300,
  });

由于原来的leaflet不添加任何背景是透明的，显示出来的效果是有些灰色的感觉，所以这里就可以直接给地图容器设置背景颜色

css 复制代码

#my_map {
  /* 背景渐变效果 */
  background: linear-gradient(
    135deg, 
    rgba(45, 164, 163, 0.3) 0%, 
    rgba(18, 102, 123, 0.5) 100%
  );
  
  /* 添加发光效果 */
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.2);
  
  /* 边框样式 */
  border: 1px solid rgba(0, 255, 255, 0.5);
  border-radius: 4px;
  
  /* 过渡动画 */
  transition: all 0.3s ease;
}

/* 响应式调整 */
@media (max-width: 768px) {
  #my_map {
    height: 70vh;
  }
}

最终效果是这样的：这种配置特别适合数据可视化大屏、指挥中心等需要科技感的展示场景，同时保持了地图的核心功能和良好的用户体验。好的，以上是本次分享内容，感谢各位前辈的宝贵经验，后续将持续分享更多实践成果。