<!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/honey_switch.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 id="view_box" class="view-box">
|
信息展示
|
<hr>
|
<div class="view-box-item">
|
<input type="checkbox" id="view_building" checked onclick="setBuildingVisible(this)" />建筑物
|
</div>
|
|
<div class="view-box-item">
|
<input type="checkbox" id="view_firehydrant" checked onclick="setFireHydrantVisible(this)" />消火栓
|
</div>
|
|
<div class="view-box-item">
|
<input type="checkbox" id="view_firepool" checked onclick="setFirePoolVisible(this)" />消防水池
|
</div>
|
|
<div class="view-box-item">
|
<input type="checkbox" id="view_naturallake" checked onclick="setNaturalLakeVisible(this)" />自然湖泊
|
</div>
|
</div>
|
|
<div id='location_box' class="location-box" title="定位" style="display: none;" onclick="backLocateMarker()"></div>
|
|
<script>
|
|
let map;//地图对象 使用 ToolBar时，地图对象需要定义为map 否则会报错
|
let _map;//地图对象
|
let _layer_building;//建筑物图层
|
let _layer_firehydrant;//消火栓图层
|
let _layer_firepool;//消防水池图层
|
let _group_naturallake;//自然湖泊覆盖物组
|
let _locateMarker;//定位覆盖物点
|
let _allSignObjs = [];//所有标记对象
|
let _selectedOverlay;//选择的覆盖物
|
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_building = new AMap.LabelsLayer({
|
zooms: [3, 20],
|
zIndex: 1000,
|
// 该层内标注是否避让
|
collision: false,
|
});
|
_map.add(_layer_building);
|
|
//消火栓图层
|
_layer_firehydrant = new AMap.LabelsLayer({
|
zooms: [3, 20],
|
zIndex: 1001,
|
// 该层内标注是否避让
|
collision: false,
|
});
|
_map.add(_layer_firehydrant);
|
|
//消防水池图层
|
_layer_firepool = new AMap.LabelsLayer({
|
zooms: [3, 20],
|
zIndex: 1002,
|
// 该层内标注是否避让
|
collision: false,
|
});
|
_map.add(_layer_firepool);
|
|
//自然湖泊组
|
_group_naturallake = new AMap.OverlayGroup();
|
_map.add(_group_naturallake);
|
|
callbackObj.loadCompleted();
|
});
|
|
}
|
catch (e) {
|
callbackObj.loadFailed();
|
}
|
})
|
|
//加载参数
|
function loadParas(paras) {
|
if (isEmpty(paras)) {
|
return false;
|
}
|
_paras = paras;
|
return true;
|
}
|
|
//设置标记对象
|
function setSignObjs(signObjs) {
|
|
if (isEmpty(signObjs)) {
|
_allSignObjs = [];
|
}
|
else {
|
_allSignObjs = signObjs;
|
}
|
|
let signObjs_building = _allSignObjs.filter(function (x) { return x.SignType == sign_type.Building; });
|
setBuildings(signObjs_building);
|
|
let signObjs_firehydrant = _allSignObjs.filter(function (x) { return x.SignType == sign_type.FireHydrant; });
|
setFireHyrants(signObjs_firehydrant);
|
|
let signObjs_firepools = _allSignObjs.filter(function (x) { return x.SignType == sign_type.FirePool; });
|
setFirePools(signObjs_firepools);
|
|
let signObjs_naturallake = _allSignObjs.filter(function (x) { return x.SignType == sign_type.NaturalLake; });
|
setNaturalLakes(signObjs_naturallake);
|
|
if (_selectedOverlay) {
|
let signObj = _allSignObjs.find(function (x) { return x.SignId == _selectedOverlay.objInfo.SignId; });
|
if (signObj) {
|
setSelectStyle(_selectedOverlay);
|
}
|
else {
|
cancelSelectSignObj();
|
}
|
}
|
|
setInfoText();
|
return true;
|
}
|
|
//设置建筑物
|
function setBuildings(signObjs) {
|
if (isEmpty(signObjs)) {
|
signObjs = [];
|
}
|
|
//标记标识列表
|
let signIds = signObjs.map(function (x) { return x.SignId; });
|
|
//覆盖物列表
|
let overlays = _layer_building.getAllOverlays();
|
|
//移除不在标记列表中的覆盖物
|
let overlays_remove = overlays.filter(function (x) { return signIds.indexOf(x.objInfo.SignId) < 0; });
|
_layer_building.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 = signObjs.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 = signObjs.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.Building,
|
// 图片尺寸
|
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_building.add(markers);
|
}
|
|
}
|
|
//设置消火栓
|
function setFireHyrants(signObjs) {
|
if (isEmpty(signObjs)) {
|
signObjs = [];
|
}
|
|
//标记标识列表
|
let signIds = signObjs.map(function (x) { return x.SignId; });
|
|
//覆盖物列表
|
let overlays = _layer_firehydrant.getAllOverlays();
|
|
//移除不在标记列表中的覆盖物
|
let overlays_remove = overlays.filter(function (x) { return signIds.indexOf(x.objInfo.SignId) < 0; });
|
_layer_firehydrant.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 = signObjs.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 = signObjs.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_firehydrant.add(markers);
|
}
|
|
}
|
|
//设置消防水池
|
function setFirePools(signObjs) {
|
if (isEmpty(signObjs)) {
|
signObjs = [];
|
}
|
|
//标记标识列表
|
let signIds = signObjs.map(function (x) { return x.SignId; });
|
|
//覆盖物列表
|
let overlays = _layer_firepool.getAllOverlays();
|
|
//移除不在标记列表中的覆盖物
|
let overlays_remove = overlays.filter(function (x) { return signIds.indexOf(x.objInfo.SignId) < 0; });
|
_layer_firepool.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 = signObjs.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 = signObjs.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.FirePool,
|
// 图片尺寸
|
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_firepool.add(markers);
|
}
|
|
}
|
|
//设置自然湖泊
|
function setNaturalLakes(signObjs) {
|
if (isEmpty(signObjs)) {
|
signObjs = [];
|
}
|
|
//标记标识列表
|
let signIds = signObjs.map(function (x) { return x.SignId; });
|
|
//覆盖物列表
|
let overlays = _group_naturallake.getOverlays();
|
//自然湖泊覆盖物列表
|
let overlays_naturallake = overlays.filter(function (x) { return x.objInfo; });
|
|
//移除不在标记列表中的覆盖物
|
let overlays_naturallake_remove = overlays_naturallake.filter(function (x) { return signIds.indexOf(x.objInfo.SignId) < 0; });
|
overlays_naturallake_remove.forEach(function (x) {
|
_group_naturallake.removeOverlay(x);
|
if (x.intake) {
|
if (x.intake.length > 0) {
|
_group_naturallake.removeOverlays(x.intake);
|
}
|
}
|
});
|
|
//更新已有覆盖物
|
let overlays_naturallake_exist = overlays_naturallake.filter(function (x) { return signIds.indexOf(x.objInfo.SignId) > -1; });
|
if (overlays_naturallake_exist.length > 0) {
|
overlays_naturallake_exist.forEach(function (x) {
|
let signObj = signObjs.find(function (t) { return t.SignId == x.objInfo.SignId; });
|
x.setOptions({
|
strokeColor: signObj.BorderColor, //线颜色
|
strokeOpacity: signObj.BorderOpacity, //线透明度
|
strokeWeight: signObj.BorderWidth, //线宽
|
fillColor: signObj.BackgroundColor, //填充色
|
fillOpacity: signObj.BackgroundOpacity//填充透明度
|
});
|
if (x.intake) {
|
if (x.intake.length > 0) {
|
_group_naturallake.removeOverlays(x.intake);
|
}
|
}
|
if (signObj.IntakePoints) {
|
if (signObj.IntakePoints.length > 0) {
|
x.intake = [];
|
signObj.IntakePoints.forEach(function (y) {
|
let marker = new AMap.Marker({
|
position: [y.Point.X, y.Point.Y],
|
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(y.Name);
|
// 设置label标签
|
// label默认蓝框白底左上角显示，样式className为：amap-marker-label
|
marker.setLabel({
|
offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
|
content: y.Name, //设置文本标注内容
|
direction: 'right' //设置文本标注方位
|
});
|
marker.objInfo = null;
|
x.intake.push(marker);
|
});
|
_group_naturallake.addOverlays(x.intake);
|
}
|
}
|
x.objInfo = signObj;
|
});
|
}
|
|
//添加覆盖物
|
let signIds_naturallake_overlay = overlays_naturallake_exist.map(function (x) { return x.objInfo.SignId; });
|
let signObjs_new = signObjs.filter(function (x) { return signIds_naturallake_overlay.indexOf(x.SignId) < 0; });
|
if (signObjs_new.length > 0) {
|
signObjs_new.forEach(function (x) {
|
let points = x.Points ? x.Points : [];
|
let lnglats = points.map(function (t) { return [t.X, t.Y]; });
|
let polygon = new AMap.Polygon({
|
path: lnglats,//设置多边形边界路径
|
strokeColor: x.BorderColor ? x.BorderColor : _paras.PolygonDefaultParas.BorderColor, //线颜色
|
strokeOpacity: x.BorderOpacity ? x.BorderOpacity : _paras.PolygonDefaultParas.BorderOpacity, //线透明度
|
strokeWeight: x.BorderWidth ? x.BorderWidth : _paras.PolygonDefaultParas.BorderWidth, //线宽
|
fillColor: x.BackgroundColor ? x.BackgroundColor : _paras.PolygonDefaultParas.BackgroundColor, //填充色
|
fillOpacity: x.BackgroundOpacity ? x.BackgroundOpacity : _paras.PolygonDefaultParas.BackgroundOpacity//填充透明度
|
});
|
polygon.objInfo = x;
|
polygon.on("click", function (e) {
|
setSelectStyle(e.target);
|
callbackObj.selectSignObj(e.target.objInfo.SignId);
|
});
|
_group_naturallake.addOverlay(polygon);
|
|
if (x.IntakePoints) {
|
if (x.IntakePoints.length > 0) {
|
polygon.intake = [];
|
x.IntakePoints.forEach(function (y) {
|
let position = [y.Point.X, y.Point.Y];
|
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(0, 0)
|
}),
|
offset: new AMap.Pixel(-15, -21)
|
});
|
// 设置鼠标划过点标记显示的文字提示
|
marker.setTitle(y.Name);
|
// 设置label标签
|
// label默认蓝框白底左上角显示，样式className为：amap-marker-label
|
marker.setLabel({
|
offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
|
content: y.Name, //设置文本标注内容
|
direction: 'right' //设置文本标注方位
|
});
|
marker.objInfo = null;
|
polygon.intake.push(marker);
|
});
|
_group_naturallake.addOverlays(polygon.intake);
|
}
|
}
|
});
|
}
|
}
|
|
//清除所有覆盖物
|
function clearAllSignObjs() {
|
_allSignObjs = [];
|
_layer_building.clear();
|
_layer_firehydrant.clear();
|
_layer_firepool.clear();
|
_group_naturallake.clearOverlays();
|
|
cancelSelectSignObj();
|
setInfoText();
|
return true;
|
}
|
|
//设置建筑物可见性
|
function setBuildingVisible(checkbox) {
|
if (checkbox.checked) {
|
_layer_building.show();
|
} else {
|
_layer_building.hide();
|
}
|
}
|
|
//设置消火栓可见性
|
function setFireHydrantVisible(checkbox) {
|
if (checkbox.checked) {
|
_layer_firehydrant.show();
|
} else {
|
_layer_firehydrant.hide();
|
}
|
}
|
|
//设置消防水池可见性
|
function setFirePoolVisible(checkbox) {
|
if (checkbox.checked) {
|
_layer_firepool.show();
|
} else {
|
_layer_firepool.hide();
|
}
|
}
|
|
//设置自然湖泊可见性
|
function setNaturalLakeVisible(checkbox) {
|
if (checkbox.checked) {
|
_group_naturallake.show();
|
} else {
|
_group_naturallake.hide();
|
}
|
}
|
|
|
//选择标记对象
|
function selectSignObj(signId) {
|
if (isEmpty(signId)) {
|
return;
|
}
|
if (isEmpty(_allSignObjs)) {
|
_allSignObjs = [];
|
}
|
let signObj = _allSignObjs.find(function (x) { return x.SignId == signId; });
|
if (signObj) {
|
let signtype = signObj.SignType;
|
let overlay = null;
|
if (signtype == sign_type.Building) {
|
let overlays = _layer_building.getAllOverlays();
|
overlay = overlays.filter(function (x) { return x.objInfo && x.objInfo.SignId == signId });
|
}
|
else if (signtype == sign_type.FireHydrant) {
|
let overlays = _layer_firehydrant.getAllOverlays();
|
overlay = overlays.filter(function (x) { return x.objInfo && x.objInfo.SignId == signId });
|
}
|
else if (signtype == sign_type.FirePool) {
|
let overlays = _layer_firepool.getAllOverlays();
|
overlay = overlays.filter(function (x) { return x.objInfo && x.objInfo.SignId == signId });
|
}
|
else if (signtype == sign_type.NaturalLake) {
|
let overlays = _group_naturallake.getOverlays();
|
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 signtype = overlay.objInfo.SignType;
|
let shape = overlay.objInfo.SignShape;
|
if (shape == sign_shape.Marker) {
|
let info = [];
|
info.push("<div className='input-card'>");
|
info.push("<label style=\"color: blue\">");
|
|
if (signtype == sign_type.Building) {
|
info.push("建筑物");
|
}
|
else if (signtype == sign_type.FireHydrant) {
|
info.push("消火栓");
|
}
|
else if (signtype == sign_type.FirePool) {
|
info.push("消防水池");
|
}
|
else {
|
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());
|
}
|
else if (shape == sign_shape.Polygon) {
|
overlay.setOptions({
|
strokeColor: _paras.PolygonSelectedParas.BorderColor, //线颜色
|
strokeOpacity: _paras.PolygonSelectedParas.BorderOpacity, //线透明度
|
strokeWeight: _paras.PolygonSelectedParas.BorderWidth, //线宽
|
fillColor: _paras.PolygonSelectedParas.BackgroundColor, //填充色
|
fillOpacity: _paras.PolygonSelectedParas.BackgroundOpacity//填充透明度
|
});
|
}
|
}
|
_selectedOverlay = overlay;
|
}
|
|
//取消选择标记对象
|
function cancelSelectSignObj() {
|
if (_selectedOverlay) {
|
setCancelSelectStyle();
|
callbackObj.selectSignObj("");
|
}
|
}
|
|
//设置取消选择样式
|
function setCancelSelectStyle() {
|
if (_selectedOverlay) {
|
if (_selectedOverlay.objInfo) {
|
let shape = _selectedOverlay.objInfo.SignShape;
|
if (shape == sign_shape.Marker) {
|
_map.clearInfoWindow();
|
}
|
else if (shape == sign_shape.Polygon) {
|
_selectedOverlay.setOptions({
|
strokeColor: _selectedOverlay.objInfo.BorderColor, //线颜色
|
strokeOpacity: _selectedOverlay.objInfo.BorderOpacity, //线透明度
|
strokeWeight: _selectedOverlay.objInfo.BorderWidth, //线宽
|
fillColor: _selectedOverlay.objInfo.BackgroundColor, //填充色
|
fillOpacity: _selectedOverlay.objInfo.BackgroundOpacity//填充透明度
|
});
|
}
|
}
|
_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 setViewPanelVisibility() {
|
document.getElementById('view_box').hidden = !document.getElementById('view_box').hidden;
|
}
|
|
//获取地图显示层级和中心点(client调用有返回值,返回JSON字符串，client获取也是json字符串)
|
function getZoomAndCenter() {
|
let level = _map.getZoom();
|
let cp = _map.getCenter();
|
let jsonObj = { Level: level, CenterPoint: { X: cp.getLng(), Y: cp.getLat() } };
|
let jsonStr = JSON.stringify(jsonObj);
|
return jsonStr;
|
}
|
|
//设置信息面板提示信息
|
function setInfoText() {
|
let level = _map.getZoom();
|
if (level <= _paras.LevelParas.HideSignUpperLimit) {
|
let info1 = "地图显示区域过广，地图信息处于隐藏状态";
|
let info = info1;
|
document.getElementById('info_text').innerText = info;
|
}
|
else {
|
if (isEmpty(_allSignObjs)) {
|
_allSignObjs = [];
|
}
|
let info_firehydrant = "消火栓：" + _allSignObjs.filter(function (item, index, array) { return item.SignType == sign_type.FireHydrant; }).length + "\n";
|
let info_building = "建筑物：" + _allSignObjs.filter(function (item, index, array) { return item.SignType == sign_type.Building }).length + "\n";
|
let info_firepool = "消防水池：" + _allSignObjs.filter(function (item, index, array) { return item.SignType == sign_type.FirePool }).length + "\n";
|
let info_naturallake = "自然湖泊：" + _allSignObjs.filter(function (item, index, array) { return item.SignType == sign_type.NaturalLake }).length + "\n";
|
let info1 = info_firehydrant + info_building + info_firepool + info_naturallake;
|
|
let info = info1;
|
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 locateByPoint(p) {
|
if (isEmpty(p)) {
|
return;
|
}
|
let lnglat = [p.X, p.Y];
|
let marker = new AMap.Marker({
|
position: lnglat,
|
icon: new AMap.Icon({
|
size: new AMap.Size(32, 32), //图标大小
|
imageOffset: new AMap.Pixel(0, 0)
|
})
|
});
|
_map.setFitView(marker);
|
}
|
|
//以一个区域为中心进行显示
|
function locateByPoints(ps) {
|
if (isEmpty(ps)) {
|
return;
|
}
|
let lnglats = ps.map(function (item, index, array) { return [item.X, item.Y]; });
|
let polygon = new AMap.Polygon({
|
path: lnglats,//设置多边形边界路径
|
strokeColor: "#FF33FF", //线颜色
|
strokeOpacity: 0.2, //线透明度
|
strokeWeight: 3, //线宽
|
fillColor: "#1791fc", //填充色
|
fillOpacity: 0.35//填充透明度
|
});
|
_map.setFitView(polygon);
|
}
|
|
//地图模板样式
|
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>
|
