/**
* 创建者:王成
* 创建日期:2021年11月8日
* 描述:三维地图操作
*/
/**
* 地图服务相关地址
*/
var serverBaseURL = "http://218.59.194.74";
var agsServerPort = "6080";
/**
* 地图API 必须调用init方法 才能正常使用
*/
var gisAPI = undefined;
/**
* 案件图层特殊处理
*/
var isDrawCaseLabel = false; //案件图层是否显示 案件标注是否绘制
var caseLayerId = 'map_case_polygon'; //案件图层的Id
/**
* 图层类型
*/
var layerType = {
mapboxLayer: 'mapboxLayer', //Mapbox图层
onLineRaster: 'onLineRaster', //在线卫星图层
onLineVector: 'onLineVector', //在线标注地图
wmts: 'wmts', //wmts图层
agsVectorServer: 'agsVectorServer', //ArcGIS矢量服务图层
tilesets: 'tilesets', //3D图层
glbs: 'glbs', //glb图层
agsVectorServerToo: 'agsVectorServerToo', //特殊测试图层
geoJson: 'geoJson', //geoJson数据
}
var nodeFather = ['基础数据', '业务数据', '影像数据'];
/**
* 图层配置数组
*/
var layerConfigs = [];
/**
* 加载Mapbox图层
* @param {boolena} visible 是否显示
*/
function loadMapboxLayer(visible) {
layerConfigs.push({
layId: 'mapBoxLayer',
layName: '暗夜版底图',
layType: layerType.mapboxLayer,
isShow: visible,
fatherIdx: 0,
config: {
id: 'mapBoxLayer',
}
});
}
/**
* 加载在线地图
* @param {boolena} visible 是否显示
*/
function loadMapOnline(visible) {
layerConfigs.push({
layId: 'onLineVector',
layName: '天地图',
layType: layerType.onLineVector,
isShow: visible,
fatherIdx: 0,
config: {
id: 'onLineVector',
}
});
}
/**
* 加载影像图
* @param {boolean} 是否显示
*/
function loadMapRaster(visible) {
layerConfigs.push({
layId: 'xz_yxt',
layName: '影像图',
layType: layerType.wmts,
isShow: visible,
fatherIdx: 2,
config: {
id: 'xz_yxt',
url: serverBaseURL + ':' + agsServerPort +
'/arcgis/rest/services/LYLSQ_YX_102100_202105/MapServer/WMTS',
minLevel: 0,
maxLevel: 19,
isshow: true,
alpha: 0.75,
}
});
}
/**
* 加载现状图
* @param {boolean} visible 是否显示
*/
function loadMapCurrentStation(visible) {
layerConfigs.push({
layId: 'map_xzt',
layName: '现状图',
layType: layerType.wmts,
isShow: visible,
fatherIdx: 1,
config: {
id: 'map_xzt',
url: serverBaseURL + ':' + agsServerPort +
'/arcgis/rest/services/LYLSQ_XZT_102100_202009/MapServer/WMTS',
minLevel: 0,
maxLevel: 19,
isshow: true,
alpha: 0.9,
},
});
}
/**
* 添加镇区规划
* @param {boolean} visible 是否显示
*/
function loadMapPlaning(visible) {
layerConfigs.push({
layId: 'map_ght',
layName: '规划图',
layType: layerType.wmts,
isShow: visible,
fatherIdx: 1,
config: {
id: 'map_ght',
url: serverBaseURL + ':' + agsServerPort +
'/arcgis/rest/services/LYLSQ_GHT_102100_202009/MapServer/WMTS',
minLevel: 0,
maxLevel: 19,
isshow: true,
alpha: 0.9,
},
});
}
/**
* 加载镇界
* @param {boolean} visible 是否显示
*/
function loadMapTown(visible) {
layerConfigs.push({
layId: 'map_town',
layName: '镇界',
layType: layerType.agsVectorServer,
isShow: visible,
fatherIdx: 1,
config: {
id: 'map_town',
url: serverBaseURL + ':' + agsServerPort + '/arcgis/rest/services/LYLSQ_RE_WEB_V3/MapServer',
layers: [2],
isQuery: false,
label: {
url: serverBaseURL + ':' + agsServerPort + '/arcgis/rest/services/LYLSQ_RE_WEB_V3/MapServer/2',
showField: 'XZQMC',
size: 30,
linespace: 12,
display: 500000,
family: 'SimHei',
lng: 'LNG',
lat: 'LAT',
alt: 'ALT',
color: '102,152,61,1',
image: 'ico_village.png',
key: 'XZQMC',
},
}
});
}
/**
* 添加村界
* @param {boolean} visible 是否显示
*/
function loadMapVillage(visible) {
layerConfigs.push({
layId: 'map_village',
layName: '村庄',
layType: layerType.wmts,
isShow: visible,
fatherIdx: 1,
config: {
id: 'map_village',
url: serverBaseURL + ':' + agsServerPort +
'/arcgis/rest/services/LYLSQ_XZQ_CJ_102100/MapServer/WMTS',
minLevel: 0,
maxLevel: 19,
isshow: true,
alpha: 0.9,
},
});
}
/**
* 加载图斑
* @param {boolean} visible 是否显示
*/
function loadMapCasePolygon(visible) {
layerConfigs.push({
layId: caseLayerId,
layName: '案件图斑',
layType: layerType.agsVectorServer,
isShow: visible,
fatherIdx: 1,
config: {
id: caseLayerId,
url: serverBaseURL + ':' + agsServerPort + '/arcgis/rest/services/LYLSQ_RE_WEB_V3/MapServer',
layers: [1],
isQuery: false,
}
});
}
/**
* 加载实景数据
* @param {boolean} visible 是否显示
*/
function loadMapVillageTileset(visible) {
var tilesetUrls = [];
tilesetUrls.push('http://218.59.194.82:13080/crdata/sdly/crtiles/tileset.json');
layerConfigs.push({
layId: '3d_data01',
layName: '三维实景',
layType: layerType.tilesets,
isShow: visible,
fatherIdx: 0,
config: {
id: '3d_data01',
isshow: true,
url: tilesetUrls,
}
});
}
/**
* strLng:117.834,
strLat:36.221,
endLng:118.108,
endLat:36.474,
* 添加旋转区域
*/
function appendRotateArea() {
gisAPI.addRotateArea({
strLng: 118.050,
strLat: 34.953,
endLng: 118.530,
endLat: 35.434,
northImage: 'zhibei.png',
scaleImage: 'kedu.png'
})
}
/**
* 添加图层
* @param {Object} layerId 图层Id
*/
function appendLayer(layerId) {
for (var i = 0; i < layerConfigs.length; i++) {
var layConfig = layerConfigs[i];
if (layConfig.layId == layerId) {
if (layConfig.layType == layerType.onLineVector) {
gisAPI.addOnlineVectorLayer(layConfig.config);
} else if (layConfig.layType == layerType.agsVectorServer) {
gisAPI.addAGSVectorServer(layConfig.config);
} else if (layConfig.layType == layerType.wmts) {
gisAPI.addWmtsTileLayer(layConfig.config);
} else if (layConfig.layType == layerType.tilesets) {
gisAPI.add3DTilesets(layConfig.config);
} else if (layConfig.layType == layerType.glbs) {
gisAPI.addGlbs(layConfig.config);
} else if (layConfig.layType == layerType.agsVectorServerToo) {
gisAPI.addAGSVectorServerToo(layConfig.config);
} else if (layConfig.layType == layerType.mapboxLayer) {
gisAPI.addMapboxLayer(layConfig.config);
} else if (layConfig.layType == layerType.geoJson) {
gisAPI.addGeoJSONLayer(layConfig.config);
}
break;
}
}
}
/**
* 移除图层
* @param {Object} layerId 图层Id
*/
function removeLayer(layerId) {
gisAPI.removeLayer(layerId);
}
/**
* 图层初始化显示
*/
function layerInit() {
/* 进入中国位置 */
gisAPI.setMapRange({
lng: 103.84, //经度
lat: 31.15, // 维度
alt: 24000000, // 高度
heading: 0, //偏航
pitch: -90, //俯仰,人如果在赤道上空,俯仰角为0可见地球。如果在北纬,俯仰角为负才能见地球
roll: 0.0 //翻滚
})
/* 飞行到指定位置 */
gisAPI.flyToRectangle({
strLng: 118.050,
strLat: 34.953,
endLng: 118.530,
endLat: 35.434,
success: function() {
/* 加载初始图层 */
for (var i = 0; i < layerConfigs.length; i++) {
gisAPI.addBeforeLayerId(layerConfigs[i].layId);
/* 初始化显示图层 */
if (layerConfigs[i].isShow) {
appendLayer(layerConfigs[i].layId);
}
}
/* 增加酷炫效果 */
appendRotateArea();
}
});
}
/**
* 以下代码为注册地图事件
*/
/**
* 注册地图范围变化事件
* @param {Object} objMap 地图实例
*/
function registerMapAreaChange(objMap) {
objMap.onExtentChange = function(event) {
/* 打印当前地图范围 */
// console.log(JSON.stringify(event));
// gisAPI.addAreaRectangle({
// strLng:event.west,
// strLat:event.south,
// endLng:event.east,
// endLat:event.north,
// });
if (event.height < 1500 && (event.pitch >= -90 && event.pitch <= -40)) {
/* 判断是否查询绘制标注 如果不绘制 则无需执行 */
if (isDrawCaseLabel == true) {
//queryCaseLavelsByRect(event);
}
//queryPlanningData(event);
}
};
}
/**
* 注册地图移动事件
* @param {Object} objMap 地图实例
*/
function resgisterMapMoving(objMap) {
objMap.onMouseMove = function(event) {
var msgHtml = "";
// msgHtml += " 屏幕坐标(" + event.screenX.toFixed(3) + "," + event.screenY.toFixed(3) + ")";
msgHtml += "
经度" + event.mapX + "
";
msgHtml += "纬度" + event.mapY + "
";
msgHtml += "视场角" + Math.abs(event.pitch).toFixed(2) + "
";
msgHtml += "视距" + event.height.toFixed(2) + "
";
//console.log(msgHtml);
$("#divButtomInfo").html(msgHtml);
}
}
/* 查询气泡窗口 */
var CaseQueryWindow = $("#divCaseQueryWindow");
/**
* 注册地图场景变化事件
* @param {Object} objMap 地图实例
*/
function registerPostSceneChange(objMap) {
objMap.onPostSceneChange = function(event) {
}
}
/**
* 注册查询工具弹出
* @param {Object} objMap 地图实例
*/
function registerPopoverQueryTool(objMap) {
objMap.onPopoverQueryTool = function(param) {
/* 判断查询类型 如果是点查询 不弹出 直接查询 区域查询则弹出 */
if (param.queryType == 'point') {
/* 赋值气泡窗口的查询范围属性 */
CaseQueryWindow.attr("extent", param.extent);
/* 开始查询 */
startQueryCasesFromMap();
} else {
setCaseQueryWindowLocation(param.x, param.y);
CaseQueryWindow.show();
/* 赋值气泡窗口的定位属性 */
CaseQueryWindow.attr("location", param.lng + "," + param.lat + "," + param.alt);
/* 赋值气泡窗口的查询范围属性 */
CaseQueryWindow.attr("extent", param.extent);
}
}
}
/**
* @param {float} pointScreenX 气泡窗口关联屏幕点的x位置
* @param {float} pointScreenY 气泡窗口关联屏幕点的y位置
*/
function setCaseQueryWindowLocation(pointScreenX, pointScreenY) {
CaseQueryWindow.css('top', pointScreenY - CaseQueryWindow.height() - 15);
CaseQueryWindow.css('left', pointScreenX - CaseQueryWindow.width() / 2);
}
/**
* 页面初始化 只有在第一次的时候加载显示
*/
function pageInit() {
/**
* 具体操作
*/
/* 地图管理器初始化 */
getNetImageRootURL(function(rootUrl) {
/* 初始化地图 */
// if (document.getElementById("map3d") != undefined) {
// gisAPI = new CrMap({
// selector: 'map3d',
// serverUrl: rootUrl + 'img/',
// });
// muiToast('三维地图初始化完成!');
// } else {
// muiAlert('地图控件未定义','提示');
// }
gisAPI = new CrMap({
selector: 'map3d',
serverUrl: rootUrl + 'img/',
});
/* 设置地形 */
if (gisAPI != undefined) {
/* 添加地形 */
gisAPI.setTerrainLayer({
url: 'http://218.59.194.82:13080/crdata/shandong/dem', //http://218.59.194.82:9080/crdem http://218.59.194.82:9089/bsdem
});
/* 注册地图范围变更事件 */
registerMapAreaChange(gisAPI);
/* 注册地图移动事件 */
resgisterMapMoving(gisAPI);
/* 注册地图场景变化事件 */
registerPostSceneChange(gisAPI);
/* 注册查询弹出工具事件 */
registerPopoverQueryTool(gisAPI);
} else {
muiAlert('gpsAPI未定义', '警告');
}
/* 加载Mapbox底图 */
loadMapboxLayer(true);
/* 加载天地图 */
loadMapOnline(false);
/* 加载影像图 */
loadMapRaster(true);
/* 加载现状图 */
loadMapCurrentStation(false);
/* 加载规划图 */
loadMapPlaning(false);
/* 加载镇界 */
loadMapTown(true);
/* 加载村界 */
loadMapVillage(false);
/* 加载案件图斑 */
loadMapCasePolygon(isDrawCaseLabel);
/* 加载实景数据 */
loadMapVillageTileset(false);
/* 图层初始化 */
layerInit();
});
}
function queryPlanningData(options) {
var geometry = options.west + "," + options.south + "," + options.east + "," + options.north;
console.log("当前范围:" + geometry);
//查询数据
gisAPI.addFeaturesFromServerByPolygon({
geometry: geometry,
geometryType: 'Envelope',
fields: 'YSDM',
url: 'http://218.59.194.74:6080/arcgis/rest/services/LYLSQ_RE_WEB_V3/MapServer/5'
}, function(resData) {
console.log("查询数量:" + resData.features.length);
appendPlanFeatureToMap(resData.features);
}, function(err) {
console.log("错误:" + err);
});
}
function appendPlanFeatureToMap(featureData){
/* 先删除全部已绘制数据 */
gisAPI.removeEntityByName('planEntity');
for(var i in featureData){
var feature = featureData[i];
var points = [];
var ring0 = feature.geometry.rings[0];
for(var idx in ring0){
points.push({
lng:ring0[idx][0],
lat:ring0[idx][1]
})
}
gisAPI.addPolygonEntityTest({
config:{
name:'planEntity',
},
description:{
name:'123',
},
color:{
r:255,
g:0,
b:0,
a:0.75
},
points:points,
})
}
}
/**
* 根据区域查询案件图斑标注
* @param {JSON} options 配置项
*/
function queryCaseLavelsByRect(options) {
/* 构建查询模型 */
var iData = {
slng: options.west,
slat: options.south,
elng: options.east,
elat: options.north
}
/* 开始联网查询 */
sendAjax({
data: iData,
type: 'post',
url: 'appQueryCaseLabelsByRect',
success: function(items) {
var promise = gisAPI.removeAllCaseLabel();
promise.then(function(isComplete) {
/* 进行展示之前先计算高程 */
var points = [];
for (var i = 0; i < items.length; i++) {
points.push({
lng: items[i].lng,
lat: items[i].lat,
});
}
/* 计算高度 */
gisAPI.calculateAltitude({
points: points,
success: function(heights) {
for (var i = 0; i < items.length; i++) {
var imgName = "img_case_wait_assign.png";
var estate = items[i].estate;
if (estate == caseState.stateWaitAssign) {
imgName = "img_case_wait_assign.png";
} else if (estate == caseState.stateWaitCheck) {
imgName = "img_case_wait_check.png";
} else if (estate == caseState.stateWaitRepeat) {
imgName = "img_case_wait_flight.png";
} else if (estate == caseState.stateWaitVerify) {
imgName = "img_case_wait_verify.png";
} else if (estate == caseState.stateClose) {
imgName = "img_case_close.png";
}
/* 绘制试试 */
gisAPI.addCaseLabel({
lng: items[i].lng,
lat: items[i].lat,
alt: heights[i],
text: items[i].casenum,
image: imgName,
});
}
console.log("本次查询的数据量:" + items.length);
}
})
})
},
error: function(err) {
}
});
}
/**
* 函数相关
*/
/**
* 图层控制
* @param {Object} obj checkBox
* @param {JSON} layer 图层
*/
function LayerControl(obj, layer) {
if (obj.checked) {
appendLayer(layer.layId);
setLayerState(layer.layId, true);
/* 案件图层需要进行特殊处理 */
if (layer.layId == caseLayerId) {
isDrawCaseLabel = true;
}
} else {
removeLayer(layer.layId);
setLayerState(layer.layId, false);
/* 案件图层需要进行特殊处理 */
if (layer.layId == caseLayerId) {
var promise = gisAPI.removeAllCaseLabel();
promise.then(function(isComplete) {
isDrawCaseLabel = false;
});
}
}
/* 更新场景 */
gisAPI.updateSence();
}
/**
* @param {Object} obj 点击对象
* @param {string} layId 图层Id
*/
function LayerTo(obj, layId) {
var layer = getLayerConfig(layId);
if (layer != undefined) {
if (layer.isShow == false) {
muiToast("该图层未显示,无法定位!");
} else {
// alert(window[layer.layId]);
gisAPI.flyTo(window[layer.layId]);
}
}
}
/**
* 设置图层树的节点是否选中
* @param {Object} layId 节点Id
* @param {Object} isShow 是否选中
*/
function setLayerState(layId, isShow) {
for (var i = 0; i < layerConfigs.length; i++) {
if (layerConfigs[i].layId == layId) {
layerConfigs[i].isShow = isShow;
break;
}
}
}
/**
* 根据图层Id获取图层配置JSON
* @param {string} layId 图层Id
*/
function getLayerConfig(layId) {
for (var i = 0; i < layerConfigs.length; i++) {
if (layerConfigs[i].layId == layId) {
return layerConfigs[i];
}
}
return undefined;
}
/* 案件标注查询模型 */
var queryCaseLabelsModel = {
page: 0,
/* 查询的起始位置 */
limit: 3000,
/* 每次查询的数量 */
}
/* 案件标注数据数组 [{},{},...] */
var caseLabelsData = [];
/**
* 查询案件的标注数量
* @param {JSON} qModel 查询模型
*/
function queryCalseLabels(qModel) {
sendAjax({
data: qModel,
type: 'post',
url: 'appQueryCaseLabels',
waitMessage: '正在加载案件图斑标注数据...',
success: function(resData) {
// alert(JSON.stringify(resData));
var items = resData[0].items;
if (items.length == queryCaseLabelsModel.limit) {
for (var i = 0; i < items.length; i++) {
caseLabelsData.push(items[i]);
/* 绘制试试 */
gisAPI.addCaseLabel({
lng: items[i].lat,
lat: items[i].lng,
alt: items[i].alt,
text: items[i].cstate,
});
}
/* 移动起始点 */
queryCaseLabelsModel.page = queryCaseLabelsModel.page + 1;
/* 继续查询 */
queryCalseLabels(queryCaseLabelsModel);
} else {
for (var i = 0; i < items.length; i++) {
caseLabelsData.push(items[i]);
}
muiAlert(caseLabelsData.length, "提示");
}
},
error: function(err) {
muiAlertError(err);
}
})
}
/**
* 定位
* @param {float} longitude 定位点经度
* @param {float} latitude 定位点纬度
* @param {string} title 案件编号
* @param {string} state 案件状态
* @param {string} area 图斑面积
*/
function mapLocation(longitude, latitude, title, state, area) {
printToConsole("定位点位置 lng=" + longitude + " lat=" + latitude);
gisAPI.flyToo({
lng: longitude,
lat: latitude - 0.008,
alt: 500,
heading: 0,
pitch: -45,
duration: 3,
success: function() {
gisAPI.appendLabelToMap({
title: title,
state: '<' + state + '>',
area: '[' + area + ']',
lng: longitude,
lat: latitude,
})
}
});
}
/**
* 按钮点击事件
*/
/**
* 图层控制事件
* @param {Object} btnObj 图层控制按钮
*/
function EventClick_Layer(btnObj) {
var mainHtml = "";
/* 初始化图层控制控件 */
for (var i = 0; i < nodeFather.length; i++) {
mainHtml += "" + nodeFather[i] + "
"
mainHtml += ""
}
$("#divLayerList").html(mainHtml);
for (var i = 0; i < layerConfigs.length; i++) {
var layer = layerConfigs[i];
var domDiv = document.createElement('div');
domDiv.className = 'mui-input-row mui-checkbox';
var strHtml = "";
strHtml += "";
if (layer.isShow) {
strHtml += "";
if (layer.layType == layerType.tilesets) {
strHtml += "";
}
domDiv.innerHTML = strHtml;
$("#layerGroup" + layer.fatherIdx).append(domDiv);
}
mui('#layerPopover').popover('toggle', btnObj);
}
/**
* 长度测量
* @param {Object} btnObj 按钮
*/
function EventClick_MeasureLength(btnObj) {
gisAPI.measureLength(function(msg) {
muiToast(msg);
CaseQueryWindow.hide();
});
}
/**
* 面积测量
* @param {Object} btnObj 按钮
*/
function EventClick_MeasureArea(btnObj) {
gisAPI.measureArea(function(msg) {
muiToast(msg);
CaseQueryWindow.hide();
});
}
/**
* GPS定位
* @param {Object} btnObj 按钮
*/
function EventClick_Location(btnObj) {
}
/**
* 显示全图
* @param {Object} btnObj 按钮
*/
function EventClick_AllView(btnObj) {
/* 进入中国位置 */
gisAPI.setMapRange({
lng: 103.84, //经度
lat: 31.15, // 维度
alt: 24000000, // 高度
heading: 0, //偏航
pitch: -90, //俯仰,人如果在赤道上空,俯仰角为0可见地球。如果在北纬,俯仰角为负才能见地球
roll: 0.0 //翻滚
})
/* 飞行到指定位置 */
gisAPI.flyToRectangle({
strLng: 118.050,
strLat: 34.953,
endLng: 118.530,
endLat: 35.434,
});
}
/**
* 开始从地图上查询案件
*/
function startQueryCasesFromMap() {
var extent = $("#divCaseQueryWindow").attr("extent");
/* 隐藏查询气泡窗口 */
CaseQueryWindow.hide();
/* 恢复查询工具初始化状态 */
gisAPI.measureClear();
/* 开始查询 */
caseBase.queryDataByExtent(extent);
}
/**
* 坐标查询
* @param {Object} btnObj 按钮
*/
function EventClick_Query_Coords(btnObj) {
console.log("添加要素!");
gisAPI.addFeaturesFromServerByPolygon({
geometry: '118.2485795,35.2265747750001,118.2534336,35.2279738980001,118.259044369,35.226060811,118.259429842,35.2202501680001,118.254076054,35.2193507310001,118.248465285,35.2202787210001,118.2485795,35.2265747750001',
fields: 'DLMC',
url: 'http://218.59.194.74:6080/arcgis/rest/services/LYLSQ_RE_WEB_V1/MapServer/12',
}, function(resData) {
console.log(JSON.stringify(resData));
}, function(err) {
muiToast(err);
});
}
/**
* 案件点查询
* @param {Object} btnObj 按钮
*/
function EventClick_Query_Point(btnObj) {
gisAPI.casePointQuery(function(msg) {
muiToast(msg);
CaseQueryWindow.hide();
});
}
/**
* 案件区域查询
* @param {Object} btnObj 按钮
*/
function EventClick_Query_Area(btnObj) {
gisAPI.casePolygonQuery(function(msg) {
muiToast(msg);
CaseQueryWindow.hide();
});
}
/**
* 清扫工具
* @param {Object} btnObj 按钮
*/
function EventClick_Clean(btnObj) {
gisAPI.measureClear(function() {
CaseQueryWindow.hide();
});
/* 输出相机参数 */
var result = gisAPI.exportCameraViewParams();
console.log(JSON.stringify(result));
}
/**
* 开始查询
* @param {Object} btnObj 案件查询按钮
*/
function EventClick_Case_Query(btnObj) {
startQueryCasesFromMap();
}
/**
* 查询结果窗口显示/隐藏
* @param {Object} btnObj 按钮
*/
function EventClick_QueryWindow(btnObj) {
mui('#queryResultPopover').popover('toggle');
}