<!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=2.0&key=3627ed9deaac2622e26a7169f0c36b1b&plugin=AMap.Geocoder"></script>
|
<script src="../js/jquery-2.1.1.min.js"></script>
|
<script src="../js/public.js"></script>
|
<script src="../js/tools.js"></script>
|
<script src="../js/base64.js"></script>
|
</head>
|
|
<body>
|
<div id="container"></div>
|
|
<div class="search-box" id="search_box">
|
<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="btnEditDrawFinish" class="button draw-button" onclick="finishEditDraw()" type="button" value="完成" />
|
<input id="btnEditDrawCancel" class="button draw-button" onclick="cancelEditDraw()" 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>
|
|
<div id='location_box' class="location-box" title="定位" style="display: none;" onclick="backLocateMarker()"></div>
|
|
<script>
|
|
let map;//地图对象 使用 ToolBar时，地图对象需要定义为map 否则会报错
|
let _map;//地图对象
|
let _layer;//图层对象
|
let _status = map_status.Normal;//状态
|
let _locateMarker;//定位覆盖物点
|
let _allSignObjs = [];//所有标记对象
|
let _selectedOverlay;//选择的覆盖物
|
let _drawSignObj;//绘制的标记对象
|
let _drawOverlay;//绘制的覆盖物
|
let _editDrawOverlay ;//编辑绘制的覆盖物
|
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"
|
}
|
};//参数
|
|
|
$(document).ready(function () {
|
|
try {
|
map = _map = new AMap.Map('container', {
|
resizeEnable: true,
|
expandZoomRange: true,
|
zoom: 10,
|
zooms: [3, 20]
|
});
|
|
//缩放停止时触发
|
_map.on("zoomend", function () {
|
setTimeOutBoundsChanged(100);
|
});
|
|
//停止拖拽地图停止时触发
|
_map.on("dragend", function () {
|
setTimeOutBoundsChanged(100);
|
});
|
|
//地图移动后触发
|
_map.on("moveend", function () {
|
setTimeOutBoundsChanged(100);
|
});
|
|
//地图容器尺寸改变后触发
|
_map.on("resize", function () {
|
setTimeOutBoundsChanged(200);
|
});
|
|
|
//地图点击事件
|
_map.on('click', function (e) {
|
cancelSelectSignObj();
|
});
|
|
//地图点击时关闭搜索面板
|
_map.on("click", function () {
|
if ($("#search_text").css("display") == 'block') {
|
$("#search_text").hide();
|
}
|
});
|
|
//地图加载完成
|
_map.on("complete", function () {
|
|
//图层
|
_layer = new AMap.LabelsLayer({
|
zooms: [3, 20],
|
zIndex: 1000,
|
// 该层内标注是否避让
|
collision: false,
|
});
|
_map.add(_layer);
|
|
callbackObj.loadCompleted();
|
});
|
|
}
|
catch (e) {
|
callbackObj.loadFailed();
|
}
|
})
|
|
//加载参数
|
function loadParas(paras) {
|
if (isEmpty(paras)) {
|
return false;
|
}
|
_paras = paras;
|
return true;
|
}
|
|
//设置消火栓
|
function setSignObjs(signObjs) {
|
if (_status != map_status.Normal) {
|
return false;
|
}
|
if (isEmpty(signObjs)) {
|
_allSignObjs = [];
|
}
|
else {
|
_allSignObjs = signObjs;
|
}
|
|
//标记标识列表
|
let signIds = _allSignObjs.map(function (x) { return x.SignId; });
|
|
//覆盖物列表
|
let overlays = _layer.getAllOverlays();
|
|
//移除不在标记列表中的覆盖物
|
let overlays_remove = overlays.filter(function (x) { return signIds.indexOf(x.objInfo.SignId) < 0; });
|
_layer.remove(overlays_remove);
|
|
//更新已有覆盖物
|
let overlays_exist = overlays.filter(function (x) { return signIds.indexOf(x.objInfo.SignId) > -1; });
|
if (overlays_exist.length > 0) {
|
overlays_exist.forEach(function (x) {
|
let signObj = _allSignObjs.find(function (t) { return t.SignId == x.objInfo.SignId; });
|
if (signObj.SignName != x.objInfo.SignName) {
|
let text = {
|
// 要展示的文字内容
|
content: signObj.SignName,
|
// 文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置
|
direction: 'right',
|
// 在 direction 基础上的偏移量
|
offset: [0, 0],
|
// 文字样式
|
style: {
|
// 字体大小
|
fontSize: 12,
|
// 字体颜色
|
fillColor: '#22886f',
|
// 描边颜色
|
strokeColor: '#fff',
|
// 描边宽度
|
strokeWidth: 2,
|
}
|
};
|
x.setText(text);
|
}
|
x.objInfo = signObj;
|
});
|
}
|
|
//添加覆盖物
|
let signIds_overlay = overlays_exist.map(function (x) { return x.objInfo.SignId; });
|
let signObjs_new = _allSignObjs.filter(function (x) { return signIds_overlay.indexOf(x.SignId) < 0; });
|
if (signObjs_new.length > 0) {
|
let icon = {
|
// 图标类型，现阶段只支持 image 类型
|
type: 'image',
|
// 图片 url
|
image: sign_type_base64.FireHydrant,
|
// 图片尺寸
|
size: [32, 32],
|
// 图片相对 position 的锚点，默认为 bottom-center
|
anchor: 'bottom-center',
|
};
|
let markers = signObjs_new.map(function (x) {
|
let text = {
|
// 要展示的文字内容
|
content: x.SignName,
|
// 文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置
|
direction: 'right',
|
// 在 direction 基础上的偏移量
|
offset: [0, 0],
|
// 文字样式
|
style: {
|
// 字体大小
|
fontSize: 12,
|
// 字体颜色
|
fillColor: '#22886f',
|
// 描边颜色
|
strokeColor: '#fff',
|
// 描边宽度
|
strokeWidth: 2,
|
}
|
};
|
let marker = new AMap.LabelMarker({
|
position: [x.Point.X, x.Point.Y],
|
// 将第一步创建的 icon 对象传给 icon 属性
|
icon: icon,
|
// 将第二步创建的 text 对象传给 text 属性
|
text: text,
|
});
|
marker.objInfo = x;
|
marker.on("click", function (e) {
|
setSelectStyle(e.target);
|
callbackObj.selectSignObj(e.target.objInfo.SignId);
|
});
|
return marker;
|
});
|
_layer.add(markers);
|
}
|
|
if (_selectedOverlay) {
|
let signObj = _allSignObjs.find(function (x) { return x.SignId == _selectedOverlay.objInfo.SignId; });
|
if (signObj) {
|
setSelectStyle(_selectedOverlay);
|
}
|
else {
|
cancelSelectSignObj();
|
}
|
}
|
|
setInfoText();
|
return true;
|
}
|
|
//添加单个标记对象
|
function appendSignObj(signObj) {
|
if (_status != map_status.Normal) {
|
return false;
|
}
|
if (isEmpty(signObj)) {
|
return false;
|
}
|
if (isEmpty(_allSignObjs)) {
|
_allSignObjs = [];
|
}
|
|
_allSignObjs.push(signObj);
|
|
let icon = {
|
// 图标类型，现阶段只支持 image 类型
|
type: 'image',
|
// 图片 url
|
image: sign_type_base64.FireHydrant,
|
// 图片尺寸
|
size: [32, 32],
|
// 图片相对 position 的锚点，默认为 bottom-center
|
anchor: 'bottom-center',
|
};
|
|
let text = {
|
// 要展示的文字内容
|
content: signObj.SignName,
|
// 文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置
|
direction: 'right',
|
// 在 direction 基础上的偏移量
|
offset: [0, 0],
|
// 文字样式
|
style: {
|
// 字体大小
|
fontSize: 12,
|
// 字体颜色
|
fillColor: '#22886f',
|
// 描边颜色
|
strokeColor: '#fff',
|
// 描边宽度
|
strokeWidth: 2,
|
}
|
};
|
|
let marker = new AMap.LabelMarker({
|
position: [signObj.Point.X, signObj.Point.Y],
|
// 将第一步创建的 icon 对象传给 icon 属性
|
icon: icon,
|
// 将第二步创建的 text 对象传给 text 属性
|
text: text,
|
});
|
marker.objInfo = signObj;
|
marker.on("click", function (e) {
|
setSelectStyle(e.target);
|
callbackObj.selectSignObj(e.target.objInfo.SignId);
|
});
|
_layer.add(marker);
|
|
setInfoText();
|
return true;
|
}
|
|
//添加多个标记对象
|
function appendSignObjs(signObjs) {
|
if (_status != map_status.Normal) {
|
return false;
|
}
|
if (isEmpty(signObjs)) {
|
return false;
|
}
|
if (signObjs.length < 1) {
|
return false;
|
}
|
if (isEmpty(_allSignObjs)) {
|
_allSignObjs = [];
|
}
|
|
signObjs.forEach(function (x) { _allSignObjs.push(x); });
|
|
let icon = {
|
// 图标类型，现阶段只支持 image 类型
|
type: 'image',
|
// 图片 url
|
image: sign_type_base64.FireHydrant,
|
// 图片尺寸
|
size: [32, 32],
|
// 图片相对 position 的锚点，默认为 bottom-center
|
anchor: 'bottom-center',
|
};
|
|
let markers = signObjs.map(function (x) {
|
let text = {
|
// 要展示的文字内容
|
content: x.SignName,
|
// 文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置
|
direction: 'right',
|
// 在 direction 基础上的偏移量
|
offset: [0, 0],
|
// 文字样式
|
style: {
|
// 字体大小
|
fontSize: 12,
|
// 字体颜色
|
fillColor: '#22886f',
|
// 描边颜色
|
strokeColor: '#fff',
|
// 描边宽度
|
strokeWidth: 2,
|
}
|
};
|
let lnglat = [x.Point.X, x.Point.Y];
|
let marker = new AMap.LabelMarker({
|
position: lnglat,
|
// 将第一步创建的 icon 对象传给 icon 属性
|
icon: icon,
|
// 将第二步创建的 text 对象传给 text 属性
|
text: text,
|
});
|
marker.objInfo = x;
|
marker.on("click", function (e) {
|
setSelectStyle(e.target);
|
callbackObj.selectSignObj(e.target.objInfo.SignId);
|
});
|
return marker;
|
});
|
_layer.add(markers);
|
|
|
setInfoText();
|
return true;
|
}
|
|
//更新标记对象
|
function updateSignObj(signObj) {
|
if (_status != map_status.Normal) {
|
return false;
|
}
|
if (isEmpty(signObj)) {
|
return false;
|
}
|
if (isEmpty(_allSignObjs)) {
|
_allSignObjs = [];
|
}
|
let exist = _allSignObjs.find(function (x) { return x.SignId == signObj.SignId });
|
if (exist) {
|
let index = _allSignObjs.indexOf(exist);
|
_allSignObjs.splice(index, 1, signObj);
|
let allOverlays = _layer.getAllOverlays();
|
let marker = allOverlays.find(function (x) { return x.objInfo && x.objInfo.SignId == signObj.SignId; });
|
if (marker) {
|
if (marker.objInfo.Point.X != signObj.Point.X || marker.objInfo.Point.Y != signObj.Point.Y) {
|
marker.setPosition([signObj.Point.X, signObj.Point.Y]);
|
}
|
if (marker.objInfo.SignName != signObj.SignName) {
|
let text = {
|
// 要展示的文字内容
|
content: signObj.SignName,
|
// 文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置
|
direction: 'right',
|
// 在 direction 基础上的偏移量
|
offset: [-0, -0],
|
// 文字样式
|
style: {
|
// 字体大小
|
fontSize: 12,
|
// 字体颜色
|
fillColor: '#22886f',
|
// 描边颜色
|
strokeColor: '#fff',
|
// 描边宽度
|
strokeWidth: 2,
|
}
|
};
|
marker.setText(text);
|
|
if (_selectedOverlay) {
|
if (_selectedOverlay.objInfo) {
|
if (_selectedOverlay.objInfo.SignId == signObj.SignId) {
|
setSelectStyle(marker);
|
}
|
}
|
}
|
}
|
marker.objInfo = signObj;
|
}
|
}
|
return false;
|
}
|
|
//批量更新标记对象
|
function updateSignObjs(signObjs) {
|
if (_status != map_status.Normal) {
|
return false;
|
}
|
if (isEmpty(signObjs)) {
|
return false;
|
}
|
|
let bol = true;
|
for (let i = 0; i < signObjs.length; i++) {
|
bol = updateSignObj(signObjs[i]);
|
if (!bol) {
|
break;
|
}
|
}
|
return bol;
|
}
|
|
//删除单个标记对象
|
function removeSignObj(signId) {
|
if (_status != map_status.Normal) {
|
return false;
|
}
|
if (isEmpty(signId)) {
|
return false;
|
}
|
if (isEmpty(_allSignObjs)) {
|
_allSignObjs = [];
|
}
|
|
let signObj = _allSignObjs.find(function (x) { return x.SignId == signId; });
|
if (!signObj) {
|
return false;
|
}
|
|
let overlays = _layer.getAllOverlays();
|
let overlay = overlays.find(function (x) {
|
return x.objInfo && x.objInfo.SignId == signId;
|
});
|
if (!overlay) {
|
return false;
|
}
|
|
_layer.remove(overlay);
|
|
let index = _allSignObjs.indexOf(signObj);
|
_allSignObjs.splice(index,1);
|
|
if (_selectedOverlay) {
|
if (_selectedOverlay.objInfo) {
|
if (_selectedOverlay.objInfo.SignId == signId) {
|
cancelSelectSignObj();
|
}
|
}
|
}
|
|
setInfoText();
|
}
|
|
//删除多个标记对象
|
function removeSignObjs(signIds) {
|
if (_status != map_status.Normal) {
|
return false;
|
}
|
if (isEmpty(signIds)) {
|
return false;
|
}
|
if (signIds.length < 1) {
|
return false;
|
}
|
if (isEmpty(_allSignObjs)) {
|
_allSignObjs = [];
|
}
|
|
let signObjs = _allSignObjs.filter(function (x) {
|
return signIds.indexOf(x.SignId) > -1;
|
});
|
if (!signObjs) {
|
return false;
|
}
|
if (signObjs.length < 1) {
|
return false;
|
}
|
if (signObjs.length != signIds.length) {
|
return false;
|
}
|
|
let allOverlays = _layer.getAllOverlays();
|
let overlays = allOverlays.filter(function (x) { return x.objInfo && signIds.indexOf(x.objInfo.SignId) > -1; });
|
_layer.remove(overlays);
|
|
signObjs.forEach(function (x) {
|
let index = _allSignObjs.indexOf(x);
|
_allSignObjs.splice(index,1);
|
});
|
|
if (_selectedOverlay) {
|
if (_selectedOverlay.objInfo) {
|
if (signIds.indexOf(_selectedOverlay.objInfo.SignId) > -1) {
|
cancelSelectSignObj();
|
}
|
}
|
}
|
|
setInfoText();
|
|
return true;
|
}
|
|
//清除所有覆盖物
|
function clearAllSignObjs() {
|
_allSignObjs = [];
|
_layer.clear();
|
|
cancelSelectSignObj();
|
setInfoText();
|
return true;
|
}
|
|
//开始绘制
|
function startDraw(signObj) {
|
if (_status != map_status.Normal) {
|
return false;
|
}
|
if (isEmpty(signObj)) {
|
return false;
|
}
|
|
_status = map_status.Draw;
|
_drawSignObj = signObj;
|
|
if (_locateMarker) {
|
let position = _locateMarker.getPosition();
|
let lnglat = [position.getLng(), position.getLat()];
|
_drawOverlay = new AMap.Marker(
|
{
|
position: lnglat,
|
icon: new AMap.Icon({ size: new AMap.Size(32, 32), image: "../img/XiaoHuoShuan_blue.png", imageOffset: new AMap.Pixel(0, 0) }),
|
offset: new AMap.Pixel(-0, -0),
|
anchor: 'bottom-center'
|
});
|
_drawOverlay.setMap(_map);
|
_drawOverlay.objInfo = null;
|
_drawOverlay.setDraggable(true);
|
}
|
else {
|
_map.on("click", onMapDrawMarkerClick, true);//地图添加绘制点击事件
|
}
|
$("#draw_marker_box").show();
|
judgeDrawMarkerButtons();
|
|
setInfoText();
|
return true;
|
}
|
|
//取消绘制
|
function cancelDraw() {
|
if (_status != map_status.Draw) {
|
return false;
|
}
|
if (!_drawSignObj) {
|
return false;
|
}
|
if (_drawOverlay) {
|
_map.remove(_drawOverlay)
|
}
|
_drawSignObj = null;
|
_drawOverlay = null;
|
_status = map_status.Normal;
|
setInfoText();
|
$("#draw_marker_box").hide();
|
return true;
|
}
|
|
//结束绘制点
|
function finishDrawMarker() {
|
if (_status != map_status.Draw) {
|
return;
|
}
|
if (!_drawSignObj) {
|
return;
|
}
|
if (!_drawOverlay) {
|
return;
|
}
|
|
_drawOverlay.setDraggable(false);
|
|
let position = _drawOverlay.getPosition();
|
let lnglat = [position.getLng(), position.getLat()];
|
let point = { X: lnglat[0], Y: lnglat[1] };
|
_drawSignObj.Point = point;
|
let geocoder = new AMap.Geocoder({});
|
geocoder.getAddress(lnglat, function (status, result) {
|
if (status === 'complete' && result.info === 'OK') {
|
let address = result.regeocode.formattedAddress;
|
_drawSignObj.Address = address;
|
}
|
let json = JSON.stringify(_drawSignObj);
|
callbackObj.finishDraw(json);
|
});
|
}
|
|
//取消绘制点
|
function cancelDrawMarker() {
|
if (_status != map_status.Draw) {
|
return;
|
}
|
if (!_drawSignObj) {
|
return;
|
}
|
if (_drawOverlay) {
|
_drawOverlay.setDraggable(false);
|
_map.remove(_drawOverlay);
|
}
|
else {
|
_map.off("click", onMapDrawMarkerClick);
|
}
|
|
_drawSignObj = null;
|
_drawOverlay = null;
|
_status = map_status.Normal;
|
setInfoText();
|
$("#draw_marker_box").hide();
|
callbackObj.cancelDraw();
|
}
|
|
//判断绘制按钮
|
function judgeDrawMarkerButtons() {
|
if (_status != map_status.Draw) {
|
return;
|
}
|
//完成
|
if (_drawOverlay) {
|
$("#btnDrawMarkerFinish").attr("disabled", false);
|
}
|
else {
|
$("#btnDrawMarkerFinish").attr("disabled", true);
|
}
|
//取消
|
$("#btnDrawMarkerCancel").attr("disabled", false);
|
}
|
|
//地图绘制点标记点击事件
|
function onMapDrawMarkerClick(e) {
|
if (_status != map_status.Draw) {
|
return;
|
}
|
if (!_drawSignObj) {
|
return;
|
}
|
if (_drawOverlay) {
|
return;
|
}
|
|
_map.off("click", onMapDrawMarkerClick);
|
let lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
|
|
_drawOverlay = new AMap.Marker(
|
{
|
position: lnglat,
|
icon: new AMap.Icon({ size: new AMap.Size(32, 32), image: "../img/XiaoHuoShuan_blue.png", imageOffset: new AMap.Pixel(0, 0) }),
|
offset: new AMap.Pixel(-0, -0),
|
anchor: 'bottom-center'
|
});
|
_drawOverlay.objInfo = null;
|
_drawOverlay.setMap(_map);
|
_drawOverlay.setDraggable(true);
|
judgeDrawMarkerButtons();
|
}
|
|
//开始编辑
|
function startEditDraw() {
|
if (_status != map_status.Normal) {
|
return false;
|
}
|
if (!_selectedOverlay) {
|
return false;
|
}
|
if (!_selectedOverlay.objInfo) {
|
return false;
|
}
|
if (_editDrawOverlay) {
|
return false;
|
}
|
_map.clearInfoWindow();
|
let position = _selectedOverlay.getPosition();
|
let lnglat = [position.getLng(), position.getLat()];
|
_selectedOverlay.hide();
|
_editDrawOverlay = new AMap.Marker(
|
{
|
position: lnglat,
|
icon: new AMap.Icon({ size: new AMap.Size(32, 32), image: "../img/XiaoHuoShuan_blue.png", imageOffset: new AMap.Pixel(0, 0) }),
|
offset: new AMap.Pixel(-0, -0),
|
anchor: 'bottom-center'
|
});
|
_editDrawOverlay.setMap(_map);
|
_editDrawOverlay.objInfo = null;
|
_editDrawOverlay.setDraggable(true);
|
|
_status = map_status.Edit;
|
setInfoText();
|
$("#edit_draw_box").show();
|
return true;
|
}
|
|
//结束编辑
|
function finishEditDraw() {
|
if (_status != map_status.Edit) {
|
return;
|
}
|
if (!_selectedOverlay) {
|
return;
|
}
|
if (!_selectedOverlay.objInfo) {
|
return;
|
}
|
if (!_editDrawOverlay) {
|
return;
|
}
|
|
let position = _editDrawOverlay.getPosition();
|
let lnglat = [position.getLng(), position.getLat()];
|
_editDrawOverlay.setDraggable(false);
|
_map.remove(_editDrawOverlay);
|
_editDrawOverlay = null;
|
|
_selectedOverlay.setPosition(lnglat);
|
_selectedOverlay.objInfo.Point = { X: lnglat[0], Y: lnglat[1] };
|
|
getAddressByLnglat(lnglat, function (address) {
|
if (!isEmpty(address)) {
|
_selectedOverlay.objInfo.Address = address;
|
}
|
_selectedOverlay.show();
|
_status = map_status.Normal;
|
setInfoText();
|
$("#edit_draw_box").hide();
|
callbackObj.updateSignObj(JSON.stringify(_selectedOverlay.objInfo));
|
});
|
|
}
|
|
//取消编辑
|
function cancelEditDraw() {
|
if (_status != map_status.Edit) {
|
return;
|
}
|
if (!_selectedOverlay) {
|
return;
|
}
|
if (!_selectedOverlay.objInfo) {
|
return;
|
}
|
if (!_editDrawOverlay) {
|
return;
|
}
|
_map.remove(_editDrawOverlay);
|
_editDrawOverlay = null;
|
_selectedOverlay.show();
|
|
_status = map_status.Normal;
|
setInfoText();
|
$("#edit_draw_box").hide();
|
callbackObj.cancelEditDraw();
|
}
|
|
//选择标记对象
|
function selectSignObj(signId) {
|
if (isEmpty(signId)) {
|
return;
|
}
|
if (isEmpty(_allSignObjs)) {
|
_allSignObjs = [];
|
}
|
let signObj = _allSignObjs.find(function (x) { return x.SignId == signId; });
|
if (signObj) {
|
let overlays = _layer.getAllOverlays();
|
overlay = overlays.filter(function (x) { return x.objInfo && x.objInfo.SignId == signId });
|
if (overlay) {
|
setSelectStyle(overlay);
|
callbackObj.selectSignObj(signId);
|
}
|
}
|
}
|
|
//设置选择样式
|
function setSelectStyle(overlay) {
|
setCancelSelectStyle();
|
if (overlay.objInfo) {
|
let info = [];
|
info.push("<div className='input-card'>");
|
info.push("<label style=\"color: blue\">");
|
info.push("消火栓");
|
info.push("</label>");
|
info.push("<p class='input-item'>名称：");
|
info.push(overlay.objInfo.SignName);
|
info.push("</p>");
|
info.push("<p class='input-item'>经纬度：");
|
info.push(overlay.objInfo.Point.X + "," + overlay.objInfo.Point.Y);
|
info.push("</p>");
|
info.push("<p class='input-item'>地址：");
|
info.push(overlay.objInfo.address);
|
info.push("</p>");
|
info.push("</div>");
|
infoWindow = new AMap.InfoWindow({
|
anchor: 'bottom-center',
|
content: info.join(""),
|
offset: new AMap.Pixel(0, -32)
|
});
|
|
infoWindow.open(_map, overlay.getPosition());
|
}
|
_selectedOverlay = overlay;
|
}
|
|
//取消选择标记对象
|
function cancelSelectSignObj() {
|
if (_selectedOverlay) {
|
setCancelSelectStyle();
|
callbackObj.selectSignObj("");
|
}
|
}
|
|
//设置取消选择样式
|
function setCancelSelectStyle() {
|
if (_selectedOverlay) {
|
_map.clearInfoWindow();
|
_selectedOverlay = null;
|
}
|
}
|
|
//设置搜索面板的可见性
|
function setSearchPanelVisibility() {
|
document.getElementById('search_box').hidden = !document.getElementById('search_box').hidden;
|
}
|
|
//设置信息提示面板的可见性
|
function setInfoPanelVisibility() {
|
document.getElementById('info_box').hidden = !document.getElementById('info_box').hidden;
|
}
|
|
//设置信息面板提示信息
|
function setInfoText() {
|
var level = _map.getZoom();
|
if (level <= _paras.LevelParas.HideSignUpperLimit) {
|
var info1 = "地图显示区域过广，地图信息处于隐藏状态" + "\n";
|
var info2 = "当前状态："
|
var info3 = "";
|
if (_status == map_status.Normal) {
|
info3 = "正常";
|
}
|
else if (_status == map_status.Draw) {
|
info3 = "绘制";
|
}
|
else {
|
info3 = "编辑";
|
}
|
|
var info = info1 + info2 + info3;
|
document.getElementById('info_text').innerText = info;
|
}
|
else {
|
if (isEmpty(_allSignObjs)) {
|
_allSignObjs = [];
|
}
|
var info1 = "消火栓：" + _allSignObjs.length + "\n";
|
var info2 = "当前状态："
|
var info3 = "";
|
if (_status == map_status.Normal) {
|
info3 = "正常";
|
}
|
else if (_status == map_status.Draw) {
|
info3 = "绘制";
|
}
|
else {
|
info3 = "编辑";
|
}
|
var info = info1 + info2 + info3;
|
document.getElementById('info_text').innerText = info;
|
}
|
}
|
|
//根据点获取地址
|
getAddressByLnglat = function (lnglat, callback) {
|
let geocoder = new AMap.Geocoder({});
|
geocoder.getAddress(lnglat, function (status, result) {
|
let address = null;
|
if (status === 'complete' && result.info === 'OK') {
|
address = result.regeocode.formattedAddress; //返回地址描述
|
}
|
callback(address);
|
});
|
}
|
|
//根据详细地址查看地图(pc调用)
|
function locateByAddress(address) {
|
if (isEmpty(address)) {
|
return;
|
}
|
let geocoder = new AMap.Geocoder({});
|
//地理编码,返回地理编码结果
|
geocoder.getLocation(address, function (status, result) {
|
if (status === 'complete' && result.info === 'OK') {
|
let geocode = result.geocodes;
|
let lnglat = [geocode[0].location.getLng(), geocode[0].location.getLat()];
|
let marker = new AMap.Marker({ position: lnglat });
|
_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 setMapStyle(enName) {
|
_map.setMapStyle('amap://styles/' + enName);
|
}
|
|
//添加定位点
|
function addLocateMarker(lnglat) {
|
_locateMarker = new AMap.Marker({
|
position: lnglat,
|
icon: new AMap.Icon({
|
size: new AMap.Size(32, 32), //图标大小
|
image: "../img/current.png"
|
}),
|
offset: new AMap.Pixel(-0, -0),
|
anchor: 'bottom-center'
|
});
|
_locateMarker.objInfo = null;
|
_locateMarker.setMap(_map);
|
_map.setFitView(_locateMarker);
|
$("#location_box").show();
|
}
|
|
//移除定位点
|
function removeLocateMarker() {
|
if (_locateMarker) {
|
_map.remove(_locateMarker);
|
}
|
_locateMarker = null;
|
$("#location_box").hide();
|
}
|
|
//移动定位点
|
function moveLocateMarker(lnglat) {
|
if (_locateMarker) {
|
_locateMarker.setPosition(lnglat);
|
}
|
}
|
|
//设置定位点
|
function setLocateMarker(p) {
|
if (isEmpty(p)) {
|
removeLocateMarker();
|
}
|
else {
|
let lnglat = [p.X, p.Y];
|
if (!_locateMarker) {
|
addLocateMarker(lnglat);
|
}
|
else {
|
moveLocateMarker(lnglat);
|
}
|
}
|
}
|
|
//设置GPS定位点
|
function setGpsLocateMarker(p) {
|
if (isEmpty(p)) {
|
removeLocateMarker();
|
}
|
else {
|
let lnglat = new AMap.LngLat(p.X, p.Y);
|
AMap.convertFrom(lnglat, 'gps', function (status, result) {
|
if (result.info === 'ok') {
|
var resLnglat = result.locations[0];
|
if (!_locateMarker) {
|
addLocateMarker(resLnglat);
|
}
|
else {
|
moveLocateMarker(resLnglat);
|
}
|
}
|
});
|
}
|
}
|
|
//返回定位区域
|
function backLocateMarker() {
|
if (_locateMarker) {
|
_map.setFitView(_locateMarker);
|
}
|
}
|
|
//延迟执行地图边界改变
|
function setTimeOutBoundsChanged(millseconds) {
|
setTimeout("boundsChanged()", millseconds);
|
}
|
|
//地图界面改变
|
function boundsChanged() {
|
try {
|
let level = _map.getZoom();
|
let cp = _map.getCenter();
|
//地图可视区域
|
let bs = _map.getBounds();
|
//可视区域左下角
|
let bslb = bs.getSouthWest();
|
//可视区域右上角
|
let bsrt = bs.getNorthEast();
|
let jsonObj = { Level: level, CenterPoint: { X: cp.getLng(), Y: cp.getLat() }, LeftBottomPoint: { X: bslb.getLng(), Y: bslb.getLat() }, RightTopPoint: { X: bsrt.getLng(), Y: bsrt.getLat() } };
|
callbackObj.boundsChanged(JSON.stringify(jsonObj));
|
}
|
catch (e) {
|
}
|
}
|
|
|
|
</script>
|
</body>
|
|
</html>
|
