<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
<title>地图多边形</title>
|
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />
|
<link href="../css/public.css" rel="stylesheet" />
|
<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
|
<script src="http://webapi.amap.com/maps?v=1.4.0&key=3627ed9deaac2622e26a7169f0c36b1b&plugin=AMap.Geocoder,AMap.Autocomplete,AMap.PlaceSearch,AMap.PolyEditor"></script>
|
<script src="../js/jquery-2.1.1.min.js"></script>
|
<script src="../js/public.js?v=55"></script>
|
<script src="../js/tools.js"></script>
|
</head>
|
<body>
|
|
<div id="container"></div>
|
<div class="search-box" id="search_box" style="display: block;">
|
<input class="search-text" id="search_text" type="text" placeholder="请输入详细地址" onkeypress="keySearchAddress()" />
|
<input class="search-button" id="search_button" type="button" onclick="searchAddress()" />
|
</div>
|
|
<div class=" info-box" id="info_box">
|
信息提示
|
<hr>
|
<div id="info_text">
|
</div>
|
</div>
|
|
<div class="button-group draw-button-group" id="edit_draw_box" style=" display:none;">
|
<input id="btnEditFinish" class="button draw-button" onclick="finishEditDraw()" type="button" value="完成" />
|
<input id="btnEditCancel" class="button draw-button" onclick="cancelEditDraw()" type="button" value="取消" />
|
</div>
|
|
<div class="button-group draw-button-group" id="draw_polygon_box" style="display: none;">
|
<input id="btnDrawFinish" class="button draw-button" onclick="finishDraw()" type="button" value="完成" />
|
<input id="btnDrawBack" class="button draw-button" onclick="backDraw()" type="button" value="后退" />
|
<input id="btnDrawRedraw" class="button draw-button" onclick="redraw()" type="button" value="重绘" />
|
<input id="btnDrawCancel" class="button draw-button" onclick="cancelDraw()" type="button" value="取消" />
|
</div>
|
|
<div class="draw-button-group button-group" id="draw_marker_box" style=" display:none;">
|
<input id="btnDrawMarkerFinish" class="draw-button button" onclick="finishDrawMarker()" type="button" value="完成" />
|
<input id="btnDrawMarkerCancel" class="draw-button button" onclick="cancelDrawMarker()" type="button" value="取消" />
|
</div>
|
|
<script>
|
|
let map;//地图对象 使用 ToolBar时，地图对象需要定义位map 否则会报错
|
let _map;//地图对象
|
let _status = map_status.Normal;//地图状态
|
let _paras = {
|
//参数
|
PolygonDefaultParas:
|
{
|
//区域默认的样式
|
BorderColor: "#3366ff",
|
BorderWidth: 3,
|
BorderOpacity: 1,
|
BackgroundColor: "#e57505",
|
BackgroundOpacity: 0.5
|
|
},
|
PolygonSelectedParas:
|
{
|
//区域选中的样式
|
BorderColor: "#e57505",
|
BorderWidth: 6,
|
BorderOpacity: 1,
|
BackgroundColor: "#e57505",
|
BackgroundOpacity: 0.5
|
},
|
LineTempParas:
|
{
|
//线选中的样式
|
Width: 6,
|
Opacity: 1,
|
Color: "#e57505"
|
},
|
LineDefaultParas:
|
{
|
//线默认的样式
|
Width: 3,
|
Opacity: 1,
|
Color: "#3366ff"
|
},
|
LevelParas: {
|
HideSignUpperLimit: 13
|
}
|
|
}; //地图覆盖物样式对象
|
let _polygon;//多边形
|
let _polygon_overlay;//多边形覆盖物
|
let _draw_intake;//绘制的取水点
|
let _draw_intake_overlay;//绘制的取水点覆盖物
|
|
|
//页面加载(lxj)
|
$(document).ready(function () {
|
|
try {
|
map = _map = new AMap.Map('container', {
|
resizeEnable: true,
|
expandZoomRange: true,
|
zoom: 16,
|
zooms: [3, 20]
|
});
|
|
_map.on("complete", function () {//地图加载完成
|
callbackObj.loadCompleted();
|
});
|
|
_map.on("click", function () {
|
if ($("#search_text").css("display") == 'block') {
|
$("#search_text").hide();
|
}
|
});
|
}
|
catch (e) {
|
callbackObj.loadFailed();
|
}
|
});
|
|
//加载参数
|
function loadParas(paras) {
|
if (isEmpty(paras)) {
|
return false;
|
}
|
_paras = paras;
|
return true;
|
}
|
|
//加载多边形
|
function loadPolygonExIntake(polygon) {
|
if (isEmpty(polygon)) {
|
return false;
|
}
|
_map.clearMap();
|
_polygon = polygon;
|
let path = _polygon.Points.map(function (x) { return [x.X, x.Y]; });
|
_polygon_overlay = new AMap.Polygon({
|
path: path,//设置多边形边界路径
|
strokeColor: _polygon.BorderColor, //线颜色
|
strokeOpacity: _polygon.BorderOpacity, //线透明度
|
strokeWeight: _polygon.BorderWidth, //线宽
|
fillColor: _polygon.BackgroundColor, //填充色
|
fillOpacity: _polygon.BackgroundOpacity //填充透明度
|
});
|
_polygon_overlay.setMap(_map);
|
|
if (_polygon.IntakePoints) {
|
if (_polygon.IntakePoints.length > 0) {
|
_polygon_overlay.intake = [];
|
_polygon.IntakePoints.forEach(function (x) {
|
|
let lnglat = [x.Point.X, x.Point.Y];
|
let marker = new AMap.Marker({
|
position: lnglat,
|
icon: new AMap.Icon({
|
size: new AMap.Size(32, 32), //图标大小
|
image: "../img/weizhi.png",
|
imageOffset: new AMap.Pixel(0, 0)
|
}),
|
offset: new AMap.Pixel(-15, -21)
|
});
|
|
// 设置鼠标划过点标记显示的文字提示
|
marker.setTitle(x.Name);
|
marker.objInfo = x;
|
|
// 设置label标签
|
// label默认蓝框白底左上角显示，样式className为：amap-marker-label
|
marker.setLabel({
|
offset: new AMap.Pixel(10, 10), //设置文本标注偏移量
|
content: "<div class='info'>" + x.Name + "</div>", //设置文本标注内容
|
direction: 'right' //设置文本标注方位
|
});
|
marker.setMap(_map);
|
_polygon_overlay.intake.push(marker);
|
});
|
}
|
}
|
|
_map.setFitView();
|
return true;
|
}
|
|
//开始绘制
|
function startDraw() {
|
if (_status != map_status.Normal) {
|
return false;
|
}
|
if (_polygon) {
|
return false;
|
}
|
_polygon_overlay = { Path: [], Markers: [], PolyLines: [] };
|
_map.on("click", onMapDrawClick);
|
$("#draw_polygon_box").show();
|
_status = map_status.Draw;
|
setInfoText();
|
judgeDrawButtons();
|
return true;
|
}
|
|
//重绘
|
function restartDraw() {
|
if (_status != map_status.Normal) {
|
return false;
|
}
|
if (!_polygon) {
|
return false;
|
}
|
if (!_polygon_overlay) {
|
return false;
|
}
|
_map.clearMap();
|
_polygon_overlay = { Path: [], Markers: [], PolyLines: [] };
|
_map.on("click", onMapDrawClick);
|
$("#draw_polygon_box").show();
|
_status = map_status.Draw;
|
setInfoText();
|
judgeDrawButtons();
|
return true;
|
}
|
|
//地图点击绘制多边形事件
|
function onMapDrawClick(e) {
|
if (_status != map_status.Draw) {
|
return;
|
}
|
if (!_polygon_overlay) {
|
return;
|
}
|
let position = [e.lnglat.getLng(), e.lnglat.getLat()];
|
_polygon_overlay.Path.push(position);
|
|
let marker = new AMap.Marker({
|
position: position,
|
icon: new AMap.Icon({
|
size: new AMap.Size(32, 32), //图标大小
|
image: "../img/weizhi.png",
|
imageOffset: new AMap.Pixel(-6, 12)
|
})
|
});
|
_polygon_overlay.Markers.push(marker);
|
marker.setMap(_map);
|
|
if (_polygon_overlay.Path.length > 1) {
|
let polyline = new AMap.Polyline({
|
path: [_polygon_overlay.Path[_polygon_overlay.Path.length - 2], _polygon_overlay.Path[_polygon_overlay.Path.length - 1]], //设置线覆盖物路径
|
strokeColor: _paras.LineTempParas.Color, //线颜色
|
strokeOpacity: _paras.LineTempParas.Opacity, //线透明度
|
strokeWeight: _paras.LineTempParas.Width, //线宽
|
strokeStyle: "solid", //线样式
|
strokeDasharray: [10, 5] //补充线样式
|
});
|
_polygon_overlay.PolyLines.push(polyline);
|
polyline.setMap(_map);
|
}
|
|
judgeDrawButtons();
|
}
|
|
//结束绘制
|
function finishDraw() {
|
if (_status != map_status.Draw) {
|
return;
|
}
|
if (!_polygon_overlay) {
|
return;
|
}
|
if (_polygon_overlay.Path.length < 3) {
|
return;
|
}
|
_map.off("click", onMapDrawClick);
|
|
if (!_polygon) {
|
_polygon = {};
|
_polygon.BorderColor = _paras.PolygonDefaultParas.BorderColor;
|
_polygon.BorderOpacity = _paras.PolygonDefaultParas.BorderOpacity;
|
_polygon.BorderWidth = _paras.PolygonDefaultParas.BorderWidth;
|
_polygon.BackgroundColor = _paras.PolygonDefaultParas.BackgroundColor;
|
_polygon.BackgroundOpacity = _paras.PolygonDefaultParas.BackgroundOpacity;
|
}
|
_polygon.Points = _polygon_overlay.Path.map(function (x) { return { X: x[0], Y: x[1] } });
|
loadPolygonExIntake(_polygon);
|
_polygon.Area = _polygon_overlay.getArea();
|
|
_status = map_status.Normal;
|
$("#draw_polygon_box").hide();
|
setInfoText();
|
callbackObj.set(JSON.stringify(_polygon));
|
}
|
|
//后退绘制
|
function backDraw() {
|
if (_status != map_status.Draw) {
|
return;
|
}
|
if (!_polygon_overlay) {
|
return;
|
}
|
if (_polygon_overlay.Path.length < 1) {
|
return;
|
}
|
_polygon_overlay.Path.splice(_polygon_overlay.Path.length - 1, 1);
|
if (_polygon_overlay.Markers.length > 0) {
|
let marker = _polygon_overlay.Markers[_polygon_overlay.Markers.length - 1];
|
_polygon_overlay.Markers.splice(_polygon_overlay.Markers.length - 1, 1);
|
_map.remove(marker);
|
}
|
|
if (_polygon_overlay.PolyLines.length > 0) {
|
let polyline = _polygon_overlay.PolyLines[_polygon_overlay.PolyLines.length - 1];
|
_polygon_overlay.PolyLines.splice(_polygon_overlay.PolyLines.length - 1, 1);
|
_map.remove(polyline);
|
}
|
judgeDrawButtons();
|
}
|
|
//重绘
|
function redraw() {
|
if (_status != map_status.Draw) {
|
return;
|
}
|
if (!_polygon_overlay) {
|
return;
|
}
|
_map.clearMap();
|
_polygon_overlay = { Path: [], Markers: [], PolyLines: [] };
|
judgeDrawButtons();
|
}
|
|
//取消绘制
|
function cancelDraw() {
|
if (_status != map_status.Draw) {
|
return;
|
}
|
if (!_polygon_overlay) {
|
return;
|
}
|
_map.off("click", onMapDrawClick);
|
|
_map.clearMap();
|
_polygon_overlay = null;
|
if (_polygon) {
|
loadPolygonExIntake(_polygon);
|
}
|
_status = map_status.Normal;
|
$("#draw_polygon_box").hide();
|
setInfoText();
|
callbackObj.cancelDraw();
|
}
|
|
//判断绘制按钮
|
function judgeDrawButtons() {
|
if (_status != map_status.Draw) {
|
return;
|
}
|
if (!_polygon_overlay) {
|
return;
|
}
|
|
//完成
|
if (_polygon_overlay.Path.length < 3) {
|
$("#btnDrawFinish").attr("disabled", true);
|
}
|
else {
|
$("#btnDrawFinish").attr("disabled", false);
|
}
|
//后退
|
if (_polygon_overlay.Path.length > 0) {
|
$("#btnDrawBack").attr("disabled", false);
|
}
|
else {
|
$("#btnDrawBack").attr("disabled", true);
|
}
|
//重绘
|
if (_polygon_overlay.Path.length > 0) {
|
$("#btnDrawRedraw").attr("disabled", false);
|
}
|
else {
|
$("#btnDrawRedraw").attr("disabled", true);
|
}
|
//取消
|
$("#btnDrawCancel").attr("disabled", false);
|
}
|
|
//开始编辑
|
function startEditDraw() {
|
if (_status != map_status.Normal) {
|
return false;
|
}
|
if (!_polygon) {
|
return false;
|
}
|
if (!_polygon_overlay) {
|
return false;
|
}
|
|
if (!_polygon_overlay.polyEditor) {
|
_polygon_overlay.polyEditor = new AMap.PolyEditor(_map, _polygon_overlay)
|
}
|
_polygon_overlay.polyEditor.open();
|
|
_status = map_status.Edit;
|
$("#edit_draw_box").show();
|
setInfoText();
|
return true;
|
}
|
|
//结束编辑
|
function finishEditDraw() {
|
if (_status != map_status.Edit) {
|
return;
|
}
|
if (!_polygon) {
|
return;
|
}
|
if (!_polygon_overlay) {
|
return;
|
}
|
if (_polygon_overlay.polyEditor) {
|
_polygon_overlay.polyEditor.close();
|
}
|
let path = _polygon_overlay.getPath();
|
_polygon.Points = path.map(function (x) { return { X: x.getLng(), Y: x.getLat() }; });
|
_polygon.Area = _polygon_overlay.getArea();
|
|
_status = map_status.Normal;
|
$("#edit_draw_box").hide();
|
setInfoText();
|
callbackObj.set(JSON.stringify(_polygon));
|
}
|
|
//取消编辑
|
function cancelEditDraw() {
|
if (_status != map_status.Edit) {
|
return;
|
}
|
if (!_polygon) {
|
return;
|
}
|
if (!_polygon_overlay) {
|
return;
|
}
|
if (_polygon_overlay.polyEditor) {
|
_polygon_overlay.polyEditor.close();
|
}
|
let path = _polygon.Points.map(function (x) { return [x.X, x.Y]; });
|
_polygon_overlay.setPath(path);
|
|
_status = map_status.Normal;
|
$("#edit_draw_box").hide();
|
setInfoText();
|
callbackObj.cancelEditDraw();
|
}
|
|
//设置提示信息
|
function setInfoText() {
|
let info1 = "当前状态：";
|
let info2 = "";
|
if (_status == map_status.Normal) {
|
info2 = "正常";
|
}
|
else if (_status == map_status.Draw) {
|
info2 = "绘制";
|
}
|
else {
|
info2 = "编辑";
|
}
|
|
let info = info1 + info2;
|
document.querySelector("#info_text").innerText = info;
|
}
|
|
//设置信息提示面板的可见性
|
function setInfoPanelVisibility() {
|
document.getElementById('info_box').hidden = !document.getElementById('info_box').hidden;
|
}
|
|
//根据详细地址查看地图
|
function locateByAddress(address) {
|
let geocoder = new AMap.Geocoder({});
|
//地理编码,返回地理编码结果
|
geocoder.getLocation(address, function (status, result) {
|
if (status === 'complete' && result.info === 'OK') {
|
let geocode = result.geocodes;
|
_map.setCenter([geocode[0].location.getLng(), geocode[0].location.getLat()]);
|
let marker = new AMap.Marker({ position: [geocode[0].location.getLng(), geocode[0].location.getLat()] });
|
_map.setFitView(marker);
|
}
|
else {
|
let error = { ErrorType: error_type.locate_address, Message: "根据详细地址定位地图失败" };
|
callbackObj.handingError(JSON.stringify(error));
|
}
|
});
|
}
|
|
//搜索地址
|
function searchAddress() {
|
if ($("#search_text").css("display") == 'block') {
|
let address = $("#search_text").val();
|
if (!isEmpty(address)) {
|
locateByAddress(address);
|
}
|
$("#search_text").hide();
|
}
|
else {
|
$("#search_text").show();
|
}
|
}
|
|
//enter搜索地址
|
function keySearchAddress() {
|
if (event.keyCode == 13) {
|
searchAddress();
|
}
|
}
|
|
//开始绘制取水点
|
function startDrawIntakePoint(name) {
|
if (_status != map_status.Normal) {
|
return false;
|
}
|
if (isEmpty(name)) {
|
return false;
|
}
|
if (!_polygon) {
|
return false;
|
}
|
if (!_polygon_overlay) {
|
return false;
|
}
|
if (_draw_intake) {
|
return false;
|
}
|
if (_draw_intake_overlay) {
|
return false;
|
}
|
|
_draw_intake = {};
|
_draw_intake.Name = name;
|
|
_polygon_overlay.on("click", onPolygonDrawIntakePointClick, true);
|
_status = map_status.Draw;
|
$("#draw_marker_box").show();
|
judgeDrawMarkerButtons
|
setInfoText();
|
return true;
|
}
|
|
//点击绘制多边形取水点
|
function onPolygonDrawIntakePointClick(e) {
|
if (_status != map_status.Draw) {
|
return;
|
}
|
if (!_polygon) {
|
return;
|
}
|
if (!_polygon_overlay) {
|
return;
|
}
|
if (!_draw_intake) {
|
return;
|
}
|
if (_draw_intake_overlay) {
|
return;
|
}
|
_polygon_overlay.off("click", onPolygonDrawIntakePointClick);
|
|
let lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
|
_draw_intake.Point = { X: lnglat[0], Y: lnglat[1] };
|
|
_draw_intake_overlay = new AMap.Marker(
|
{
|
position: lnglat,
|
icon: new AMap.Icon({
|
size: new AMap.Size(32, 32),
|
image: "../img/weizhi.png",
|
imageOffset: new AMap.Pixel(0, 0)
|
}),
|
offset: new AMap.Pixel(-15, -21)
|
});
|
// 设置鼠标划过点标记显示的文字提示
|
_draw_intake_overlay.setTitle(_draw_intake.Name);
|
|
// 设置label标签
|
// label默认蓝框白底左上角显示，样式className为：amap-marker-label
|
_draw_intake_overlay.setLabel({
|
offset: new AMap.Pixel(5, 5), //设置文本标注偏移量
|
content: "<div class='info'>" + _draw_intake.Name + "</div>", //设置文本标注内容
|
direction: 'right' //设置文本标注方位
|
});
|
|
_draw_intake_overlay.setMap(_map);
|
_draw_intake_overlay.setDraggable(true);
|
judgeDrawMarkerButtons();
|
}
|
|
//判断绘制按钮
|
function judgeDrawMarkerButtons() {
|
if (_status != map_status.Draw) {
|
return;
|
}
|
|
//完成
|
if (_draw_intake_overlay) {
|
$("#btnDrawMarkerFinish").attr("disabled", false);
|
}
|
else {
|
$("#btnDrawMarkerFinish").attr("disabled", true);
|
}
|
//取消
|
$("#btnDrawMarkerCancel").attr("disabled", false);
|
}
|
|
//结束绘制取水点
|
function finishDrawMarker() {
|
if (_status != map_status.Draw) {
|
return;
|
}
|
if (!_polygon) {
|
return;
|
}
|
if (!_polygon_overlay) {
|
return;
|
}
|
if (!_draw_intake) {
|
return;
|
}
|
if (!_draw_intake_overlay) {
|
return;
|
}
|
_draw_intake_overlay.setDraggable(false);
|
_draw_intake_overlay.objInfo = _draw_intake;
|
let position = _draw_intake_overlay.getPosition();
|
let lnglat = [position.getLng(), position.getLat()];
|
_draw_intake.Point = { X: position.getLng(), Y: position.getLat() };
|
|
if (isEmpty(_polygon.IntakePoints)) {
|
_polygon.IntakePoints = [];
|
}
|
_polygon.IntakePoints.push(_draw_intake);
|
if (isEmpty(_polygon_overlay.intake)) {
|
_polygon_overlay.intake = [];
|
}
|
_polygon_overlay.intake.push(_draw_intake_overlay);
|
|
let geocoder = new AMap.Geocoder({});
|
geocoder.getAddress(lnglat, function (status, result) {
|
if (status === 'complete' && result.info === 'OK') {
|
let address = result.regeocode.formattedAddress;
|
_draw_intake.Address = address;
|
}
|
|
_draw_intake = null;
|
_draw_intake_overlay = null;
|
_status = map_status.Normal;
|
$("#draw_marker_box").hide();
|
setInfoText();
|
callbackObj.set(JSON.stringify(_polygon));
|
});
|
}
|
|
//取消绘制取水点
|
function cancelDrawMarker() {
|
if (_status != map_status.Draw) {
|
return;
|
}
|
if (!_polygon) {
|
return;
|
}
|
if (!_polygon_overlay) {
|
return;
|
}
|
if (!_draw_intake) {
|
return;
|
}
|
|
if (_draw_intake_overlay) {
|
_map.remove(_draw_intake_overlay);
|
}
|
|
_draw_intake = null;
|
_draw_intake_overlay = null;
|
_status = map_status.Normal;
|
$("#draw_marker_box").hide();
|
setInfoText();
|
callbackObj.cancelDraw();
|
}
|
|
</script>
|
</body>
|
</html>
|
