天地图学习使用小结


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

天地图
首先是引入

<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>
  1. 如果在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()
                })
参数可以结合调用相应的点创建时

文章作者: 无名小卒
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 无名小卒 !
  目录