正文

vue项目天地图使用(代码片段)

迷路的琉星  迷路的琉星  2023-04-05  721

关键词：

最近的项目中遇到了新的需求，需要在项目中使用天地图，因为第一次接触，官方的网站引用之类的也没有进行详细的介绍，自己去找的时候发现这部分的文章也比较少，有的问题也没有讲清楚，所以发布这篇文章分享总结一下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)

结语

这就是我项目中使用到天地图的使用分享和总结，还有很多的方法及参数我都没有写出来，如果有需要用到的可以自己去官网找找对应的方法及属性。官方的网站还有示例代码，可以借鉴参考。感兴趣的小伙伴可以评论分享，有不清楚的可以直接评论区发言或者私信我，如果看到会及时回复，如果有内容写的不对可以直接指出来，共同进步。

天地图入门使用(代码片段)

...社会团体、公众的地理信息公共服务资源，如果做的项目是政府部门、企事业单位尽量选择天地图，因为相比其他几家服务商更加权威。1.成为开发者使用天地图首先成为天地图的开发者成为开发者2.创建应用在正式使用... 查看详情

使用openlayers3在线加载天地图及geoserver发布的地图(代码片段)

使用openlayers3来加载天地图卫星图和标注图层，GeoServer发布地图，一并用openlayers测试加载出来，顺便实现了7种地图控件。下面直接贴代码：<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8">&l... 查看详情

ol之天地图加载(代码片段)

ol之天地图加载天地图的添加使用XYZ的方式添加。代码如下//加载天地图图层addTdtLayer(type)letlayer=newol.layer.Tile(source:newol.source.XYZ(url:‘http://t‘+Math.round(Math.random()*7)+‘.tianditu.com/DataServer?T=‘+type+‘&tk=12b8ss20f324bd6032c29503972e7c&x... 查看详情

省下5wuniapp使用“天地图”地图api开发-免费地图组件(代码片段)

...图的收费国内的地图服务全面收费了_gaoyp的博客-CSDN博客_天地图收费标准最近高德地图频繁给公司打电话让缴费。说是商业应用都要交费。查了一下发现国内的地图三巨头应该是商量好了，全部收费，而且起步价一样ÿ... 查看详情

天地图之地图类型(代码片段)

地图使用场景各异，官方提供了以下几种类型：普通街道视图、卫星视图、卫星和路网的混合视图、地形视图、地形和路网的混合视图，下面介绍下使用方法1.普通街道视图默认就是普通街道视图map.setMapType(TMAP_NORMAL_M... 查看详情

leaflet加载天地图(代码片段)

...简单而被大家喜欢，本文带你学习如何在leaflet中加载天地图。实现：leaflet加载天地图比较简单，做了一个WMTS扩展的类，源代码如下：tdtLayer.jsL.TileLayer.WMTS 查看详情

在vue项目中加载krpano全景图(代码片段)

在Vue-cli项目中做krpano全景图编辑器的时候,由于js插件的路径是动态的，做的过程中遇到了加载不到资源的难题,在网上搜索了好久也没找到合适的办法,最后想到了可能是JS加载的问题,于是解决了问题,下面跟大家分享一下做法。... 查看详情

vue_打包并发布项目(代码片段)

一、打包vue项目步骤：1、对当前vue项目进行打包的命令如下：npmrunbuild 2、打包完成，会输出Buildcomplete并且在vue项目中会生成一个名字为dist的打包文件。如下图：二、使用静态服务器工具包发布打... 查看详情

vue+echarts画甘特图(代码片段)

vue项目中添加echarts，只需要增加echarts依赖，然后在main.js中引入echarts就可以使用了。 1、npminstallecharts--save 2、修改main.jsimport*asechartsfrom'echarts'Vue.prototype.$echarts=echarts 3、具体页面使用ÿ 查看详情

vue+echarts画甘特图(代码片段)

访问天地图wmts服务的正确姿势

...要获取开发授权。这确实带来不便，所有涉及天地图的项目都得改，尤其是那些将喜欢叫参数写死在代码中同学。代码访问方式代码修改方式不麻烦，在原有查看详情

笔记：openlayers加载天地图为底图(代码片段)

官网上有个quickstart我是在这个基础上进行修改的：https://openlayers.org/en/latest/doc/quickstart.html这个是官网的：<!doctypehtml><htmllang="en"><head><linkrel="stylesheet&# 查看详情

openlayers6加载天地图混乱问题(代码片段)

按照之前的加载百度地图的方式切片排版会错误修改resouce为下边任意一种：baidu_source或者baidusource都可以正常加载百度地图 <!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content 查看详情

vue入门使用vue2开发一个展示项目列表的应用(代码片段)

前言一直没有找到一个合适的展示个人项目的模板，所以自己动手使用Vue写了一个。该模板基于Markdown文件进行配置，只需要按一定规则编写Markdown文件，然后使用一个在线工具转为JSON文件即可。下面是该项目的在线... 查看详情

电商平台实时监控系统丨前端项目的准备(代码片段)

项目最终的效果如图所示:最终效果涉及到6个图表,5种图表类型,它们分别是折线图,柱状图,地图,散点图,饼图每个图表的数据都是从后端推送到前端来的,不过在项目的初期,我们会先使用ajax由前端主动获取数据,后续会使用WebSocket... 查看详情

天地图之点聚合(代码片段)

地图中一次性渲染成千上万个点容易造成页面崩溃，那么可以选择点聚合的形式渲染标记点，地图引入就不啰嗦了，可以参考此专栏前几篇文章1.模拟接口这里用到了Mock.js模拟了接口返回的经纬度，Mock.js，也... 查看详情

创建vue项目(代码片段)

1.新建项目存储文件夹，cmd命令进入项目文件夹2.创建项目，命令如下图所示vuecreatedemo-ant-vue3.选择“Manuallyselectfeatures”，配置步骤如下：4.创建项目成功后，如下图所示：5.运行项目npmrunserve#或者cnpmrunserve 查看详情