天地图学习使用小结

天地图目前个人是免费使用

首先是引入

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

以上需要每次刷新页面都去请求，也可以下载下来本地引用，但是瓦片图是需要联网的

初始化地图

1. 需要一个已知大小的div，指定id,像这样

<div 
   id="mapDiv"
   class="w-full h-full"
   >

   </div>

2. 如果在vue中，需要注意必须在页面加载后才能初始化，大概这样

   var map;
   onMounted(()=>{
      
       var zoom = 8;
       function onLoad() {
           map = new T.Map('mapDiv');
           map.centerAndZoom(new T.LngLat(120.733167,30.764628), zoom);
       }
       //加载地图
       onLoad()
   })

标点

自带的图标也是不错的，也可以自定义，自定义是这样的

let circleIcon = new T.Icon({
                iconUrl: "./image/location.png",
                iconSize: new T.Point(30, 30),
                // iconAnchor: new T.Point(10, 25)
            });

添加到地图上

let point = new T.LngLat(el.longitude, el.latitude) //转成天地图的经纬度格式
let marker  = new T.Marker(point, {icon: circleIcon,zIndexOffset:100})
map.addOverLay(marker)

多边形

多边形与单点调用方式类似，像这样，只不过需要传入一个坐标数组，并指定一下线和面的样式

let Tpoints = positionList.map(el=>{
    return new T.LngLat(el.longitude, el.latitude)
})
let polygon = new T.Polygon(Tpoints,{color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5});
map.addOverLay(polygon)

文字标注

let label =  new T.Label({
                    text: `<a  class="project-title" href='#/projectDetail/?projectId=${el.id}' >${el.engineeringName}</a>`,
                    position: new T.LngLat(el.longitude, el.latitude),
                    offset: new T.Point(offsteX , offsetY)
                });
map.addOverLay(label)

text中可以加自己想要的div,这一点挺不错的，另外需要注意的是对齐参考点默认是标签div的左上角，但是有时候需要将div中间对准参考点，这样的话需要额外计算标签div的宽度

像下面这样，在当前环境下模拟添加一个div，再获取其宽度，最后将其销毁

//获取标签宽度，因为地图的对齐方式是左上角对齐，而设计的对齐方式是右下角对齐，所以要计算宽度
function getTextWidth(text, fontSize = 14) {
	// 创建临时元素
	const _span = document.createElement('div')
	// 放入文本
	_span.innerText = text
	// 设置文字大小
	_span.style.fontSize = fontSize + 'px'
	// span元素转块级
	_span.style.position = 'absolute'
	_span.style.padding = 0
	// span放入body中
	document.body.appendChild(_span)
	// 获取span的宽度
	let width = _span.offsetWidth
	// 从body中删除该span
	document.body.removeChild(_span)
	// 返回span宽度
	return width
}

自定义信息窗，功能更加强大一点，像下面这样

let markerInfoWin = new T.InfoWindow(content,{offset:new T.Point(0,0)}); // 创建信息窗口对象
map.openInfoWindow(markerInfoWin,TPonit); //开启信息窗口

也可以在指定对象上打开信息窗，如
polygon.openInfoWindow(infoWin1,TPonit);

content 是任意的div字符串，可以用字面量模板方式

地图api自带的一些方法

移动到指定坐标

map.panTo(new T.LngLat(lng, lat));

清空覆盖物

map.clearOverLays();

设置缩放级别

map.setZoom(zoom)

自动设置合适的视野，这一个比较好，只要传入一组坐标数组即可

let TPoints = list.map(el=>{
    return T.LngLat(el.longitude,el.latitude)
 })
map.setViewport(TPoints)

地图事件

目前用到的是在marker、polygon上点击或者hover事件

map.addEventListener("click",MapClickPolygon);


marker.addEventListener("mouseover", function(){
                    hoverCamera(el)
                })
                
marker.addEventListener("mouseout ", function(){
                    map.closeInfoWindow()
                })
参数可以结合调用相应的点创建时