使用鼠标对地图上已经有的图元,进行修改,点图元可以进行移动,线、面图元可以拖动原有坐标节点,增加新的节点,并对节点进行拖动
效果如下:
代码:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>地图图元编辑</title>
<link rel="stylesheet" href="plugin/ol3/css/ol.css" type="text/css" />
<style type="text/css">
body, #div_gis {
border: 0px;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
font-size: 13px;
}
</style>
<script type="text/javascript" src="plugin/ol3/build/ol-debug.js"></script>
<script type="text/javascript" src="js/Config.js"></script>
<script type="text/javascript" src="js/PrivateFunction.js"></script>
</head>
<body>
<div id="div_gis">
</div>
</body>
</html>
<script type="text/javascript">
LoadTiandituTileMap(0, ‘div_gis‘, 1, 11, 8, 103.964571, 30.245677);
CreateVectorLayer();
AddEditItem();
SetMapEditState();
function AddEditItem()
{
var pointStyle = CreatePointStyle(‘#aa3300‘, ‘10‘, ‘red‘, ‘2‘,‘‘, ‘center‘, ‘middle‘, ‘Arial‘, ‘14‘, ‘normal‘, ‘blue‘, ‘#ffffff‘, ‘2‘, ‘0‘, ‘0‘, ‘0‘);
AddPointToLayer(tempDrawSoure, ‘1‘, 103.964571, 30.245677, pointStyle);
var linestyle = CreateLineStyle(‘green‘, ‘2‘, ‘‘, ‘center‘, ‘middle‘, ‘Arial‘, ‘14‘, ‘normal‘, ‘blue‘, ‘#ffffff‘, ‘2‘, ‘0‘);
AddLineToLayer(tempDrawSoure, ‘2‘, 104.65434, 30.76453, 105.233415, 32.33456225, linestyle);
var polystyle = CreatePolyStyle(‘rgba(255, 255, 255, 0.5)‘, ‘#ffcc33‘, ‘2‘, ‘‘, ‘center‘, ‘middle‘, ‘Arial‘, ‘14‘, ‘normal‘, ‘blue‘, ‘#ffffff‘, ‘2‘);
var polyPointarr = [[
[103.800883, 30.69275],
[104.076575, 30.510007],
[104.122967, 30.652833],
[103.929917, 30.698417],
[103.910783, 30.71455]]];
AddPolyToLayer(tempDrawSoure, ‘3‘, polyPointarr, polystyle);
}
</script>