/*+++++++++++++++地图管理类 所有与地图相关的内容均位于此++++++++++++++++++*/ var jtMapKit; //主地图组件 /* 图层类型 */ var LayerType = { /** * 业务图层 */ server: 'server', /** * 基础图层 */ base: 'base', } /* 初始地图中心位置 */ var initMapCenter = { longitude: 118.2192, latitude: 35.1711, scale: 5000, } /* 定位比例尺 */ var locationScale = 2500; /* 案件图层的查询URL及数据过滤条件 */ var caseServerUrl = undefined; var caseQueryFilter = undefined; /** * 加载地图 * @param {string} MainDivID 地图容器Id * @param {JSON} initLocation 初始化位置 */ function MapInit(MainDivID, initLocation) { getNetImageRootURL(function(rootUrl) { //初始化地图组件 jtMapKit = new JTMapKit({ selector: MainDivID, serverUrl: rootUrl + "/img/", }); //给地图绑定测量事件 jtMapKit.onMeasureEventComplete = function(result) { mui.alert(result); } /* 给地图绑定查询回调事件 */ jtMapKit.onQueryTackEvent = function(features) { showQueryTaskResult(features); } //挂接主地图的加载事件 jtMapKit.onViewReady = function() { jtMapKit.loadBaseMap(function() { //加载影像地图 LoadRasterServer(); //加载矢量地图 LoadVectorServer(initLocation); }); jtMapKit.setUIZoomVisible(false); jtMapKit.setUIScaleBarVisible(true); } }); } var layerIndex = 1; /** * 加载栅格服务 */ function LoadRasterServer() { getSaveUserLayers({ success: function(jsonLayers) { for (var i = 0; i < jsonLayers.length; i++) { var rasLayer = jsonLayers[i] //获取当前图层 if (rasLayer.layerType == 'base') { if(rasLayer.layerIsVisible == '1'){ jtMapKit.addTileLayer({ url: rasLayer.layerURL, id: 'baseYxtMapLayer', }, parseInt(layerIndex), rasLayer.eName, function() { printToConsole(rasLayer.cName + "图层加载完成!"); }); layerIndex = layerIndex + 1; break; } } } }, error: function(err) { muiAlert(err, "错误"); } }) } /** * 加载矢量服务 * @param {JSON} initLocation */ function LoadVectorServer(initLocation) { getSaveUserLayers({ success: function(jsonLayers) { //组装一个矢量服务过滤内容 var serverSubLayers = []; //服务的子图层 for (var i = 0; i < jsonLayers.length; i++) { var vecLayer = jsonLayers[i] //获取当前图层 if (vecLayer.layerType == 'server') { serverSubLayers.push({ url: vecLayer.layerURL, id: parseInt(vecLayer.lyrIdx), title: vecLayer.eName, visible: vecLayer.layerIsVisible == "1" ? true : false, source: { type: 'map-layer', mapLayerId: parseInt(vecLayer.lyrIdx), }, definitionExpression: vecLayer.layerIsFilter }); /* 案件条件保存 */ if (vecLayer.isCase === '1') { caseServerUrl = vecLayer.layerURL + "/" + vecLayer.lyrIdx; caseQueryFilter = vecLayer.layerIsFilter; } } } //对数组进行倒序排列 图层特殊需要 必须这样 否则会导致矢量数据无法加载 serverSubLayers = serverSubLayers.sort(function(json1, json2) { return json2.id - json1.id; }); jtMapKit.addDynamicLayer({ url: jsonLayers[0].layerURL, sublayers: serverSubLayers, }, 2, "矢量服务", function(fullExtent) { /* 判断是初始化时是定位需求还是普通需求 */ if (initLocation != undefined) { initMapCenter.longitude = parseFloat(initLocation.longitue); initMapCenter.latitude = parseFloat(initLocation.latitude); initMapCenter.scale = locationScale; } jtMapKit.setCenter([initMapCenter.longitude, initMapCenter.latitude]); jtMapKit.setScale(initMapCenter.scale); }); }, error: function(err) { muiAlertError(err); } }) } /** * 定位地图位置 * @param {string} longitude 定位经度 * @param {string} latitude 定位纬度 */ function mapLocation(longitude, latitude) { var iLongitude = parseFloat(longitude); var iLatitude = parseFloat(latitude); jtMapKit.setCenter([iLongitude, iLatitude]); jtMapKit.setScale(locationScale); } /** * 切换底图为影像底图 */ function EventClick_ShowRaster() { jtMapKit.loadBaseRasterMap(function() { }); } /** * 切换底图为标准底图 */ function EventClick_ShowVector() { jtMapKit.loadBaseVectorMap(function() { }); } /** * 测量长度 */ function EventClick_MeasureLength() { muiToast("地图单击测量长度!"); jtMapKit.measureLength(); } /** * 测量面积 */ function EventClick_MeasureArea() { muiToast("地图单击测量面积!"); jtMapKit.measureArea(); } /** * 定位位置 */ function EventClick_Location() { //调用GPS定位方法 plusGetLocation(function(latitude, longitude) { jtMapKit.zoomTo(longitude, latitude); muiToast("定位成功!"); }); } /** * 地图初始化 */ function EventClick_MapInit() { jtMapKit.setCenter([initMapCenter.longitude, initMapCenter.latitude]); jtMapKit.setScale(initMapCenter.scale); muiToast("地图已定位至初始位置!"); } /** * 查询地图上点击位置的坐标 */ function EventClick_QueryCoord() { muiToast("地图单击,获取位子坐标!"); jtMapKit.measureCoordinate(); } /** * 输入坐标进行查询定位 */ function EventClick_CoordQuery() { mui('#popoverCoordLocation').popover('toggle'); } /** * 输入定位按钮 */ function EventClick_InputLocation() { var longitude = $("#iLongitude").val(); var latitude = $("#iLatitude").val(); if (longitude == '') { muiAlert("请输入经度", "提示", function() { $("#iLongitude").focus(); }); return; } if (latitude == '') { muiAlert("请输入纬度", "提示", function() { $("#iLatitude").focus(); }); return; } var fLongitude = parseFloat(longitude); var fLatitude = parseFloat(latitude); if (fLongitude < 100 || fLongitude > 150) { muiAlert("经度数值必须在100~150之间", "提示", function() { $("#iLongitude").focus(); }); return; } if (fLatitude < 20 || fLatitude > 50) { muiAlert("纬度数值必须在20~50之间", "提示", function() { $("#iLatitude").focus(); }); return; } jtMapKit.AddPointToMap(fLongitude, fLatitude); } /** * 地图上点击查询案件 */ function EventClick_PointQuery() { muiToast("地图单击案件图斑进行查询!"); jtMapKit.queryTackPoint({ url: caseServerUrl, filter: caseQueryFilter, }); } /** * 地图上区域查询案件 */ function EventClick_AreaQuery() { // mui('#queryResultPopover').popover('toggle'); muiToast("地图上单击绘制区域,点击查询按钮进行查询!"); jtMapKit.queryTackPolygon({ url: caseServerUrl, filter: caseQueryFilter, }); } /** * 查询窗口管理 控制 显示\隐藏 */ function EventClick_QueryWindow() { mui('#queryResultPopover').popover('toggle'); } /** * 清除绘制内容 恢复地图初始状态 */ function EventClick_Clean() { jtMapKit.DeleteTempDraw(); } /** * 分屏对比 */ function EventClick_SplitScreen() { alert(mui('.mui-off-canvas-wrap')); mui('.mui-off-canvas-wrap').offCanvas('show'); } /** * 图层控制事件 * @param {Object} btnObj 图层控制按钮 */ function EventClick_Layer(btnObj) { domTableYW.innerHTML = ""; domTableYX.innerHTML = ""; getSaveUserLayers({ success: function(jsonLayers) { for (var i = 0; i < jsonLayers.length; i++) { var layer = jsonLayers[i]; var parLayer = { layerType:layer.layerType, eName:layer.eName, }; var domDiv = document.createElement('div'); if (layer.layerType == LayerType.server) { var mmm = "
"; mmm += ""; if (layer.layerIsVisible == "1") { mmm += ""; } else if (layer.layerType == LayerType.base) { var mmm = "
"; mmm += "" if (layer.layerIsVisible == "1") { mmm += ""; } mmm += "
"; domDiv.innerHTML = mmm; if (layer.layerType == LayerType.server) { domTableYW.appendChild(domDiv); } else if (layer.layerType == LayerType.base) { domTableYX.appendChild(domDiv); } } /* 打印 */ //console.log(domTableYW.innerHTML); mui('#layerPopover').popover('toggle', btnObj); }, error: function(err) { muiAlertError(err); } }) } /** * 图层控制 * @param {Object} obj checkBox * @param {Object} layer 图层 */ function LayerControl(obj, layer) { getSaveUserLayers({ success: function(jsonLayers) { var setLayer = undefined; if (layer.layerType == LayerType.server) { for (var i = 0; i < jsonLayers.length; i++) { var tempLayer = jsonLayers[i]; if (tempLayer.eName == layer.eName) { tempLayer.layerIsVisible = obj.checked ? "1" : "0"; setLayer = tempLayer; break; //退出循环 } } //再次保存 saveUserLayers({ layers: jsonLayers, success: function() { //控制图层显示或隐藏 jtMapKit.setVisibleByName(setLayer.eName, setLayer.layerIsVisible == "1" ? true : false); }, error: function(err) { muiAlertError(err); } }) } if (layer.layerType == LayerType.base) { var player = jtMapKit.findLayer("baseYxtMapLayer"); if (player != undefined) jtMapKit.removeLayer(player); for (var i = 0; i < jsonLayers.length; i++) { var tempLayer = jsonLayers[i]; if (tempLayer.eName == layer.eName) { tempLayer.layerIsVisible = obj.checked ? "1" : "0"; setLayer = tempLayer; break; //退出循环 } } //再次保存 saveUserLayers({ layers: jsonLayers, success: function() { //控制图层显示或隐藏 jtMapKit.addTileLayer({ url: layer.layerURL, id: 'baseYxtMapLayer', }, 1, "影像图"); }, error: function(err) { muiAlertError(err); } }) } }, error: function(err) { muiAlertError(err); } }) } /** * 展示查询结果 * @param {Array[{FeaJSON},{FeaJSON},...]} features 查询要素集 */ function showQueryTaskResult(features) { if (features.length == 0) { muiAlert('未查询到任何案件!', '提示'); } else { queryCaseIds.length = 0; features.forEach(function(result, index) { queryCaseIds.push(result.attributes.AJH); }); caseBase.queryDataByCaseId(queryCaseIds); } }