Vue 3 + 天地图 + D3.js 绘制行政区划
🌈个人主页：前端青山
🔥系列专栏：组件封装篇
🔖人终将被年少不可得之物困其一生
依旧青山,本期给大家带来组件封装篇专栏内容:组件封装-天地图
目录
引入天地图 API
初始化地图
引入 D3.js
加载行政区划数据
添加文本标注
vue+天地图+d3.js绘制行政区划
大家好，依旧青山，天地图提供了与可视化库D3.js的快速集成，方便于我们进行开发
以下是我的效果，以天津市滨海新区为例
那么在vue项目中，我们该如何使用，下面以Vue3+Ts项目为例
引入天地图 API
-
在
index.html文件中引入天地图 API 4.0 版本。 -
获取天地图 API 密钥并将其添加到脚本源中。
<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的秘钥" type="text/javascript"></script>初始化地图
-
创建一个名为
mapDiv的容器，并设置样式。 -
在 Vue 组件中使用
onMounted生命周期钩子初始化天地图实例。 -
设置地图类型为矢量图，并设置中心点和缩放级别。
然后在页面中渲染天地图
<template><div id="mapDiv" :style="Style"></div>
</template>
<script setup lang="ts">import { ref, onMounted, nextTick, defineProps, defineExpose, defineEmits } from "vue";let map: any = null;let T: any = (window as any).T;const d3 = (window as any).d3const TMAP_VECTOR_MAP = (window as any).TMAP_VECTOR_MAPlet countriesOverlay = new T.D3Overlay(inits,redraw);//初始化地图const initTiandituMap = () => {map = new T.Map("mapDiv");map.setMapType(TMAP_VECTOR_MAP);map.centerAndZoom(new T.LngLat(117.711000,39.003101), 10);map.setStyle('block')};onMounted(() => {nextTick(()=> {initTiandituMap()})})
</script>
<style scoped lang="scss">
::v-deep(.tdt-label){background: none;border: none;color: #fff;-webkit-box-shadow: none;box-shadow: none;padding: 0;line-height: 0.6vw;font-size: 0.6vw;
}
</style>这样就可以渲染出天地图了
那我们要进行行政区划呢,就需要用到d3.js绘制图形了,官网也是有示例的
首先,我们要拿到各自区域的地图json,如没有可去
DataV.GeoAtlas地理小工具系列
进行取点区域信息等。
引入 D3.js
-
在
index.html文件中引入 D3.js 库及其扩展D3SvgOverlay.js。
<script src="/src/utils/d3/d3.js" charset="utf-8"></script><script src="/src/utils/d3/D3SvgOverlay.js"></script>点击下方链接进入下载d3.js和 D3SvgOverlay.js
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函数来更新路径元素的位置。
<template><div id="mapDiv" :style="Style"></div>
</template>
<script setup lang="ts">import mapJson from '@/utils/tjbhJson';import { ref, onMounted, nextTick, defineProps, defineExpose, defineEmits } from "vue";let map: any = null;let T: any = (window as any).T;const d3 = (window as any).d3const TMAP_VECTOR_MAP = (window as any).TMAP_VECTOR_MAPlet countries: any = [];let countriesColor: any = [320,498,178,598,420,320,120,120];const inits = (sel: any, transform: any) => {let upd = sel.selectAll('path.geojson').data(countries);upd.enter().append('path').attr("class", "geojson").attr('stroke', '#05CEE5')//边界线颜色.attr('stroke-width', '2')//边界线宽度.attr('fill', function (d: any, i: any) {return d3.hsl(countriesColor[i], 0.9, 0.5)})//区域填充.attr('fill-opacity', '0.3')//区域填充透明度}const redraw = (sel: any, transform: any) => {sel.selectAll('path.geojson').each(function (this: any, i: any) {d3.select(this).attr('d', transform.pathFromGeojson)})}let countriesOverlay = new T.D3Overlay(inits,redraw);//初始化地图const initTiandituMap = () => {map = new T.Map("mapDiv");map.setMapType(TMAP_VECTOR_MAP);map.centerAndZoom(new T.LngLat(117.711000,39.003101), 10);
map.setStyle('block')disProvince()};//添加滨海新区图层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])})}onMounted(() => {nextTick(()=> {initTiandituMap()})})
</script>
<style scoped lang="scss">
::v-deep(.tdt-label){background: none;border: none;color: #fff;-webkit-box-shadow: none;box-shadow: none;padding: 0;line-height: 0.6vw;font-size: 0.6vw;
}
</style>
添加文本标注
-
遍历文本坐标数据，并使用天地图的
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: `<div>${item.text}</div>`, position: LngLat})map.addOverLay(label);})}通过以上步骤，你可以成功地在 Vue 3 项目中集成天地图和 D3.js，实现行政区划的绘制及文本标注功能。