天地图API绘制的图形进行编辑修改
请教如何对绘制的多边形进行编辑，就是可以移动顶点坐标，对图形的外观进行编辑。多边形采用《PolygonTool》工具箱绘制，并不是采用预先给定坐标，然后采用 map.addOverLay(line)方式绘制。源代码如下，可正常运行，但就是不能编辑多边形。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="keywords" content="天地图"/>
<title>天地图－地图API－范例－画线</title>
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=秘匙"></script>
<style type="text/css">body,html{width:100%;height:100%;margin:0;font-family:"Microsoft YaHei"}#mapDiv{width:100%;height:400px}input,b,p{margin-left:5px;font-size:14px}</style>
<script>
var map;
var zoom = 12;
var handler;
function onLoad() {
//初始化地图对象
map = new T.Map("mapDiv");
//设置显示地图的中心点和级别
map.centerAndZoom(new T.LngLat(116.40969, 39.94940), zoom);
var config = {
showLabel: true,
color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5
};
//创建标注工具对象
polygonTool = new T.PolygonTool(map, config);
}
function openPolygonTool() {
if (handler) handler.close();
handler = new T.PolygonTool(map);
handler.isEditable=true;
handler.open();
}
</script>
</head>
<body onLoad="onLoad()">
<div id="mapDiv" ></div>
<p>本示例演示如何启动和禁止线的编辑功能。</p>
<div >
<input type="button" value="绘制多边形" onclick="openPolygonTool();"/>
<input type="button" value="启动编辑" onclick="line.enableEdit();">
<input type="button" value="禁止编辑" onclick="line.disableEdit();"/>
</div>
</body>
</html>
想要的效果如下图所示：
前面的答题者说了，可以使用line.enableEdit();line.disableEdit();来控制是否编辑，如果不行的话，那说明PolygonTool不一定带有编辑功能，具体你需要查看下官方的API，看下是否支持该图像的编辑功能，如果不支持的话，那你可能需要更换实现方案。
我现在把我的全部代码贴出来，方便大家寻找问题。注意：key除外。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>在线天地图服务</title>
<script type="text/javascript" src="https://api.tianditu.gov.cn/api?v=4.0&tk=略"></script>
<script type="text/javascript" src="jsscty.js"></script>
<link href="tstyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function thide() {
var traget=document.getElementById("tool");
traget.style.display="none";
}
</script>
<script type="text/javascript">
function tdisplay() {
var traget=document.getElementById("tool");
traget.style.display="";
}
</script>
</head>
<body onLoad="onLoad()">
<div class="edt">
<input type="button" value="<>" onClick='tdisplay()' class="but" />
<li></li>
<input type="button" value="><" onClick='thide()' class="but" />
</div>
<div class="input" id="tool">
<input type="button" value="地图标注" onClick='openMarkerTool() ' class="button" />
<li></li>
<input type="button" value="绘制直线" onClick='openPolylineTool() ' class="button"/>
</div>
<!--地图容器-->
<div id="mapDiv" class="mapDiv"></div>
</body>
</html>
后面是JS代码部分：
var control;
var map, zoom = 12,handler;
var line = [];
function onLoad() {
map = new T.Map('mapDiv',{
minZoom:3,
maxZoom:18
});
map.centerAndZoom(new T.LngLat(116.40769, 39.89945), zoom);
var lc = new T.LocalCity();
lc.location(function (e) {
var marker = new T.Marker(e.lnglat);
map.addOverLay(marker);
});
//创建缩放平移控件对象
control = new T.Control.Zoom();
//添加缩放平移控件
map.addControl(control);
//允许鼠标滚轮缩放地图
map.enableScrollWheelZoom();
//创建比例尺控件对象
var scale = new T.Control.Scale();
//添加比例尺控件
map.addControl(scale);
//创建地图类型对象
var ctrl = new T.Control.MapType();
//添加控件
map.addControl(ctrl);
var config = {
showLabel: true,
color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5
};
//创建标注工具对象
polygonTool = new T.PolygonTool(map, config);
//创建右键菜单
var menu = new T.ContextMenu({
width: 100
});
var txtMenuItem = [
{
text: '设为标记点',
callback: function () {
map.zoomIn()
}
},
{
text: '编辑图形',
callback: function () {
//此处需增加编辑图形的函数的请教问题
//官网案例是通过按钮的onclick事件实现编辑，我是想通过右键直接编辑。
}
},
];
for (var i = 0; i < txtMenuItem.length; i++) {
//添加菜单项
var menuItem = new T.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback);
menu.addItem(menuItem);
if (i == 1) {
//添加分割线
menu.addSeparator();
}
}
//添加右键菜单
map.addContextMenu(menu);
}
//绘制直线
function openPolylineTool() {
if (handler) handler.close();
handler = new T.PolylineTool(map);
handler.open();
}
//绘制一个点
function openMarkerTool() {
if (handler) handler.close();
handler = new T.MarkTool(map, {follow: true});
handler.open();
}
你说的挺凌乱的。
如果只是编辑：line.enableEdit();line.disableEdit();
vue【天地图】使用天地图api绘制GeoJson解析，矩形绘画，实现本地js天地图效果
<template>
<div >
<div class="Map_conter" id="map"></div>
<div class="Draw_draw__pv">
<el-tooltip class="item" effect="dark" content="测距" placement="left">
<div class="point" @click="lineTool.open()">
<img src="../assets/images/lineTool.png" class="pointImg">
</div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="测面" placement="left">
<div class="point" @click="polygonTool.open()">
<img src="../assets/images/polygonTool.png" class="pointImg2">
</div>
</el-tooltip>
</div>
</div>
</template>
<script>
export default {
data () {
return {
map: {},//地图
infoWin: '',
lineTool: '',//测距工具
polygonTool: '',//测面工具
};
},
created() {},
methods: {
handleAddPoint(id) {
this.ID = id
pubOne(this.ID).then(res => {
this.pubOneData = res.data
if (this.pubOneData.GEOJSON == null || this.pubOneData.GEOJSON == '') {
this.$message({ type: 'success', message: '定位不到相关位置!', })
this.clearAll();
} else {
this.getLinesFromGeojson(this.pubOneData.GEOJSON,this.pubOneData.name) //服务器返回GEOJSON数据传
}
})
},
/**
* 从GEOJSON获取所有linestring
* @param {*} GEOJSON
* @returns 返回线段数组
*/
getLinesFromGeojson(GEOJSON, name) {
var json = JSON.parse(GEOJSON);
let lines = [];
let _bounds = [];
let points = [];
let geometries = json.geometry.coordinates[0];
for (let i = 0; i < geometries.length; i++) {
lines.push(geometries[i])
}
lines.forEach((coors) => {
let polygon = this.createPolygon(coors, {
fillOpacity: 0.001
});
this.map.addOverLay(polygon);
if (this.infoWin) {
this.map.removeOverLay(this.infoWin);
this.infoWin = null;
}
var html = "<h5>" + name + "</h5>";
this.infoWin = new T.InfoWindow(html, new T.Point([0, 0]));
polygon.openInfoWindow(this.infoWin);
polygon.addEventListener("click", function () {
this.isShowDetails = true
}, this);
//设置中心点
let _Bounds = polygon.getBounds();//拿到对象范围
_bounds = _Bounds.getCenter();//获取中心点
geometries.forEach((lonlat) => {
points.push(new T.LngLat(lonlat[0], lonlat[1]));
})
this.map.setViewport(points); //设置范围
})
this.map.centerAndZoom(new T.LngLat(_bounds.lng, _bounds.lat), 10);
return lines
},
/**
* 创建polygon
* @param {*} points 多边形坐标 二维数组
* @param {*} option
* @returns 返回polygon
*/
createPolygon(coors, option){
let points = [];
coors.forEach((lonlat) => {
points.push(new T.LngLat(lonlat[0], lonlat[1]));
})
this.clearAll();
let polygon = new T.Polygon(points, {
color: "#167FFD", weight: 2, opacity: 1, fillColor: "#167FFD", fillOpacity: 0.5
});
return polygon
},
//清空地图及搜索列表
clearAll() {
this.map.clearOverLays();
this.map.centerAndZoom(new T.LngLat(112.944895, 28.236163), 12);
},
load() {
var T = window.T;
var imageURL = 'http://t0.tianditu.gov.cn/img_c/wmts?tk=你申请的key';
var lay = new T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18 });
var config = { layers: [lay], name: 'TMAP_SATELLITE_MAP' };
this.map = new T.Map('map', config); // 地图实例
var ctrl = new T.Control.MapType();
this.map.addControl(ctrl);
this.map.setMapType(window.TMAP_HYBRID_MAP); // 设置地图位地星混合图层
this.map.centerAndZoom(new T.LngLat(112.944895, 28.236163), 12);
//允许鼠标双击放大地图
this.map.enableScrollWheelZoom();
this.map.enableDrag();
//创建比例尺控件对象 添加比例尺控件
var scale = new T.Control.Scale();
this.map.addControl(scale);
var config = {
showLabel: true,
color: "red", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5
};
//创建标注工具对象
this.lineTool = new T.PolylineTool(this.map, config);
//创建标注工具对象
this.polygonTool = new T.PolygonTool(this.map, config);
this.GetMaps()
},
GetMaps() {
let T = window.T;
//设置显示地图的中心点和级别
this.map.clearOverLays();
this.map.centerAndZoom(new T.LngLat(111.52232, 25.116313), 9);
var icon = new T.Icon({
iconUrl: 'http://api.tianditu.gov.cn/img/map/markerA.png',
iconSize: new T.Point(33, 33),
iconAnchor: new T.Point(10, 25)
});
var latlng = new T.LngLat(21, 22,); // 设置坐标点传入经度纬度
let marker = new T.Marker(latlng, { icon: icon });// 创建标注
},
},
mounted() {
this.load();
}
}
</script>
<style lang='less' scoped>
.Map_conter {
position: relative;
width: 100%;
height: 800px;
overflow: hidden;
z-index: 3;
}
</style>
根据你提供的代码，你使用了天地图API绘制了一个多边形，并希望能够对多边形进行编辑，包括移动顶点坐标和修改外观。
在你的代码中，你创建了一个T.PolygonTool对象，并将其赋值给handler变量。但是，在openPolygonTool函数中，你没有正确使用handler对象来启动多边形的编辑功能。
以下是修改后的代码示例，演示如何启用和禁用多边形的编辑功能：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="keywords" content="天地图"/>
<title>天地图－地图API－范例－画线</title>
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=秘匙"></script>
<style type="text/css">body,html{width:100%;height:100%;margin:0;font-family:"Microsoft YaHei"}#mapDiv{width:100%;height:400px}input,b,p{margin-left:5px;font-size:14px}</style>
<script>
var map;
var zoom = 12;
var polygonTool;
function onLoad() {
//初始化地图对象
map = new T.Map("mapDiv");
//设置显示地图的中心点和级别
map.centerAndZoom(new T.LngLat(116.40969, 39.94940), zoom);
var config = {
showLabel: true,
color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5
};
//创建标注工具对象
polygonTool = new T.PolygonTool(map, config);
}
function openPolygonTool() {
polygonTool.open();
}
function enableEdit() {
polygonTool.enableEdit();
}
function disableEdit() {
polygonTool.disableEdit();
}
</script>
</head>
<body onLoad="onLoad()">
<div id="mapDiv"></div>
<p>本示例演示如何启动和禁止线的编辑功能。</p>
<div>
<input type="button" value="绘制多边形" onclick="openPolygonTool();"/>
<input type="button" value="启动编辑" onclick="enableEdit();">
<input type="button" value="禁止编辑" onclick="disableEdit();"/>
</div>
</body>
</html>
在修改后的代码中，我将handler变量改为polygonTool，并将其作为全局变量。在openPolygonTool函数中，直接调用polygonTool的open方法来启动多边形的绘制功能。在enableEdit和disableEdit函数中，分别调用polygonTool的enableEdit和disableEdit方法来启用和禁用多边形的编辑功能。
请注意，以上代码修改仅供参考，具体的实现方式可能因你使用的地图API版本和配置而有所不同。你可以根据天地图API的文档和示例进行进一步的调整和扩展。希望这能帮助到你！