思路
准备一些多边形坐标，然后在天地图上利用这些坐标形成面，在面上添加监听事件（比如鼠标移入该面后出现信息框）
知识点
Polygon类创建多边形覆盖物。
构造参数：Polygon(points:Array[,opts:PolygonOptions])
points：坐标数组。
opts：多边形的属性对象，请参考 PolygonOptions。更多参数请参考天地图文档
效果图
html部分
<body onLoad="mapTDTLoad()">
<div id="typeMap">
<div class="mestable">
<div class="registerbtn">
<div class="regcolor1"οnclick="addPolygonClick();"><p>开始注册</p></div>
<div class="regcolor2"οnclick="removePolygonClick();"><p>完成注册</p></div>
</div>
</div>
</div>
</body>
css部分
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body, html{
width: 100%;
height: 100%;
font-family:"微软雅黑";
}
#typeMap{
width: 100%;
height: 100%;
}
#typeMap .mestable{
/*float:left;*/
top: 50px;
right: 50px;
position: absolute;
z-index: 999;
width: auto;
box-shadow: 0 50px 50px rgba(10, 16, 20, 0.24), 0 0 30px rgba(10, 16, 20, 0.12);
background-color: #8D8D8D;
cursor: pointer;
/*display: none;*/
}
#typeMap .mestable .registerbtn{
padding: 5px 0;
/*background-color: #D9D9D9;*/
background-color: rgba(255,255,255,1);
width: 165px;
height: 50px;
display: flex;
justify-content: space-around;
align-items: center;
}
#typeMap .mestable .registerbtn>div{
padding: 0 5px;
width: 60px;
height: 30px;
border-radius: 2px;
box-shadow: 0 1px 0 rgba(255,255,255,0.34) inset,
0 2px 0 -1px rgba(0,0,0,0.13),
0 3px 0 -1px rgba(0,0,0,0.08),
0 3px 13px -1px rgba(0,0,0,0.21);
}
#typeMap .mestable .registerbtn>div p{
text-align: center;
height: 30px;
line-height: 30px;
color: #ffffff;
}
#typeMap .mestable .registerbtn>div.regcolor1{
background-color: #3498db;
}
/*#typeMap .mestable .registerbtn>div.regcolor1:focus{*/
/* background-color: #fd9644;*/
/*}*/
#typeMap .mestable .registerbtn>div.regcolor2{
background-color: #f1c40f;
}
js部分
var map,zoom = 17,polygon2;
function mapTDTLoad() {
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 lay1 = new T.TileLayer(imageURL, {minZoom: 1, maxZoom: 18});
const lay2 = new T.TileLayer(imageURLT, {minZoom: 1, maxZoom: 18});
var config = {layers: [lay1, lay2]};
map = new T.Map('typeMap', config);
map.centerAndZoom(new T.LngLat(107.52292,22.35511), zoom);
//禁用双击放大。
map.disableDoubleClickZoom();
//添加面覆盖物
Polygons();
}
//添加面覆盖物
function Polygons() {
var points2 = [];
// points2.push(new T.LngLat());
points2.push(new T.LngLat(107.52387,22.35681));
points2.push(new T.LngLat(107.52345,22.35654));
points2.push(new T.LngLat(107.52306,22.3563));
points2.push(new T.LngLat(107.52279,22.35609));
points2.push(new T.LngLat(107.52225,22.35561));
points2.push(new T.LngLat(107.52284,22.35488));
points2.push(new T.LngLat(107.52443,22.35597));
config2 = {
color: "#ffffff",
// color: "#16a085",
weight: 3,
opacity: 0.5,
// fillColor: "#eb3b5a",
fillColor: "#16a085",
fillOpacity: 0.5
}
polygon2 = new T.Polygon(points2, config2);
//向地图上添加面
map.addOverLay(polygon2);
}
function addPolygonClick(){
//开始操作
layer.msg('开始操作');
// //移除面的点击事件，防止多次注册
// removePolygonClick();
//所有注册面的触发事件
polygon2.addEventListener("click", tagging);
}
function removePolygonClick(){
//移除面的注册事件
polygon2.removeEventListener("click", tagging);
// 完成操作
layer.msg('完成操作');
}
//在面的覆盖物上添加标注信息
function tagging() {
var lnglat = new T.LngLat(107.52303,22.35559);
//创建信息窗口对象
var infoWin = new T.InfoWindow();
//设置信息窗口要显示的内容
var Content =
`
<div id="win_box" style="height: auto; ">
<table style=" width:300px;border-collapse: separate;font-size:14px;border-spacing:0 6px;table-layout:fixed;">
<caption style="font-weight:bold;font-size:16px;text-align: left;border-bottom: #d1d8e0 1px solid">地块详情</caption>
<tr><td style=" width: 20%;font-weight:bold;text-align:left;">地点:</td><td style="text-align:left;width:45%;word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">崇左市江州区渠留屯周边</td></tr>
<tr><td style=" font-weight:bold;text-align:left;">类别:</td><td style="text-align:left;width:80%;word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">耕地</td></tr>
<tr><td style=" font-weight:bold;text-align:left;">面积:</td><td style="text-align:left;width:80%;word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">22.5亩</td></tr>
<tr><td style=" font-weight:bold;text-align:left;">种植类型:</td><td style="text-align:left;width:80%;word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">粤糖 55</td></tr>
<tr><td style=" font-weight:bold;text-align:left;">种植时间:</td><td style="text-align:left;width:80%;word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">2019/02/04</td></tr>
<tr><td style=" font-weight:bold;text-align:left;">联系人名:</td><td style="text-align:left;width:80%;word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">龙先生</td></tr>
<tr><td style=" font-weight:bold;text-align:left;">联系电话:</td><td style="text-align:left;width:80%;word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">135****7823</td></tr>
<tr><td style=" font-weight:bold;text-align:left;color: #fa8231;cursor: pointer" οnclick="massifExhibit()">最新情况:</td><td style="text-align:left;width:80%;word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"><a href="http://www.tly.cloud/web/index.html#/index">更多内容</a></td></tr>
</table>
</div>
`;
infoWin.setContent(Content);
infoWin.setOffset(new T.Point(0,-30))
infoWin.setLngLat(lnglat);
//向地图上添加信息窗口
map.addOverLay(infoWin);
polygon2.removeEventListener("click",PolygonClick);
}
function massifExhibit() {
layer.open({
type:2,
title: false,
content: `massiftype/rotat`,
area: ['600px', '431px'],
});
}
