天地图相关

天地图相关的

---

前言

记录下自己在项目中写地图是使用的常用功能和遇到的问题（vue2）

---

一、基本信息

天地图打点坐标：new T.LngLat(lng, lat)

lng 东西 越往东越大 0-180
lat 南北 越往北越大 0-90

二、天地图显示

1.加载天地图

在public文件下的 index.html 中引入天地图（tk需要去天地图官网申请）

代码如下（示例）：

<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=****"></script>

2.显示天地图

先加载地图的容器。

<template>
	//需要给容器一个大小
	<div id="Map"></div>
</template>
<script>
export default {
  name: 'TdtMap',
  data() {
    return {
      map: {},
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initMap('Map');
    });
  },
  watch: {},
  methods: {
  	initMap(id){
  		const { T } = window;
	    this.map = new T.Map(id);
	    this.map.centerAndZoom(new T.LngLat(109.78, 39.60), 12);
  	}
  }
};
</script>
<style scoped>
	#map{
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
	}
</style>

3.天地图加载wmts图层

添加图层

   var 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=您的密钥";
   //创建自定义图层对象,将图层创建为公共变量，后期删改比较方便
   this.lay = new T.TileLayer(imageURL, {minZoom: 1, maxZoom: 18});
   //将图层增加到地图上
   this.map.addLayer(lay);

移除图层

   this.map.removeLayer(this.lay);

4.天地图配置

	//缩放最大最小级别，最大20，最小15设置
	this.map.setMaxZoom(20);
    this.map.setMinZoom(15);

（1）添加点击事件

	//线添加
    const { T } = window;
	const rect=[[109,36],[...]]
	const points=[]
	rect.forEach((i) => {
       points.push(new T.LngLat(i[0], i[1]));
     });
     const polygon = new T.Polygon(points, { color: 'blue', weight: 1, opacity: 0.5, fillColor: '#01408F', fillOpacity: 0.5 });
     polygon.addEventListener('click', () => {
       //触发的动作
     });
     //点添加
     const position=[109,36]
     const icon = new T.Icon({
       iconUrl: require('图片地址'),
       iconSize: new T.Point(30, 30),  //图片大小
       iconAnchor: new T.Point(10, 25)  //图片位置
     });
     const marker = new T.Marker(new T.LngLat(position[0], position[1]), { icon });
     this.map.centerAndZoom(new T.LngLat(obj.lng, obj.lat), 15);
     this.map.addOverLay(marker);
     marker.addEventListener('click', () => {
       //触发的动作
     });

（2）缩放级别

	// this.map.getZoom()获取缩放级别
	this.map.on('zoomend', this.handleZoomEnd);
	handleZoomEnd(){
		//zoom就是变化后的缩放比例
	  const zoom = this.map.getZoom();
	}

---

三、添加自定义覆盖物

添加覆盖物的容器。

<template>

	//需要给容器一个大小
	<div id="Map"></div>
	//覆盖物容器
	<div ref="msgMap"></div>
</template>

<script>
export default {
  name: 'TdtMap',
  data() {
    return {
      map: {},
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initMap('Map');
    });
  },
  watch: {},
  methods: {
  	initMap(id){
  		const { T } = window;
	    this.map = new T.Map(id);
	    this.map.centerAndZoom(new T.LngLat(109.78, 39.60), 12);
  	}，
  	//添加自定义覆盖物的代码
  	addDefinedOverlay(){
		const Boxdiv = this.$refs.msgMap;
        const DefinedOverlay = T.Overlay.extend({
          initialize(lnglat, options) {
            this.lnglat = lnglat;
            this.setOptions(options);
          },
          onAdd(map) {
            this.map = map;
            map.getPanes().overlayPane.appendChild(Boxdiv);
            that.$nextTick(() => {
            });
            this.update(this.lnglat);
          },
          onRemove() {
            const parent = Boxdiv.parentNode;
            if (parent) {
              parent.removeChild(Boxdiv);
            }
          },
          update() {
            const pos = this.map.lngLatToLayerPoint(this.lnglat);
            Boxdiv.style.left = `${pos.x - 100}px`;
            Boxdiv.style.top = `${pos.y - 80}px`;
          }
        });

        const point = new T.LngLat(109.78, 39.60);
        const pdefinedOverlay = new DefinedOverlay(point, {});
        this.Map.addOverLay(pdefinedOverlay);
	},
	//清空覆盖物
	clear(){
		//const { T } = window;
	    this.Map.clearOverLays();
	}
  }
};
</script>
<style scoped>
	#map{
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
	}
</style>

四、h5天地图

在h5页面直接引入天地图

<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=**"></script>

1.缩放问题

手机上看到的比实际地图小很多，排查下在代码中没有设置。添加如下代码

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

五、uniapp的地图选择插件

天地图位置选择-地名搜索