【自学笔记】在天地图展示多个标注和文字信息

目录

相关知识点

类表示地图上一个图像标注。其构造函数(:[,opts:])

：为标注点的坐标，属于对象的地理坐标

opts：标注的属性，或者说改变默认样式，例如设置标注图标，堆叠顺序，透明度等。

//创建一个默认的标注点
//创建标注对象，实例化Marker类
var marker = new T.Marker(new T.LngLat(116.411794, 39.9068));
//向地图上添加标注。其中addOverLay(overlay:OverLay)方法将覆盖物添加到地图中，一个覆盖物实例只能向地图中添加一次。
map.addOverLay(marker);

类表示地图上包含信息的窗口。构造函数 (:|[,opts:])

：信息窗口的内容，字符串类型或者对象

opts：信息窗口属性，可设置弹窗的最大或最小宽度。详情参考天地图 API 4.0 类参考

   //在一个点上添加窗口信息         //创建信息窗口对象var infoWin = new T.InfoWindow();infoWin.setLngLat(new T.LngLat(116.40969, 39.94940));//设置信息窗口要显示的内容infoWin.setContent("添加的信息窗口");//向地图上添加信息窗口map.addOverLay(infoWin);

需求：将多个地理坐标点及其信息在天地图上展示。

解决思路：向后台请求数据后，循环将所有坐标添加到地图上，当鼠标触碰标注时显示窗口内容

结果展示

js代码

var map;
var zoom = 12;
function onLoad() {const 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=你的秘钥";const imageURLT = "http://t0.tianditu.gov.cn/cia_w/wmts?" +"SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +"&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}" +"&tk=你的秘钥";//创建自定义图层对象const lay = new T.TileLayer(imageURL, {minZoom: 1, maxZoom: 18});const lay2 = new T.TileLayer(imageURLT, {minZoom: 1, maxZoom: 18});var config = {layers: [lay,lay2]};map = new T.Map('mapDiv',config);map.centerAndZoom(new T.LngLat(107.353926, 22.404108), zoom);//ajax向后台请求各个类型的数据$.ajax({url: "locdata",type: "GET",data: {},success: function (data) {//全部数据(租赁and自购)dataloc=data[0]//建立覆盖物buildCovers(dataloc)console.log(dataloc)}})
}//购买方式：全选覆盖物
function buildCovers(coverdata){//创建图标对象let icon = new T.Icon({iconUrl: "http://api.tianditu.gov.cn/img/map/markerA.png",iconSize: new T.Point(19, 27),//设置图标可视区域的大小。iconAnchor: new T.Point(10, 25)//设置相对于图片左上角的像素距离。可看作偏离（0,0）坐标});for (let i in coverdata){//循环将每一个坐标点创建Marker类对象var marker = new T.Marker(new T.LngLat(coverdata[i][2],coverdata[i][3]),{icon: icon});  // 创建标注//先将关于该坐标点的信息存储到数据库中var content = [coverdata[i][4],coverdata[i][5],coverdata[i][6],coverdata[i][7],coverdata[i][1],coverdata[i][0]];// 将标注添加到地图中map.addOverLay(marker);//添加坐标点的监听事件，当鼠标触碰该点时打开信息窗口addMouseoverHandler(content,marker);}
}
//鼠标在覆盖物上的监听事件
function addMouseoverHandler(content,marker){marker.addEventListener("mouseover",function(e){openInfo(content,e)});
}
//窗口信息
function openInfo(content,e){var point = e.lnglat;// 创建信息窗口对象var markerInfoWin = new T.InfoWindow()var sContent =`
${content[4]}区域
计划村屯:
${content[2]}
收割机数:
租赁：${content[3]["租赁"]} | 自购：${content[3]["自购"]} 
品牌:
${content[1]}
合作社:
${content[0]}
${content[5]}"style="text-decoration:none;hover{color:#f1c40f}">更多：》》
`;//设置信息窗口要显示的内容markerInfoWin.setContent(sContent);//setOffset设置信息浮窗显示时向右下角偏移量（像素）。-30则代表向上偏移markerInfoWin.setOffset(new T.Point(0,-30))//开启信息窗口map.openInfoWindow(markerInfoWin,point);}

好记性不如烂笔头，打算把博客作为学习工具，记录理解的知识点方便后面查看，顺便记录成长点滴。我是一名技术小白，我会一直努力学习，若文章有不对的地方，欢迎大家指正，我的邮箱：