🌈个人主页：前端青山
🔥系列专栏：组件封装篇
🔖人终将被年少不可得之物困其一生
依旧青山,本期给大家带来组件封装篇专栏内容:组件封装-天地图
目录
引入天地图 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).d3
const TMAP_VECTOR_MAP = (window as any).TMAP_VECTOR_MAP
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')
};
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).d3
const TMAP_VECTOR_MAP = (window as any).TMAP_VECTOR_MAP
let 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，实现行政区划的绘制及文本标注功能。
