/** * 创建者:王成 * 创建日期: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'); }