目录
一、初始化地图
二、创建polygonTool
三、多边形获取面积
四、完整代码（包括添加点、添加面、编辑面、获取面积）
项目中提出在地图上绘制面并获取面积，如何实现？
在天地图官网的JavaScript API 中，链接如下：
天地图JavaScript API
能看到Polygon并没有提供测量面的工具，这里需要使用polygonTool类。
一、初始化地图
map = new T.Map('mapDiv',);
// var lnglat = new T.LngLat(jshjData[0].lng,jshjData[0].lat)
var lnglat = new T.LngLat(115.79251,28.93511)
// var lnglat = new T.LngLat(80.41150304634095,80.44935513895808)
map.centerAndZoom(lnglat,17);
//隐藏天地图Logo
document.getElementsByClassName("tdt-control-copyright tdt-control")[0].style.display = 'none';二、创建polygonTool
//开始绘制
function startDraw(isToolArea) {
if (handler){
handler.close();
}
if (isToolArea){
var config = {
showLabel: true,
color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5
};
//创建标注工具对象
handler = new T.PolygonTool(map, config);
}else {
handler = new T.PolygonTool(map);
}
handler.open();
//长按结束事件
handler.addEventListener('draw', ()=>{
dataList = handler.getPolygons()[0].ht[0];
//绘制完成后获取绘制面的坐标点
console.log(dataList);
//获取绘制面的面积
console.log(handler.getArea(dataList))
});
}运行结果：
双击结束，控制台打印面积：
三、多边形获取面积
polygonTool是用鼠标绘制的多边形，用handler.getArea(arrays) ,其中arrays是多边形每个点的经纬度组成的数组，就可以获取到已知经纬度的面积。代码如下：
function addPolygonGetAreaFn(){
//polyon不能直接测量面积，需要初始化标注工具。
var config = {
showLabel: true,
color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5
};
//创建标注工具对象
handler = new T.PolygonTool(map, config);
//添加面
let array = [
{lat: 28.93556, lng: 115.79179},
{lat: 28.93445, lng: 115.79303},
{lat: 28.93401, lng: 115.79102}
];
var points = [];
array.forEach((v,k)=>{
points.push(new T.LngLat(v.lng,v.lat));
})
//创建面对象
polygon = new T.Polygon(points,{
color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5
});
//向地图上添加面
map.addOverLay(polygon);
//获取面积
console.log(handler.getArea(polygon.getLngLats()[0]))
}
四、完整代码（包括添加点、添加面、编辑面、获取面积）
其中jquery.min.js需要引用本地或者线上，如
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
其二，密钥需要在天地图官网进行申请。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="https://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥"></script>
<style>
.page{
width: 100%;
height: 100vh;
display: flex;
}
.page #mapDiv{
width: 70%;
height: 70%;
}
.page .buttonCon{
margin-left: 50px;
}
.page .buttonCon .button{
font-size: 18px;
padding: 7px 15px;
border: 1px solid #4bacee;
border-radius: 10px;
margin-bottom: 30px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="page">
<div id="mapDiv"></div>
<div class="buttonCon">
<div class="button" onclick="addPolygonGetAreaFn()">添加面</div>
<div class="button" onclick="startDraw(false)">绘制面(不带面积)</div>
<div class="button" onclick="startDraw(true)">绘制面(带面积)</div>
<div class="button editButton" onclick="editPolygonFn()">编辑绘制面</div>
<div class="button" onclick="getPolygonFn()">获取面的坐标点</div>
<div class="button addButton" onclick="addMarker()">增加点</div>
<div class="button editButton" onclick="editMarker()" style="display: none">修改点</div>
</div>
</div>
<script>
var map;
var polygon;
var handler;
//绘制面的坐标点集合
var dataList;
getMap()
//地图
function getMap(){
// map=new T.Map('mapDiv');
var lay;
//初始化地图对象
map = new T.Map('mapDiv');
// var lnglat = new T.LngLat(jshjData[0].lng,jshjData[0].lat)
var lnglat = new T.LngLat(115.79251,28.93511)
// var lnglat = new T.LngLat(80.41150304634095,80.44935513895808)
map.centerAndZoom(lnglat,17);
document.getElementsByClassName("tdt-control-copyright tdt-control")[0].style.display = 'none';
}
//地图点击事件
map.addEventListener("click",function (e){
// console.log(e)
});
//添加面
function addPolygonFn(pointsArr){
// var points = [];
// pointsArr.forEach((v,k)=>{
// points.push(new T.LngLat(v.lng,v.lat));
//
// })
// //创建面对象
// plygon = new T.Polygon(points,{
// color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5
// });
//
// //向地图上添加面
// map.addOverLay(polygon);
var points = [];
// points.push(new T.LngLat(116.41136, 39.97569));
// points.push(new T.LngLat(116.411794, 39.9068));
// points.push(new T.LngLat(116.32969, 39.92940));
// points.push(new T.LngLat(116.385438, 39.90610));
pointsArr.forEach((v,k)=>{
points.push(new T.LngLat(v.lng,v.lat));
})
//创建面对象
polygon = new T.Polygon(points,{
color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5
});
//向地图上添加面
map.addOverLay(polygon);
}
//添加面并获取面积
function addPolygonGetAreaFn(){
//polyon不能直接测量面积，需要初始化标注工具。
var config = {
showLabel: true,
color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5
};
//创建标注工具对象
handler = new T.PolygonTool(map, config);
//添加面
let array = [
{lat: 28.93556, lng: 115.79179},
{lat: 28.93445, lng: 115.79303},
{lat: 28.93401, lng: 115.79102}
];
var points = [];
array.forEach((v,k)=>{
points.push(new T.LngLat(v.lng,v.lat));
})
//创建面对象
polygon = new T.Polygon(points,{
color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5
});
//向地图上添加面
map.addOverLay(polygon);
//获取面积
console.log(handler.getArea(polygon.getLngLats()[0]))
}
//编辑面
let edit = true
function editPolygonFn(){
if (edit){
//编辑面
polygon.enableEdit();
$('.editButton').html('完成编辑');
edit =false;
}else {
//禁止编辑
polygon.disableEdit();
$('.editButton').html('编辑绘制面');
edit =true;
console.log(polygon.getLngLats()[0])
console.log(handler.getArea(polygon.getLngLats()[0]))
}
}
function getPolygonFn(){
console.log(polygon.getLngLats()[0]);
}
//开始绘制
function startDraw(isToolArea) {
if (handler){
handler.close();
}
if (isToolArea){
var config = {
showLabel: true,
color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5
};
//创建标注工具对象
handler = new T.PolygonTool(map, config);
}else {
handler = new T.PolygonTool(map);
}
handler.open();
//长按结束事件
handler.addEventListener('draw', ()=>{
dataList = handler.getPolygons()[0].ht[0];
//绘制完成后获取绘制面的坐标点
console.log(dataList);
//清空绘制面
map.clearOverLays();
//添加面(同绘制面)
addPolygonFn(dataList);
console.log(handler.getArea(dataList))
});
}
var marker;
var markerLng;
var markerLat;
//加点
function addMarker(){
map.addEventListener("click",MapClick);
}
//地图点击事件
function MapClick(e) {
markerLng = e.lnglat.getLng();
markerLat = e.lnglat.getLat();
//创建标注对象
marker = new T.Marker(new T.LngLat(markerLng, markerLat));
//向地图上添加标注
map.addOverLay(marker);
//移除点击事件
map.removeEventListener("click",MapClick);
$('.addButton').hide();
$('.editButton').show();
}
//修改点
function editMarker(){
addMarker();
map.removeOverLay(marker)
}
</script>
</body>
</html>运行结果：
