vue项目天地图使用

Posted 2023-04-05 迷路的琉星

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

结语

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

Vue Arcgis叠加天地图

<template>
  <div class="wrapper">
    <div id="viewDiv">
      <PageSwitch />
    </div>
  </div>
</template>

<script>
import PageSwitch from "@/components/PageSwitch";
import { loadModules } from "esri-loader";
export default {
  name: "Data",
  components: {
    PageSwitch
  },
  mounted() {
    loadModules(
      ["esri/layers/WebTileLayer", "esri/Map", "esri/views/SceneView"],
      {
        url: "https://zrzyhghj3.jiaxing.gov.cn/arcgis/api/4.12/init.js"
      }
    )
      .then(([WebTileLayer, Map, SceneView]) => {
        var tiandituBaseUrl = "http://{subDomain}.tianditu.gov.cn"; //天地图服务地址
        var token = "7baeffb96bf61861b302d0f963cfda66"; //天地图token

        var map = new Map({
          ground: "world-elevation"
        });

        var view = new SceneView({
          container: "viewDiv",
          map: map,
          scale: 123456789,
          center: [120.75, 30.75]
        });

        //矢量地图(球面墨卡托投影)
        var tiledLayer = new WebTileLayer({
          urlTemplate:
            tiandituBaseUrl +
            "/img_w/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=img&STYLE=default&FORMAT=tiles&TILEMATRIXSET=w&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=" +
            token,
          subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
        });

        //矢量注记(球面墨卡托投影)
        var tiledLayerAnno = new WebTileLayer({
          urlTemplate:
            tiandituBaseUrl +
            "/cia_w/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=cia&STYLE=default&FORMAT=tiles&TILEMATRIXSET=w&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=" +
            token,
          subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
        });

        map.add(tiledLayer);
        map.add(tiledLayerAnno);
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>

<style lang="less" scoped>
.wrapper {
  width: 100%;
  height: 100%;
  #viewDiv {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>