<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<style>
html, body, #container {
height: 100%;
width: 100%;
font-size: 14px;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
line-height: 1.5;
font-weight: 300;
color: #111213;
}
* {
box-sizing: border-box;
}
.input-item {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 2.2rem;
}
.info {
padding: .75rem 1.25rem;
margin-bottom: 1rem;
border-radius: .25rem;
position: fixed;
top: 1rem;
background-color: white;
width: auto;
min-width: 22rem;
border-width: 0;
left: 1rem;
right: auto;
box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
}
.input-card {
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border-radius: .25rem;
width: 22rem;
border-width: 0;
box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
position: fixed;
bottom: 1rem;
right: 1rem;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 0.75rem 1.25rem;
}
.btn {
width: 6rem;
margin: 0 1rem 0 2rem;
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
background-color: transparent;
background-image: none;
color: #25A5F7;
border-color: #25A5F7;
padding: .25rem .5rem;
line-height: 1.5;
border-radius: 1rem;
-webkit-appearance: button;
cursor: pointer;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
outline: none;
}
.input-text {
width: 4rem;
margin-right: 1rem;
}
</style>
<title>鼠标工具绘制</title>
</head>
<body>
<div id='container'></div>
<div class='info'>
<div>操作说明：圆和矩形通过拖拽来绘制，其他覆盖物通过单击来绘制，双击结束绘制</div>
<div>当前类型：<span id="type"></span></div>
<div>坐标信息：<span id="lnglat"></span></div>
<div id="location">位置信息： <span id="address"></span></div>
</div>
<div class="input-card" style='width: 24rem;'>
<div class="input-item">
<input type="radio" name='func' checked value='marker'><span class="input-text">画点</span>
<input type="radio" name='func' value='polyline'><span class="input-text">画折线</span>
<input type="radio" name='func' value='polygon'><span class="input-text" style='width:5rem;'>画多边形</span>
</div>
<div class="input-item">
<input type="radio" name='func' value='rectangle'><span class="input-text">画矩形</span>
<input type="radio" name='func' value='circle'><span class="input-text">画圆</span>
</div>
<div class="input-item">
<input id="clear" type="button" class="btn" value="清除" />
<input id="confirm" type="button" class="btn" value="确定" />
</div>
</div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=你的key&plugin=AMap.MouseTool&plugin=AMap.PolyEditor"></script>
<script type="text/javascript">
var map = new AMap.Map('container', {
zoom: 13,
center: [110.255414, 20.009835],
});
AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.OverView', 'AMap.MapType'], function () {
map.addControl(new AMap.Scale());
map.addControl(new AMap.MapType({ defaultType: 0 }));
})
var mouseTool = new AMap.MouseTool(map);
var overlays = [];
var result = {
type: "",
data: {
location: { lng: "", lat: "" }, path: [],
bounds: { southwest: { lng: "", lat: "" }, northeast: { lng: "", lat: "" }, },
circle: { center: "", radius: "" }
}
};
mouseTool.on('draw', function (e) {
map.remove(overlays);
overlays = [];
var lnglat = [];
switch (e.obj.getExtData().type) {
case 'marker': {
lnglat.push(e.obj.getPosition().lng);
lnglat.push(e.obj.getPosition().lat);
document.getElementById("type").innerHTML = "marker";
document.getElementById("lnglat").innerHTML = lnglat;
Geocoder(lnglat, e.obj.getExtData().type);
overlays.push(e.obj);
result.type = 'marker';
result.data.location.lng = e.obj.getPosition().lng;
result.data.location.lat = e.obj.getPosition().lat;
break;
};
case 'polyline': {
var data = e.obj.getPath();
for (var i = 0; i < data.length; i++) {
var tmp = [];
tmp.push(data[i].lng);
tmp.push(data[i].lat);
lnglat.push(tmp);
result.data.path.push(tmp);
}
result.type = 'polyline';
document.getElementById("type").innerHTML = "polyline";
document.getElementById("lnglat").innerHTML = lnglat;
mouseTool.close(true);
var polyline = new AMap.Polyline({
path: data,
isOutline: true,
outlineColor: '#ffeeff',
borderWeight: 3,
strokeColor: "#3366FF",
strokeOpacity: 1,
strokeWeight: 6,
strokeStyle: "solid",
strokeDasharray: [10, 5],
lineJoin: 'round',
lineCap: 'round',
zIndex: 50,
extData: { type: 'polyline' },
})
overlays.push(polyline);
polyline.setMap(map);
AMap.plugin(["AMap.PolyEditor"], function () {
var PolylineEditor = new AMap.PolyEditor(map, polyline);
overlays.push(PolylineEditor);
PolylineEditor.open();
PolylineEditor.on('addnode', function (event) {
updateData(event);
})
PolylineEditor.on('adjust', function (event) {
updateData(event);
})
PolylineEditor.on('removenode', function (event) {
updateData(event);
})
})
break;
};
case 'polygon': {
var data = e.obj.getPath();
for (var i = 0; i < data.length; i++) {
var tmp = [];
tmp.push(data[i].lng);
tmp.push(data[i].lat);
lnglat.push(tmp);
result.data.path.push(tmp);
}
result.type = 'polygon';
document.getElementById("type").innerHTML = "polygon";
document.getElementById("lnglat").innerHTML = lnglat;
mouseTool.close(true);
var polygon = new AMap.Polygon({
path: data,
isOutline: true,
outlineColor: '#ffeeff',
borderWeight: 3,
strokeColor: "#3366FF",
strokeOpacity: 1,
strokeWeight: 6,
strokeStyle: "solid",
strokeDasharray: [10, 5],
lineJoin: 'round',
lineCap: 'round',
zIndex: 50,
extData: { type: 'polygon' },
})
overlays.push(polygon);
polygon.setMap(map);
AMap.plugin(["AMap.PolyEditor"], function () {
var PolygonEditor = new AMap.PolyEditor(map, polygon);
overlays.push(PolygonEditor);
PolygonEditor.open();
PolygonEditor.on('addnode', function (event) {
updateData(event);
})
PolygonEditor.on('adjust', function (event) {
updateData(event);
})
PolygonEditor.on('removenode', function (event) {
updateData(event);
})
})
break;
};
case 'rectangle': {
var data = e.obj.getBounds();
var southwestlng = data.southwest.lng;
var southwestlat = data.southwest.lat;
var northeastlng = data.northeast.lng;
var northeastlat = data.northeast.lat;
document.getElementById("type").innerHTML = "rectangle";
document.getElementById("lnglat").innerHTML = "southwest:[" + southwestlng + "," + southwestlat + "],northeast:[" + northeastlng + "," + northeastlat + "]";
result.type = 'polygon';
result.data.bounds.southwest.lng = southwestlng;
result.data.bounds.southwest.lat = southwestlat;
result.data.bounds.northeast.lng = northeastlng;
result.data.bounds.northeast.lat = northeastlat;
mouseTool.close(true);
var rectangle = new AMap.Rectangle({
bounds: data,
strokeColor: 'red',
strokeWeight: 6,
strokeOpacity: 0.5,
strokeDasharray: [30, 10],
strokeStyle: 'dashed',
fillColor: 'blue',
fillOpacity: 0.5,
cursor: 'pointer',
zIndex: 50,
extData: { type: 'rectangle' },
})
overlays.push(rectangle);
rectangle.setMap(map);
AMap.plugin(["AMap.RectangleEditor"], function () {
var RectangleEditor = new AMap.RectangleEditor(map, rectangle);
overlays.push(RectangleEditor);
RectangleEditor.open();
RectangleEditor.on('adjust', function (event) {
updateData(event);
})
})
break;
};
case 'circle': {
var radius = e.obj.getRadius();
var center = e.obj.getCenter();
document.getElementById("type").innerHTML = "circle";
document.getElementById("lnglat").innerHTML = "圆心：" + center + "半径：" + radius;
result.type = 'circle';
result.data.circle.center = center;
result.data.circle.radius = radius;
mouseTool.close(true);
var circle = new AMap.Circle({
center: center,
radius: radius,
strokeColor: "#F33",
strokeOpacity: 1,
strokeWeight: 3,
fillColor: "ee2200",
fillOpacity: 0.35,
extData: { type: 'circle' },
});
overlays.push(circle);
circle.setMap(map);
AMap.plugin(["AMap.CircleEditor"], function () {
var CircleEditor = new AMap.CircleEditor(map, circle);
overlays.push(CircleEditor);
CircleEditor.open();
CircleEditor.on('move', function (event) {
updateData(event);
})
CircleEditor.on('adjust', function (event) {
updateData(event);
})
});
break;
};
}
})
function draw(type) {
if (overlays.length > 0) {
if (overlays[0].getExtData().type != 'marker') {
overlays[1].close();
}
map.remove(overlays[0]);
overlays = [];
}
document.getElementById("type").innerHTML = "";
document.getElementById("lnglat").innerHTML = "";
document.getElementById("address").innerHTML = "";
if (type == 'marker')
document.getElementById("location").style.display = "";
else
document.getElementById("location").style.display = "none";
switch (type) {
case 'marker': {
mouseTool.marker({
extData: { type: 'marker' },
});
break;
}
case 'polyline': {
mouseTool.polyline({
strokeColor: '#80d8ff',
strokeWeight: 6,
extData: { type: 'polyline' },
});
break;
}
case 'polygon': {
mouseTool.polygon({
fillColor: '#00b0ff',
strokeColor: '#80d8ff',
extData: { type: 'polygon' }
});
break;
}
case 'rectangle': {
mouseTool.rectangle({
fillColor: '#00b0ff',
strokeColor: '#80d8ff',
extData: { type: 'rectangle' }
});
break;
}
case 'circle': {
mouseTool.circle({
fillColor: '#00b0ff',
strokeColor: '#80d8ff',
extData: { type: 'circle' }
});
break;
}
}
}
var radios = document.getElementsByName('func');
for (var i = 0; i < radios.length; i++) {
radios[i].onchange = function (e) {
draw(e.target.value)
}
}
draw('marker');
function Geocoder(lnglat, type) {
AMap.plugin('AMap.Geocoder', function () {
var geocoder = new AMap.Geocoder({
radius: 1000,
extensions: "all"
})
geocoder.getAddress(lnglat, function (status, result) {
if (status === 'complete' && result.info === 'OK') {
document.getElementById("address").innerHTML = result.regeocode.formattedAddress;
}
})
})
}
function updateData(event) {
var data;
if (overlays[0].getExtData().type == "polyline" || overlays[0].getExtData().type == "polygon") {
data = overlays[0].getPath();
var lnglat = [];
for (var i = 0; i < data.length; i++) {
var tmp = [];
tmp.push(data[i].lng);
tmp.push(data[i].lat);
lnglat.push(tmp);
}
document.getElementById("type").innerHTML = "polygon";
document.getElementById("lnglat").innerHTML = lnglat;
} else if (overlays[0].getExtData().type == "rectangle") {
data = overlays[0].getBounds();
document.getElementById("lnglat").innerHTML = "southwest:[" + data.southwest.lng + "," + data.southwest.lat
+ "],northeast:[" + data.northeast.lng + "," + data.northeast.lat + "]";
} else if (overlays[0].getExtData().type == "circle") {
document.getElementById("lnglat").innerHTML = "圆心：" + overlays[0].getCenter() + "半径：" + overlays[0].getRadius();
}
}
document.getElementById('clear').onclick = function () {
if (overlays.length > 0) {
if (overlays[0].getExtData().type != 'marker') {
overlays[1].close();
}
map.remove(overlays[0]);
draw(overlays[0].getExtData().type);
}
overlays = [];
}
document.getElementById('confirm').onclick = function () {
alert(JSON.stringify(result));
console.log(JSON.stringify(result));
}
</script>
</body>
</html>
|
