wcheng81
/
LSQZrzyAPP


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>自然资源一张图</title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<!-- 引入自定义样式 -->
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<link rel="stylesheet" type="text/css" href="../css/app.new.css" />
		<!-- 引入arcigs在线样式 -->
		<link rel="stylesheet"
			href="http://218.59.194.82:9092/arcgis_js_api/javascript/4.21/esri/themes/light/main.css">
		<!-- 引入案件样式 -->
		<link rel="stylesheet" type="text/css" href="../css/case.css" />
		<!-- 引入弹窗及选择器样式 -->
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css" />
		<!-- 引入地图页面独有样式 -->
		<link rel="stylesheet" type="text/css" href="../css/cr.map.css" />
		<!-- 引入字体 -->
		<link rel="stylesheet" type="text/css" href="../fonts/TTTGB-Medium.css" />
		<link rel="stylesheet" href="../fonts/font-jt.css">
		<!-- 引入占压分析结果集样式 -->
		<link rel="stylesheet" href="../css/csa.count.css">
		<!-- 本页独有样式 -->
		<style>
			/* 弹框的背景 干掉试试 */
			.mui-backdrop.mui-active.mui-backdrop-action {
				display: none;
			}
		</style>
	</head>
	<body>
		<!-- 具备侧滑功能 根容器 -->
		<div id="offCanvasWrapper" class="mui-off-canvas-wrap" style="position: relative;">
			<aside class="mui-off-canvas-right">
				<div class="jt-wrap-right-canvas">
					<div class="jt-wrap-right-head">
						<span id="divTitle"></span>
						<span class="app-icon app-icon-arrow-right"
							onclick="mui('#offCanvasWrapper').offCanvas('close')"></span>
					</div>
					<!-- 具体内容容器 -->
					<div class="jt-wrap-right-content" id="divContent">
					</div>
				</div>
			</aside>
			<!-- 主要内容 -->
			<div class="mui-inner-wrap">
				<div class="mui-content mui-scroll-wrapper">
					<!-- 搜索栏 -->
					<header class="mui-bar cr-bar jt-hide jt-normal-hide" style="z-index: 999;">
						<div class="mui-input-row mui-search">
							<input type="search" id="search" placeholder="支持模糊查询">
							<button class="jt-layer-select-btn jt-hide"><span
									class="app-icon app-icon-map-layer-select"></span></button>
						</div>
					</header>
					<!-- 地图 -->
					<div id="MainMap"
						style="height:103%;width: 103%;position: relative;margin-top: -10px;margin-left: -10px;">
					</div>
					<!-- 左侧工具栏 -->
					<div class="ui-content-padded jt-map-tools"
						style="position: absolute;top: 50px;left: 4px;width: 40px;">
						<!-- 测量长度 -->
						<button data-info="在地图上点击需要测量对象的特征位置,即可实时计算长度并展示" class="mui-btn wc-map-div-btn"
							onclick="EventClick_MeasureLength()">
							<span class="app-icon app-icon-map-measurelength"></span>
							<span>长度量测</span>
						</button>
						<!-- 测量面积 -->
						<button data-info="在地图上点击需要测量的对象特征位置,即可实时计算面积并展示" class="mui-btn wc-map-div-btn"
							onclick="EventClick_MeasureArea()">
							<span class="app-icon app-icon-map-measurearea"></span>
							<span>面积量测</span>
						</button>
						<!-- 地图初始化 -->
						<button data-info="点击即可重置地图范围为初始显示范围" class="mui-btn wc-map-div-btn"
							onclick="EventClick_MapInit()">
							<span class="app-icon app-icon-map-initlocation"></span>
							<span>重置地图</span>
						</button>
						<!-- 地图点击查询坐标 -->
						<button data-info="在地图上需要查询坐标的位置上点击,即可查询该位置的地理坐标" class="mui-btn wc-map-div-btn"
							onclick="EventClick_QueryCoord()">
							<span class="app-icon app-icon-map-querycoord"></span>
							<span>坐标查询</span>
						</button>
						<!-- 输入坐标地图定位-->
						<button data-info="点击后,弹出坐标输入框,输入正确的位置坐标后点击定位,即可在地图上展示坐标位置" class="mui-btn wc-map-div-btn"
							onclick="EventClick_CoordQuery()">
							<span class="app-icon app-icon-map-inputcoord-location"></span>
							<span>坐标定位</span>
						</button>
					</div>
					<!-- 右侧工具栏 -->
					<div class="ui-content-padded jt-map-tools"
						style="position: absolute;top: 50px;right: 4px;width: 40px;">
						<!-- 图层控制 -->
						<button data-info="点击即可打开图层控制窗口,进行图层及标注的显示/隐藏" class="mui-btn wc-map-div-btn"
							onclick="EventClick_Layer(this)">
							<span class="app-icon app-icon-map-layer"></span>
							<span>图层控制</span>
						</button>
						<!-- 点图查询 -->
						<button data-info="点击后，在需要查询的位置单击，即可查询该位置的全部可见图层数据"
							class="mui-btn wc-map-div-btn jt-normal-hide" onclick="EventClick_Query_Point()">
							<span class="app-icon app-icon-map-query-point"></span>
							<span>点击查询</span>
						</button>
						<!-- 区域查询 -->
						<button data-info="点击后，在地图上绘制查询区域，单击开始查询，即可查询该区域内的全部可见图层数据"
							class="mui-btn wc-map-div-btn jt-normal-hide" onclick="EventClick_Query_Polygon()">
							<span class="app-icon app-icon-map-query-polygon"></span>
							<span>区域查询</span>
						</button>
						<!-- 通用选择占压分析 -->
						<button data-info="点击后,选择需要分析的图斑,即可分析选择图斑的占压信息" class="mui-btn wc-map-div-btn jt-normal-hide"
							onclick="EventClick_Select_Spatial_Analysis()">
							<span class="app-icon app-icon-map-case-analysis"></span>
							<span>选择占压</span>
						</button>
						<!-- 通用绘制占压分析 -->
						<button data-info="点击后,绘制占压区域，单击开始分析,对绘制区域内的占压情况进行分析并展示结果"
							class="mui-btn wc-map-div-btn jt-normal-hide"
							onclick="EventClick_Common_Spatial_Analysis()">
							<span class="app-icon app-icon-map-common-analysis"></span>
							<span>区域占压</span>
						</button>
						<!-- 窗口管理 -->
						<button data-info="显示或隐藏信息窗口" class="mui-btn wc-map-div-btn jt-normal-hide"
							onclick="EventClick_QueryWindow()">
							<span class="app-icon app-icon-map-window"></span>
							<span>窗口管理</span>
						</button>
						<!-- 清扫工具 -->
						<button data-info="清除地图上的各类绘制内容" class="mui-btn wc-map-div-btn" onclick="EventClick_Clean()">
							<span class="app-icon app-icon-map-clean"></span>
							<span>清扫工具</span>
						</button>
					</div>
				</div>
				<!-- 蒙版 -->
				<div class="mui-off-canvas-backdrop"></div>
			</div>
		</div>
		<!-- 我的位置 -->
		<button data-info="开启/关闭GPS位置及方位的实时追踪定位" class="mui-btn wc-map-div-btn" onclick="EventClick_Location()"
			style="position: absolute;bottom: 20px;left: 10px;z-index: 999;">
			<span class="app-icon app-icon-map-location"></span>
			<span id="spanLocationLabel">开启定位</span>
		</button>
		<!-- 查询结果弹出层 -->
		<div id="queryResultPopover" class="mui-popover mui-popover-action mui-popover-bottom wc-popover-case">
			<header id="queryResultTitle" class="mui-bar" onclick="mui('#queryResultPopover').popover('hide');">查询结果
			</header>
			<div class="mui-slider" id="slider">
				<!--  mui-slider-loop 如果需要轮循播放需要添加-->
				<div id="caseQueryResult" class="mui-slider-group">
				</div>
			</div>
		</div>
		<!-- 坐标输入定位弹出层 -->
		<div id="popoverCoordLocation" class="mui-popover mui-popover-action mui-popover-bottom wc-popover-coord-input">
			<header class="mui-bar" onclick="mui('#popoverCoordLocation').popover('hide');">输入坐标进行空间定位</header>
			<div>
				<div class="mui-row wc-row wc-input-row">
					<span class="app-icon app-icon-nomarl-location"></span><span>经度</span>
					<div class="mui-input-row">
						<input id="iLongitude" type="text" class="mui-input-clear mui-input f-color"
							placeholder="输入经度118.2282524">
					</div>
				</div>
				<div class="mui-row wc-row wc-input-row">
					<span class="app-icon app-icon-nomarl-location"></span><span>纬度</span>
					<div class="mui-input-row">
						<input id="iLatitude" type="text" class="mui-input-clear mui-input f-color"
							placeholder="输入纬度35.158361">
					</div>
				</div>
				<div class="mui-row wc-row" style="justify-content: flex-end;">
					<button type="button" class="mui-btn mui-btn-primary wc-btn-location"
						onclick="EventClick_InputLocation()">定位</button>
				</div>
			</div>
		</div>
		<!-- 辅助工具弹出框 -->
		<div id="divResult" class="cr-result">
			<div></div>
			<span class="app-icon app-icon-close" onclick="hideNormalResult()"></span>
		</div>
		<!-- 航线查询窗口 -->
		<div id="divFlightQuery" class="jt-line-panel">
			<div class="jt-line-top" onclick="hideFlightLineQueryPopover()">
				<span>飞行航线查询</span>
			</div>
			<div class="jt-line-row">
				<span>选择飞行日期</span>
				<button id="btnFlightDate" class="jt-line-select-btn"
					data-options='{"type":"date","beginYear":2001,"endYear":2035}' value="选择飞行日期">选择飞行日期</button>
			</div>
			<div class="jt-line-row">
				<span>选择巡查人员</span>
				<button id="btnFlightMember" class="jt-line-select-btn" value="选择巡查人员">选择巡查人员</button>
			</div>
			<div class="jt-line-row">
				<div class="jt-line-result">航线查询结果</div>
				<button type="button" class="mui-btn mui-btn-primary app-icon app-icon-menu-query jt-line-btn"
					onclick="event_click_queryLines()">查询</button>
				<button type="button" class="mui-btn mui-btn-royal app-icon app-icon-map-clean jt-line-btn"
					onclick="event_click_clearLines()">清除</button>
			</div>
		</div>
		<!-- 多图层选择容器 -->
		<div class="jt-popover-left">
			<header class="mui-bar" onclick="$(this).parent().animate({right:'100%'})">
				<span class="jt-title">查询结果</span>
				<span class="app-icon app-icon-close-left-arrow jt-icon"></span>
			</header>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<div class="jt-layer-select-content">
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
<!-- 引入mui脚本 -->
<script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入弹窗及选择器脚本 -->
<script src="../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入图表脚本 -->
<script src="../js/ECharts/echarts.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入自定义图表脚本 -->
<script src="../js/CRECharts.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入ArcGIS脚本 -->
<script src="http://218.59.194.82:9092/arcgis_js_api/javascript/4.21/init.js"></script>
<!-- 引入jQuery脚本 -->
<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
<!--引入通用脚本-->
<script src="../js/common.js"></script>
<!-- 引入存储脚本 -->
<script src="../js/save.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入案件脚本 -->
<script src="../js/case.js" type="text/javascript" charset="utf-8"></script>
<!-- 进入ajax脚本 -->
<script src="../js/ajax.js" type="text/javascript" charset="utf-8"></script>
<!--引入地图相关脚本-->
<script src="../js/JTMapKit.js"></script>
<script src="../js/MapManager.js"></script>
<!-- 引入案件基础脚本 -->
<script src="../js/case-list-base.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入webview脚本 -->
<script src="../js/webview.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入执法地图脚本 -->
<script src="../js/map/map.zf.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入普通地图脚本 -->
<script src="../js/map/map.normal.js"></script>
<!-- 本页专用脚本 -->
<script type="text/javascript">
	/* mui初始化 */
	mui.init({
		gestureConfig: {
			longtap: true, //默认为false
		}
	});
	/* 添加地图工具长按提醒 */
	mui('body').on('longtap', '.mui-btn', function() {
		var info = $(this).attr('data-info');
		muiAlert(info, "工具说明");
	});
	/* 必须加 否则将导致数据表无法滚动 */
	mui('.mui-scroll-wrapper').scroll({
		scrollY: true, //是否竖向滚动
		scrollX: true, //是否横向滚动  
		startX: 0, //初始化时滚动至x  
		startY: 0, //初始化时滚动至y  
		indicators: false, //是否显示滚动条  
		deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏  
		bounce: false, //是否启用回弹  
	});
	/* 隐藏全部内容 */
	$(".jt-hide").hide();
	/* 获取通过URL地址调用传递的参数 */
	var param = GetQueryString('type');
	console.log("传递的param", param);
	/* 地图图层保存及组合的key */
	var layerKey = 'map_layer_normal';
	if (param != null) {
		layerKey = "map_layer_" + param;
	}
	/* 隐藏显示结果内容 */
	hideNormalResult();
	/**
	 * plus初始化方法
	 */
	plusInit(function() {
		/* 地图加载前先获取本地存储的地图配置信息 */
		/* 为了存储当前专题地图页面的图层及状态 每一个专题单独本地化保存 */
		/* 先判断该专题是否本地化保存了 */
		getStorage({
			key: layerKey,
			success: function(saveLayer) {
				/* 说明已经该专题的地图页面已经打开过一次 */
				layerConfig = JSON.parse(saveLayer);
				/* 存储专题图层初始化的默认配置 */
				GetAndSaveSubjectLayerMap(layerConfig);
				/* 配置顶部搜索工具 */
				MapToolsAndSearchInitByParam();
				/* 加载初始化 */
				loadInit();
			},
			error: function(err) {
				getSaveUserLayers({
					success: function(saveLayer) {
						/* 存储专题图层初始化的默认配置 */
						GetAndSaveSubjectLayerMap(saveLayer);
						/* 专题默认图层配置的检测 */
						subjectLayerCheck(saveLayer, param);
						/* 配置顶部搜索工具 */
						MapToolsAndSearchInitByParam();
					},
					error: function(err) {
						muiAlertError("图层配置信息获取错误，将无法加载地图！");
					}
				});
			}
		});
		/* 添加水印 */
		watermark({
			watermarl_element: 'MainMap',
			watermark_txt: '金田产业发展（山东）集团有限公司',
		})
	});

	/* 专题图层配置 */
	let subjectLayerMap = undefined;

	/**
	 * 获取并存储专题图层配置数据
	 * @param {JSON} saveLayer 图层数据
	 */
	function GetAndSaveSubjectLayerMap(saveLayer) {
		subjectLayerMap = new Map();
		for (let subjectLayer of saveLayer[0].subjectList) {
			subjectLayerMap.set(subjectLayer.eName, subjectLayer);
		}
	}

	/**
	 * 根据参数完成地图工具及搜索框的初始化
	 */
	function MapToolsAndSearchInitByParam() {
		if (param != null && param == 'zd') {
			$(".jt-normal-hide").show();
			MapQueryConfigInit();
			zf_manyLayerConfigInit(subjectLayerMap.get(param));
		} else if (param != null && param == 'zf') {
			$(".jt-zf-hide").show();
			$(".jt-normal-hide").show();
			MapQueryConfigInit();
			zf_manyLayerConfigInit(subjectLayerMap.get(param));
		} else if (param != null && param == 'ld') {
			$(".jt-ld-hide").show();
			$(".jt-normal-hide").show();
			MapQueryConfigInit();
			zf_manyLayerConfigInit(subjectLayerMap.get(param));
		} else if (param != null && param == 'gh') {
			MapQueryConfigInit();
			/* 配置多图层查询 */
			zf_manyLayerConfigInit(subjectLayerMap.get(param));
			$(".jt-normal-hide").show();
		} else if (param != null && param == 'gd') {
			$(".jt-normal-hide").show();
			MapQueryConfigInit();
			zf_manyLayerConfigInit(subjectLayerMap.get(param));
		} else if (param != null && param == 'location') {
			/* 定位窗口传递 无需查询 */
			$('.ui-content-padded').css({
				top: '10px'
			});
			$(".jt-normal-hide").hide();
		} else if (param != null && param == 'yj') {
			MapQueryConfigInit();
			/* 配置多图层查询 */
			zf_manyLayerConfigInit(subjectLayerMap.get(param));
			$(".jt-normal-hide").show();
			$(".jt-yj-hide").show();
		} else {
			$(".jt-normal-hide").show();
			MapQueryConfigInit();
			/* 配置多图层查询 */
			zf_manyLayerConfigInit(undefined);
		}
	}

	/**
	 * 根据专题的标识对初始化加载的地图列表进行显示/隐藏处理，并存储处理结果
	 * @param {JSON} saveLayer 图层数据
	 * @param {String} subjectEName 专题标识
	 */
	function subjectLayerCheck(saveLayer, subjectEName) {
		let subjectMap = subjectLayerMap.get(subjectEName);
		if (subjectMap) {
			let layerIds = subjectMap.layerIds;
			for (let layer of saveLayer[0].layerList) {
				if (layerIds.indexOf(layer.layerId) != -1) {
					layer.layerIsVisible = "1";
				}
			}
		}
		/* 存储处理后的图层数据 */
		saveSubjectLayerConfig(saveLayer);
	}

	/**
	 * 
	 * @param {JSON} saveLayer 经过专题处理后的图层配置数据
	 */
	function saveSubjectLayerConfig(saveLayer) {
		layerConfig = saveLayer;
		saveStorage({
			key: layerKey,
			value: JSON.stringify(layerConfig),
			success: function() {
				loadInit();
			},
			error: function() {
				muiAlertError("图层配置信息本地化失败，将无法加载地图！");
			}
		})
	}

	/* 第一次显示 */
	function pageFirstShow() {
		// loadInit();
	}

	/* 页面初始化 */
	function loadInit() {
		/* 获取存储的用户信息 */
		/* 获取本地存储的用户信息 */
		getSaveUserInfo({
			success: function(user) {
				/* 由于定位功能直接打开 导致异常 故此方法也进行处理*/
				setTimeout(function() {
					MapInit("MainMap", user);
				}, 200);
				/* 获取当前地图页面的Id */
				var webviewId = plus.webview.currentWebview().id;
				console.log("id = " + webviewId +
					" 的地图页面初始化完成！本页图层key = " + layerKey);
			}
		});
	}

	/**
	 * 定位函数,注意：注意：注意：此方法必须等待地图加载完成后，方可操作
	 * @param {string} longitude 定位经度
	 * @param {string} latitude 定位纬度
	 * @param {string} title 标题
	 */
	function jsLocation(longitude, latitude, title) {
		/* 修改标题 */
		var wv = plus.webview.currentWebview();
		wv.setStyle({
			titleNView: {
				titleText: title,
			}
		})
		var fLongitude = parseFloat(longitude);
		var fLatitude = parseFloat(latitude);
		jtMapKit.setCenter([fLongitude, fLatitude]);
		jtMapKit.setScale(locationScale);
	}

	/**
	 * 定位函数,根据表名和要素Id进行定位
	 * @param {string} tabName 表名
	 * @param {string} feaId 要素Id
	 * @param {string} title 标题
	 */
	function jsLocation_tabName_feaId(tabName, feaId, title) {
		/* 修改标题 */
		var wv = plus.webview.currentWebview();
		wv.setStyle({
			titleNView: {
				titleText: title,
			}
		});
		location_tabName_feaId(tabName, feaId);
	}

	/**
	 * 定位函数,根据表名和要素Id进行定位
	 * @param {string} tabName 表名
	 * @param {string} feaId 要素Id
	 */
	function location_tabName_feaId(tabName, feaId) {
		if (jtMapKit.isLoad && jtMapKit.isLoad === true) {
			location_tabName_feaId_execute(tabName, feaId);
		} else {
			/* 循环等待定位 */
			let interval = setInterval(function() {
				if (jtMapKit.isLoad && jtMapKit.isLoad === true) {
					window.clearInterval(interval);
					location_tabName_feaId_execute(tabName, feaId);
				}
			}, 500);
		}
	}

	/**
	 * 执行要素定位
	 * @param {string} tabName 定位图层名称
	 * @param {string} feaId 要素Id
	 */
	function location_tabName_feaId_execute(tabName, feaId) {
		/* 设置图层显示 */
		jtMapKit.setVisibleByName(tabName, true);
		/* 存储设置 */
		SaveLayerControl(tabName, true);
		/* 要素并定位 */
		location_tabName_feaId_normal(tabName, feaId);
	}

	/**
	 * 普通定位
	 * @param {Object} tabName 表名
	 * @param {Object} feaId ObjectId
	 */
	function location_tabName_feaId_normal(tabName, feaId) {
		/* 远程查询要素并定位 */
		_queryFeatureWktAndLocation(feaId, tabName);
	}

	/**
	 * 定位函数,注意：注意：注意：此方法必须等待地图加载完成后，方可操作
	 * @param {string} longitude 定位经度
	 * @param {string} latitude 定位纬度
	 */
	function mapLocation(longitude, latitude) {
		var fLongitude = parseFloat(longitude);
		var fLatitude = parseFloat(latitude);
		jtMapKit.setCenter([fLongitude, fLatitude]);
		jtMapKit.setScale(locationScale);
	}

	/**
	 * 关闭窗口
	 */
	function closeWindow() {
		plus.webview.currentWebview().hide('slide-out-right', 300);
	}

	/* 重写back方法 */
	var mui_old_back = mui.back;
	mui.back = function() {
		closeWindow();
	}
</script>