leaflet在地图上绘制省份、区县边界

原创已于 2024-08-05 15:31:32 修改 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-02-21 15:14:42 首次发布

地图专栏收录该内容

32 篇文章

订阅专栏

本文介绍如何使用Leaflet地图库绘制中国省份及区县边界，并通过GeoJSON数据实现边界样式自定义。文章提供了一个简单的方法来加载GeoJSON文件并将其叠加到Leaflet地图上，包括设置边框颜色、粗细和透明度等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 // leaflet地图中添加区县边界
    drawBoundary() {
      const features = {}, // geoJson数据
      const style = {
        color: "#1492ff", // 边框颜色
        weight: 2, // 边框粗细
        opacity: 0.4, // 透明度
        fillColor: "transparent", // 区域填充颜色
        fillOpacity: 0, // 区域填充颜色的透明
        dashArray: "dashed",
      };
      L.geoJSON(features, { style: style }).addTo(this.map); //features是指geojson数据
    },

// features 可以写在js中，require导入，如
// BeiJing.min.js
export default {......}

// vue页面中
features: require("/public/libs/geojson/BeiJing.min.js").default,

// 最后在initMap() (mounted) 中使用这个方法即可

geojson数据可以参考DataV.GeoAtlas地理小工具系列