Vue 3 天地图 D3.js 绘制行政区划

​🌈个人主页：前端青山
🔥系列专栏：组件封装篇
🔖 人终将被年少不可得之物困其一生

依旧 青山, 本期给大家带来组件封装篇专栏内容: 组件封装 - 天地图

目录

引入天地图 API

初始化地图

引入 D3.js

加载行政区划数据

添加文本标注

vue+ 天地图 +d3.js 绘制行政区划

大家好，依旧青山，天地图提供了与可视化库 D3.js 的快速集成，方便于我们进行开发

以下是我的效果，以天津市滨海新区为例

那么在 vue 项目中，我们该如何使用，下面以 Vue3+Ts 项目为例

引入天地图 API

初始化地图

• 创建一个名为 mapDiv 的容器，并设置样式。

• 在 Vue 组件中使用 onMounted 生命周期钩子初始化天地图实例。

• 设置地图类型为矢量图，并设置中心点和缩放级别。

然后在页面中渲染天地图

这样就可以渲染出天地图了

那我们要进行行政区划呢, 就需要用到 d3.js 绘制图形了, 官网也是有示例的

首先, 我们要拿到各自区域的地图 json, 如没有可去

DataV.GeoAtlas 地理小工具系列

进行取点区域信息等。

引入 D3.js

点击下方链接进入下载 d3.js 和 D3SvgOverlay.js

https://download.csdn.net/download/2302_76329106/89651918?spm=1001.2014.3001.5503https://download.csdn.net/download/2302_76329106/89651918?spm=1001.2014.3001.5503

加载行政区划数据

• 从外部文件导入滨海新区的 GeoJSON 数据。

• 使用 D3.js 的 D3Overlay 组件来绘制行政区划。

• 定义 inits 函数来初始化路径元素，并设置样式。

• 定义 redraw 函数来更新路径元素的位置。

添加文本标注

   const disProvince = () => {
        countries = mapJson.features;
        map.addOverLay(countriesOverlay)
        countriesOverlay.bringToBack();
        textJson.forEach((item: any) => {let coord: any = item.coord.split(",")
            let LngLat = new T.LngLat(coord[0], coord[1])
            // 添加 3d 文字
            var label = new T.Label({text: `
${item.text}
`, position: LngLat})
            map.addOverLay(label);
        })
    }

通过以上步骤，你可以成功地在 Vue 3 项目中集成天地图和 D3.js，实现行政区划的绘制及文本标注功能。