LSQZrzyAPP/unpackage/cache/wgt/H5EFBB1F4/js/MapManager3D.js

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

/**
 * 注册地图移动事件
 * @param {Object} objMap 地图实例
 */
function resgisterMapMoving(objMap) {
	objMap.onMouseMove = function(event) {
		var msgHtml = "";
		// msgHtml += "&nbsp;&nbsp;屏幕坐标(" + event.screenX.toFixed(3) + "," + event.screenY.toFixed(3) + ")";
		msgHtml += "<div><span>经度</span><span>" + event.mapX + "</span></div>";
		msgHtml += "<div><span>纬度</span><span>" + event.mapY + "</span></div>";
		msgHtml += "<div><span>视场角</span><span>" + Math.abs(event.pitch).toFixed(2) + "</span></div>";
		msgHtml += "<div><span>视距</span><span>" + event.height.toFixed(2) + "</span></div>";
		//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);

		/* 加载案件图斑 */
		loadMapCasePolygon(isDrawCaseLabel);

		/* 加载实景数据 */
		loadMapVillageTileset(false);

		/* 图层初始化 */
		layerInit();
	});
}

/**
 * 根据区域查询案件图斑标注
 * @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 += "<h5>" + nodeFather[i] + "</h5>"
		mainHtml += "<form id='layerGroup" + i + "' class='mui-input-group'></form>"
	}
	$("#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 += "<label><span class='app-icon app-icon-map-layer-normal'></span>" + layer.layName + "</label>";
		if (layer.isShow) {
			strHtml += "<input name='checkbox' value='Item 1' type='checkbox' checked";
		} else {
			strHtml += "<input name='checkbox' value='Item 1' type='checkbox'";
		}
		strHtml += " onclick=\"LayerControl(this," + JSON.stringify(layer).replace(/\"/g, "'") + ")\"/>";
		if (layer.layType == layerType.tilesets) {
			strHtml += "<span class='app-icon app-icon-map-location cr-layer-control-location'";
			strHtml += " onclick=\"LayerTo(this,'" + layer.layId + "')\"/></span>";
		}
		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) {

}

/**
 * 案件点查询
 * @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');
}