直接代码
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<!-- 天地底图 -->
<script type="text/javascript" src="https://api.tianditu.gov.cn/api?v=4.0&tk=换成自己的token"></script>
<style type="text/css">
.btn-wrap{position: fixed;top:10px;right:20px;z-index: 999; display: flex;}
#container{width:100%;height:1000px;}
#right-btn {
visibility: hidden;
position: absolute;
top: 0px;
left: 0px;
z-index: 999;
background-color: #fff;
cursor: pointer;
border: 1px solid #dee1e6;
}
.right-item {
margin: 4px;
font-size: 12px;
}
.right-item:hover {
color: #23aaf2;
}
</style>
</head>
<body>
<div id="right-btn">
<p class="right-item" @click=""><i class="el-icon-edit"></i> 编辑</p>
<p class="right-item" onclick="delPolygon()"><i class="el-icon-delete"></i> 删除</p>
<p class="right-item" @click=""><i class="el-icon-circle-close"></i> 取消</p>
</div>
<div id='container'></div>
</body>
</html>
<script>
//地图--------------------------------------------------开始
//初始化地图
function initMap() {
createMap(); //创建地图
addMapControl(); //向地图添加控件
draw()
}
//创建地图函数：
function createMap() {
let map = new T.Map('container', {
projection: 'EPSG:4326'
});
map.centerAndZoom(new T.LngLat(103.388611,35.563611), 4);
map.enableScrollWheelZoom();
map.setMapType(TMAP_HYBRID_MAP);//设置地图混合模式
window.map = map; //将map变量存储在全局
}
//地图控件
function addMapControl() {
//创建比例尺控件对象
let scale = new T.Control.Scale();
//添加比例尺控件
map.addControl(scale);
//创建缩放平移控件对象
control = new T.Control.Zoom();
control.setPosition(T_ANCHOR_BOTTOM_RIGHT);
//添加缩放平移控件
map.addControl(control);
}
initMap(); //创建和初始化地图
let ctrl = new T.Control.MapType([
// 这里顺序不能变，图层要放到第一个
{
title: "地图", //地图控件上所要显示的图层名称
icon: "https://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png", //地图控件上所要显示的图层图标（默认图标大小80x80）
layer: TMAP_NORMAL_MAP, //地图类型对象，即MapType。
},
{
title: "卫星混合",
icon: "https://api.tianditu.gov.cn/v4.0/image/map/maptype/satellitepoi.png",
layer: TMAP_HYBRID_MAP,
}
]);
ctrl.setPosition(window.T_ANCHOR_BOTTOM_LEFT); //地图选择控件位置
map.addControl(ctrl); //添加地图选择控件
map.setMapType(TMAP_HYBRID_MAP)
//地图-----------------------------------------------------------------结束
function draw() {
polygonTool = new T.PolygonTool(map, {
showLabel: false, // 不显示面积信息
color: "#ffcd42", weight: 3, opacity: 0.5, fillColor: "#ffdc00", fillOpacity: 0.5
});
polygonTool.open()
polygonTool.addEventListener('draw',drawFinish) // 监听双击绘制完成事件，调用drawFinish方法
}
function drawFinish(e) {
console.log("顶点坐标列表 ----------> ", e.currentLnglats)
}
// 圈地结束
function drawFinish(e) {
console.log("顶点坐标列表 ----------> ", e.currentLnglats)
e.currentPolygon.addEventListener('dblclick', dblclickPolygon) // 绘制完成给覆盖物添加双击事件
}
function dblclickPolygon(e) {
currentPolygon = e.target // 把当前操作的覆盖物赋值给一个全局变量
let menu = document.getElementById('right-btn');
let evt = window.event || arguments[0];
menu.style.left = evt.clientX - 220 + "px";
menu.style.top = evt.clientY - 60 + "px";
menu.style.visibility = "visible";
}
//删除圈地
function delPolygon() {
console.log('ok')
map.removeOverLay(currentPolygon) // 清除当前选中的覆盖物
handlerMenu() // 执行一个方法
}
function handlerMenu() {
let menu = document.getElementById('right-btn');
menu.style.visibility = "hidden";
}
</script>
