vue三维地图（vue项目天地图使用）
最近的项目中遇到了新的需求 ，需要在项目中使用天地图 ，因为第一次接触 ，官方的网站引用之类的也没有进行详细的介绍 ，自己去找的时候发现这部分的文章也比较少 ，有的问题也没有讲清楚 ，所以发布这篇文章分享总结一下vue项目天地图的使用 。
官方天地图引入
http://lbs.tianditu.gov.cn/api/js4.0/guide.html 这是天地图的官方地址 ，我使用的是最新的版本 ，4.0的api具体的可以进入官网去看看 ，像下面这样选择就可以
引入只需要在index.html页面引入
// 这里的tk为你在天地图的官网申请的tk <script src="https://api.tianditu.gov.cn/api?v=4.0&tk=你申请的tk" type="text/javascript"></script>如果要用到热力图的效果的话还需要引入
<script src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/HeatmapOverlay.js" type="text/javascript"></script>这里是官网的热力图js ，顺序一定要是天地图的js引入在热力图之前 ，因为热力图的js会使用到天地图里面定义的东西 。
这里还会有个小问题 ，如果你的项目地址是https的访问http的时候会不安全 ，访问不到 ，所以可以直接将这两个文件下载下来放在本地去引入
<script src="./tdt.js" type="text/javascript"></script> <script type="text/javascript" src="./HeatmapOverlay.js"></script>这里的tdt.js和HeatmapOverlay.js就是下载到本地的文件 。这样引入也会更快 ，减少网络请求的时间 。可以尽量使用这种引入 。
到这里引入就算全部完成了 。天地图初始化
首先创建承载标签
<div id="mapContainerTD" ></div>注意！！！！这里会存在一个问题 ，我当初卡了一天没有解决 ，这里的标签如果用v-show或者v-if时 ，地图初始化会加载不出来 ，一定要标签显示的时候才会进行加载 。如果一定要用到这两个的话 ，这里可以提供一个解决方案 ，可以先将值设置为true,然后执行地图的初始化 ，执行完成之后在将值设置为false即可 。
data中定义对象mapTD:null
var T = window.T; // 这个一定需要定义 ，可以直接在mounted里面定义 this.mapTD = null let mapTD = new T.Map(mapContainerTD); // div的id // 传参中心点经纬度 ，以及放大程度 mapTD.centerAndZoom(new T.LngLat(122.225718, 30.264533), 15); mapTD.setMinZoom(10);// 设置最小变动层级 mapTD.setMaxZoom(18);// 设置最大变动层级 mapTD.enableDrag();// 启用拖拽 mapTD.enableScrollWheelZoom();// 启用滚轮放大缩小 this.mapTD = mapTD;这样可以直接使用了 ，这里也有一点需要注意的地方 ，官方的天地图使用的是wgs84坐标系 ，如果点位是其他坐标系的话需要自己转之后在使用 ，后面的打点图层都一样
天地图图层添加（这里以卫星图为例）
初始化图层 let imageURL = "http://t0.tianditu.gov.cn/img_w/wmts?" + "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" + "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=您的密钥"; //创建自定义图层对象 let lay = new T.TileLayer(imageURL, {minZoom: 10, maxZoom: 18});天地图图层 可以在这个里面选择自己需要的图层
添加图层 this.mapTD.addLayer(lay); 移除图层 let layer = this.mapTD.getLayers() // 获取当前地图覆盖物 this.mapTD.removeLayer(layer[1]) //删除想要的 this.mapTD.clearLayers() // 清除所有的覆盖物天地图聚合打点
设置聚合点基础图标
let icon = new T.Icon({ iconUrl: require(`自己的点位图标`), id: test, // 类型id iconSize: new T.Point(27, 36), // 图标大小 iconAnchor: new T.Point(0, 0) // 位移量 }) let marker = new T.Marker( new T.LngLat(xy[0], xy[1]), { icon:icon }) this.markerObject = [] // 初始化聚合点集合数组 marker.clusterData = clusterData // 这里可以像这样给点位添加自定义属性clusterData 可以为任意形式
// 添加点击事件 marker.addEventListener("click", (e) => { console.log(e, e.target.clusterData); // 可以从这里取出自定义的属性 this.mapTD.panTo(new T.LngLat(e.lnglat.lng,e.lnglat.lat), zoom) // 移动中心点方法 }); this.markerObject.push(marker) this.clustererObject = new T.MarkerClusterer(this.mapTD, { markers: that.markerObject }) // 将聚合点集合用变量存起来 ，删除的时候会用得到因为聚合点和基础的点位不太一样 ，所以删除的时候地图的删除覆盖物方法不生效 ，必须使用聚合点自己的删除方法 。
// 设置聚合图标的最大层级 ，也就是说当到达18级时 ，所有聚合的点会全部 this.clustererObject.setMaxZoom(18) this.clustererObject.setStyles([ //这个可以自定义不同数量的点位聚合时显示的样式 { url: require("../../../assets/daishan/zhongdian3.png"), // 聚合的图标 size: [36, 36], //聚合的图标大小 offset: new T.Point(-16, -16), //显示图片的偏移量 // textColor: #fff, //显示数字的颜色 // textSize: 10,//显示文字的大小 range: [0, 10], }, { url: require("../../../assets/daishan/zhongdian2.png"), // 聚合的图标 size: [36, 36], //聚合的图标大小 offset: new T.Point(-16, -16), //显示图片的偏移量 range: [11, 400], }, { url: require("../../../assets/daishan/zhongdian1.png"), // 聚合的图标 size: [48, 48], //聚合的图标大小 offset: new T.Point(-18, -18), //显示图片的偏移量 range: [400, 80000], }, ])删除聚合点
if(this.clustererObject){ this.clustererObject.clearMarkers(this.markerObject); this.clustererObject = null } // 这里删除聚合点只能用clearMarkers()方法才能够删除添加自定义弹窗
<div ref="populationInfoWindowRef" ></div> <!-- 这里的弹窗样式可以自己自定义,定义ref --> let sContent = this.$refs.populationInfoWindowRef.$el //这里使用ref取到盒子对象原型 let infoWin = new T.InfoWindow(sContent,{offset: new T.Point(-100, 480)}); this.mapTD.openInfoWindow(infoWin,new T.LngLat(e.lnglat.lng, e.lnglat.lat)) //e.lnglat.lng, e.lnglat.lat就是点击后传来的参数这样就可以打开点击弹窗了
天地图添加网格
天地图的添加网格就是添加图层 ，但是设置和图层有一点区别 ，
let points = [] // 网格数据集合 ，之能有一层 ， // 循环点位 例如这样 points.push(new T.LngLat(116.315000,39.964750)); points.push(new T.LngLat(116.303330,39.960810)); points.push(new T.LngLat(116.306760,39.866270)); points.push(new T.LngLat(116.328740,39.847560)); this.Polygons = new T.Polygon(points,{ fillColor: "#fff", // 多边形填充颜色 weight: 1, // 线条宽度 ，默认为 1 color: "#8B1A1A", // 线条颜色 fillOpacity: 0.2, //多边形透明度 }); // 如果是带洞的多边形 ，则如下 let points = [] // 网格数据集合 ，之能有一层 ， let points1 = [] // 网格数据集合 ，之能有一层 ， this.mapTD.addOverLay(this.Polygons); this.Polygons = new T.Polygon(points,{ fillColor: "#fff", // 多边形填充颜色 weight: 1, // 线条宽度 ，默认为 1 color: "#8B1A1A", // 线条颜色 fillOpacity: 0.2, //多边形透明度 }); // 如果是带洞的多边形 ，则如下 let points = [] // 网格数据集合 ，之能有一层 ， // 循环点位 例如这样 points.push(new T.LngLat(116.315000,39.964750)); points.push(new T.LngLat(116.303330,39.960810)); points.push(new T.LngLat(116.306760,39.866270)); points.push(new T.LngLat(116.328740,39.847560)); points.push(new T.LngLat(116.366500,39.855730)); points.push(new T.LngLat(116.442380,39.856520)); points.push(new T.LngLat(116.455080,39.865480)); points.push(new T.LngLat(116.456110,39.950020)); points.push(new T.LngLat(116.428990,39.967390)); let points1 = [] points1.push(new T.LngLat(116.349330,39.941590)); points1.push(new T.LngLat(116.350620,39.900650)); points1.push(new T.LngLat(116.353110,39.898670)); points1.push(new T.LngLat(116.413880,39.899990)); points1.push(new T.LngLat(116.418340,39.903150)); points1.push(new T.LngLat(116.429330,39.903940)); points1.push(new T.LngLat(116.427270,39.947910)); points1.push(new T.LngLat(116.365810,39.946600)); this.Polygons = new T.Polygon([points,points1],{ fillColor: "#fff", // 多边形填充颜色 weight: 1, // 线条宽度 ，默认为 1 color: "#8B1A1A", // 线条颜色 fillOpacity: 0.2, //多边形透明度 }); this.mapTD.addOverLay(this.Polygons);这样网格就添加完成 ，清除网格和清除图层一样
this.mapTD.clearOverLays(this.Polygons)结语
这就是我项目中使用到天地图的使用分享和总结 ，还有很多的方法及参数我都没有写出来 ，如果有需要用到的可以自己去官网找找对应的方法及属性 。官方的网站还有示例代码 ，可以借鉴参考 。感兴趣的小伙伴可以评论分享 ，有不清楚的可以直接评论区发言或者私信我 ，如果看到会及时回复 ，如果有内容写的不对可以直接指出来 ，共同进步 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！