![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/cd32bced2976477ba7b3db20865b30d1~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5YmN56uv6Z2S5bGx:q75.awebp?rk3s=f64ab15b&x-expires=1747953780&x-signature=1%2BwlvFjXkyO0XXw%2FhJDMXbJsgOc%3D)![](<> "点击并拖拽以移动")编辑 🌈个人主页：[前端青山](https://blog.csdn.net/2302_76329106?spm=1000.2115.3001.5343 "前端青山")\ 🔥系列专栏：组件封装篇\ 🔖人终将被年少不可得之物困其一生 > 依旧青山,本期给大家带来组件封装篇专栏内容:组件封装-天地图 **目录** [引入天地图 API](#%E5%BC%95%E5%85%A5%E5%A4%A9%E5%9C%B0%E5%9B%BE%20API) [初始化地图](#%E5%88%9D%E5%A7%8B%E5%8C%96%E5%9C%B0%E5%9B%BE) [引入 D3.js](#%E5%BC%95%E5%85%A5%20D3.js) [加载行政区划数据](#%E5%8A%A0%E8%BD%BD%E8%A1%8C%E6%94%BF%E5%8C%BA%E5%88%92%E6%95%B0%E6%8D%AE) [添加文本标注](#%E6%B7%BB%E5%8A%A0%E6%96%87%E6%9C%AC%E6%A0%87%E6%B3%A8) vue+天地图+d3.js绘制行政区划大家好，依旧青山，天地图提供了与可视化库D3.js的快速集成，方便于我们进行开发以下是我的效果，以天津市滨海新区为例 ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/4467f6ee11fd4428834661c58f643c67~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5YmN56uv6Z2S5bGx:q75.awebp?rk3s=f64ab15b&x-expires=1747953780&x-signature=YwOWDeO0LNzOlPqLtZRbel21wLs%3D) ![](<> "点击并拖拽以移动")编辑那么在vue项目中，我们该如何使用，下面以Vue3+Ts项目为例 #### **引入天地图 API** * 在 `index.html` 文件中引入天地图 API 4.0 版本。 * 获取天地图 API 密钥并将其添加到脚本源中。 ![](<> "点击并拖拽以移动") #### **初始化地图** * 创建一个名为 `mapDiv` 的容器，并设置样式。 * 在 Vue 组件中使用 `onMounted` 生命周期钩子初始化天地图实例。 * 设置地图类型为矢量图，并设置中心点和缩放级别。然后在页面中渲染天地图 ![](<> "点击并拖拽以移动") 这样就可以渲染出天地图了 ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/ba4af0f183c5483e9465b897eaba33e8~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5YmN56uv6Z2S5bGx:q75.awebp?rk3s=f64ab15b&x-expires=1747953780&x-signature=FbRsGGXhefVqnSbv48fX5fcfBJU%3D) ![](<> "点击并拖拽以移动")编辑那我们要进行行政区划呢,就需要用到d3.js绘制图形了,官网也是有示例的 ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/ee5ce05c9fa24c7182dbe6e9a87ac9bc~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5YmN56uv6Z2S5bGx:q75.awebp?rk3s=f64ab15b&x-expires=1747953780&x-signature=hzOqBk2rItQNInr3ic3wbJO9tjE%3D) ![](<> "点击并拖拽以移动")编辑首先,我们要拿到各自区域的地图json,如没有可去 [DataV.GeoAtlas地理小工具系列](https://datav.aliyun.com/portal/school/atlas/area_selector "DataV.GeoAtlas地理小工具系列") 进行取点区域信息等。 ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/cd834965dec546348fdf370bcb427e08~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5YmN56uv6Z2S5bGx:q75.awebp?rk3s=f64ab15b&x-expires=1747953780&x-signature=AhMLG3XRuAqrgPLa3cyFKm4bk8M%3D) ![](<> "点击并拖拽以移动")编辑 #### **引入 D3.js** * 在 `index.html` 文件中引入 D3.js 库及其扩展 `D3SvgOverlay.js`。 ![](<> "点击并拖拽以移动") 点击下方链接进入下载d3.js和 D3SvgOverlay.js #### [https://download.csdn.net/download/2302\_76329106/89651918?spm=1001.2014.3001.5503![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/c38cbe96548748d09ea93e675cf82639~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5YmN56uv6Z2S5bGx:q75.awebp?rk3s=f64ab15b&x-expires=1747953780&x-signature=h55Tw0poEjL2oHbhaGJXmRopvRo%3D)https://download.csdn.net/download/2302\_76329106/89651918?spm=1001.2014.3001.5503](https://download.csdn.net/download/2302_76329106/89651918?spm=1001.2014.3001.5503 "https://download.csdn.net/download/2302_76329106/89651918?spm=1001.2014.3001.5503") #### **加载行政区划数据** * 从外部文件导入滨海新区的 GeoJSON 数据。 * 使用 D3.js 的 `D3Overlay` 组件来绘制行政区划。 * 定义 `inits` 函数来初始化路径元素，并设置样式。 * 定义 `redraw` 函数来更新路径元素的位置。 ![](<> "点击并拖拽以移动") ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/4b756ea83edc4beb887e23c88e3eba30~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5YmN56uv6Z2S5bGx:q75.awebp?rk3s=f64ab15b&x-expires=1747953780&x-signature=8UlZFGby%2F1OucDjrOCT%2FFWHqHaQ%3D) ![](<> "点击并拖拽以移动")编辑 #### **添加文本标注** * 遍历文本坐标数据，并使用天地图的 `Label` 对象添加文本标注到地图上。 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，实现行政区划的绘制及文本标注功能。