skyversation-public
/
audit-app


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507
							<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<script src="../js/imageConversion.js"></script>
		<script src="../js/mui.js"></script>
		<script src="../js/util.js"></script>
		<link rel="stylesheet" href="../js/leaflet1.3.1/leaflet.css">
		<link rel="stylesheet" href="../js/leaflet1.3.1/leaflet.label.css">
		<link rel="stylesheet" href="../js/leaflet1.3.1/leaflet.measure.css">
		<!-- 自定义工具类 -->
		<script>
			var systemConfig = {
				assetsUrl: "http://localhost:8848",
				mapViewer: {
					center: [31.105589678244445, 121.72894516017521],
					zoom: 11
				},
				token: '65463DEE-620A-0ED5-2385-17ECD07CD351', //公共地图资源token
				mapService: 'http://121.43.55.7:10011/proxy/', //地图服务
			}
			//地图全局变量声明
			var map2DViewer = {
				markers: {},
				polygons: {},
				polylines: {},
				circles: {},
				map: null,
				layers: {},
				groups: {}
			}
		</script>
		<script src="../js/leaflet1.3.1/leaflet.js"></script>
		<script type="module" src="../js/leaflet1.3.1/leaflet-side-by-side.js"></script>
		<script src="../js/esri-leaflet-v3.0.4/esri-leaflet-debug.js"></script>
		<script type="module" src="../js/leaflet1.3.1/leaflet.measure.js"></script>
		<script type="module" src="../js/leaflet1.3.1/leaflet.label.js"></script>
		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/home.css">
		<style type="text/css">
			html,
			body,
			#map {
				position: relative;
				height: 100%;
			}

			.leaflet-touch .leaflet-control-layers-toggle {
				width: 22px !important;
				height: 22px !important;
				background-size: 20px 20px !important;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav" style="z-index: 999;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" id="mapTitle"></h1>
		</header>
		<div id="map">
			<!-- 文件上传 -->
			<input id="uploadFileInput" type="file" style="z-index: -1;" value=""
				accept="image/png, image/jpeg, image/jpg" />
			<!-- 当前任务名称 -->
			<span id="taskName"></span>
			<!-- 地图底部弹窗 -->
			<div id="mapBottomBox">
			</div>
			<!-- 我的任务列表模式 -->
			<div class="changeType toBackPage">
				<span class="mui-icon mui-icon-list"></span>
			</div>
			<!-- 自定义标记添加事件 -->
			<div class="changeType" id="addMyMarker">
				<span class="mui-icon mui-icon-upload"></span>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		mui.plusReady(function() {
			if (plus) {
				function newPostRequest2(setting, funSuccess, funError) {
					var xhr = new XMLHttpRequest();

					// 请求成功回调函数
					xhr.onload = e => {
						console.log('request success');
					};
					// 请求结束
					xhr.onloadend = e => {
						console.log('request loadend');
					};
					// 请求出错
					xhr.onerror = e => {
						console.log('request error');
						funError("request error");
					};
					// 请求超时
					xhr.ontimeout = e => {
						console.log('request timeout');
						funError("request timeout");
					};
					xhr.open('POST', "http://117.131.26.69:10081/proxy_dms/content/selectContentList", true);
					if (localStorage.getItem("token")) {
						xhr.setRequestHeader("token", localStorage.getItem("token"))
					}
					xhr.onreadystatechange = function() {
						if (xhr.readyState == 4 && xhr.status == 200) {
							funSuccess(JSON.parse(xhr.responseText));
						}
					}
					xhr.send(setting.data);
				}
				// 动态获取图片（点击疑点或标记marker时）
				function getFileListUrl2(fileList) {
					return new Promise((resolve, reject) => {
						if (fileList) {
							let fileUrlList = [];
							let index = 0;
							for (let fileName in fileList) {
								index++;
							}
							for (let fileName in fileList) {
								let paramData2 = new FormData();
								paramData2.append("columnId", 1793);
								paramData2.append("states", "0,1,2");
								paramData2.append("pageSize", 10);
								paramData2.append("page", 0);
								let searchParam = [];
								let paramItem = {
									field: "title",
									searchType: "1",
									content: {
										value: fileList[fileName]
									}
								};
								searchParam.push(paramItem);
								if (searchParam.length > 0) {
									paramData2.append("search", JSON.stringify(searchParam));
								}
								newPostRequest2({
									data: paramData2
								}, function funSuccess(res, textStatus, xhr) {
									let resJson2 = res;
									if (resJson2.code == 200) {
										let fileBase = resJson2.content
											.data[0].c_file_base64;
										fileUrlList.push(fileBase);
										if (fileUrlList.length == index) {
											resolve(fileUrlList);
										}
									}
								}, function funerror(res, textStatus, xhr) {});
							}
						} else {
							resolve();
						}
					});
				}
				let markers = [];
				let geometrys = [];
				// 地图默认中心位置
				//定义一些常量
				let center_ = [31.17361258762417, 121.51803731918336];

				function getOneLatLng(data, returnFunc) {
					if (typeof data[0] == "object") {
						getOneLatLng(data[0], returnFunc);
					} else {
						if (data[0] < data[1]) {
							returnFunc([data[0] + 0.00011, data[1] + 0.19195]);
							return;
						} else {
							returnFunc([data[1] + 0.00011, data[0] + 0.19195]);
						}
					}
				}
				let gotoOrtherPageState = false;
				// 得到定位数据
				if (localStorage.getItem("geometrys") && localStorage.getItem("mapTitle") !== "自定义标记") {
					let geometrysItem = JSON.parse(localStorage.getItem("geometrys"));
					// console.log(geometrysItem)
					let index = 1;
					if (geometrysItem != null) {
						if (geometrysItem[0]) {
							getOneLatLng(geometrysItem[0].coord ? geometrysItem[0].coord : geometrysItem[0].geometry
								.coordinates,
								function(res) {
									center_ = res;
								});
						}

						geometrysItem.forEach(item => {
							//创建多个icon
							var greenIcon = L.icon({
									iconUrl: '../js/leaflet1.3.1/images/marker-icon-2x-sc.png',
									iconSize: [25, 41],
									iconAnchor: [12, 41],
									popupAnchor: [1, -34],
									tooltipAnchor: [16, -28],
									shadowSize: [41, 41]
								}),
								redIcon = L.icon({
									iconUrl: '../js/leaflet1.3.1/images/marker-icon-2x-er.png',
									iconSize: [25, 41],
									iconAnchor: [12, 41],
									popupAnchor: [1, -34],
									tooltipAnchor: [16, -28],
									shadowSize: [41, 41]
								}),
								orangeIcon = L.icon({
									iconUrl: '../js/leaflet1.3.1/images/marker-icon-2x-wr.png',
									iconSize: [25, 41],
									iconAnchor: [12, 41],
									popupAnchor: [1, -34],
									tooltipAnchor: [16, -28],
									shadowSize: [41, 41]
								}),
								greenIconActive = L.icon({
									iconUrl: '../js/leaflet1.3.1/images/marker-icon-2x-sc.png',
									iconSize: [25, 41],
									iconAnchor: [12, 41],
									popupAnchor: [1, -34],
									tooltipAnchor: [16, -28],
									shadowSize: [41, 41],
									className: "my-div-icon"
								}),
								redIconActive = L.icon({
									iconUrl: '../js/leaflet1.3.1/images/marker-icon-2x-er.png',
									iconSize: [25, 41],
									iconAnchor: [12, 41],
									popupAnchor: [1, -34],
									tooltipAnchor: [16, -28],
									shadowSize: [41, 41],
									className: "my-div-icon"
								}),
								orangeIconActive = L.icon({
									iconUrl: '../js/leaflet1.3.1/images/marker-icon-2x-wr.png',
									iconSize: [25, 41],
									iconAnchor: [12, 41],
									popupAnchor: [1, -34],
									tooltipAnchor: [16, -28],
									shadowSize: [41, 41],
									className: "my-div-icon"
								});
							index++;
							// 先将点添加到markers对象中
							let centerItem = [];
							if (localStorage.getItem("markerId") && item.id == localStorage.getItem(
									"markerId")) {
								gotoOrtherPageState = true;
								getOneLatLng(item.coord ? item.coord : item.geometry.coordinates, function(
									res) {
									center_ = res;
									if (center_[0] && center_[1]) {
										markers.push(L.marker(center_, {
											icon: localStorage.getItem("mapTitle") ==
												"我的标记" || (item
													.properties && item.properties.state
												) ?
												greenIconActive : orangeIconActive,
											data: item
										}));
									}
								});
							} else {
								getOneLatLng(item.coord ? item.coord : item.geometry.coordinates, function(
									res) {
									centerItem = res;
									if (centerItem[0] && centerItem[1]) {
										markers.push(L.marker(centerItem, {
											icon: localStorage.getItem("mapTitle") ==
												"我的标记" || (item
													.properties && item.properties.state
												) ? greenIcon : orangeIcon,
											data: item
										}));
									}
								});
							}
						})
					}
				};
				// 如果得到当前手机定位
				if (gotoOrtherPageState == false && localStorage.getItem("user_latitude") && localStorage.getItem(
						"user_longitude")) {
					center_ = [parseFloat(localStorage.getItem("user_latitude")), parseFloat(localStorage.getItem(
						"user_longitude"))];
				}
				// 地图初始化
				var map = L.map("map", {
					center: center_,
					zoom: 12,
					minZoom: 9,
					maxZoom: 16,
					zoomControl: true,
					attributionControl: false,
					doubleClickZoom: false,
					maxBounds: [
						[31.95, 120.86],
						[30.7, 122.12]
					]
				})
				// 初始化地图底图
				var layer = L.esri
					.tiledMapLayer({
						url: "http://121.43.55.7:10011/proxy/?servertype=Street_Purplish_Blue&token=65463DEE-620A-0ED5-2385-17ECD07CD351"
					})
					.addTo(map);
				if (localStorage.getItem("user_latitude") != null && localStorage.getItem("user_longitude") != null) {
					let myIcon = L.icon({
						iconUrl: '../js/leaflet1.3.1/images/myMarker00000000.png',
						iconSize: [10, 10],
						iconAnchor: [12, 0],
						popupAnchor: [1, -34],
						tooltipAnchor: [16, -28],
						shadowSize: [41, 41],
						className: "my-div-icon2"
					})
					let localAddr = [parseFloat(localStorage.getItem("user_latitude")), parseFloat(localStorage
						.getItem(
							"user_longitude"))];
					L.marker(localAddr, {
						icon: myIcon
					}).addTo(map);
				}
				// 批量将markers中的点添加到地图中，并添加监听事件打开底部弹窗。
				markers.forEach(item => {
					item.on('click', function(item) {
						// 请求疑点数据和图片
						let markerData = item.target.options.data;
						let state = markerData.properties && markerData.properties.state ? markerData
							.properties
							.state : 0;
						let desc = markerData.properties && markerData.properties.desc ? markerData
							.properties.desc :
							'';
						localStorage.setItem("markerDataPropertiesFileList", JSON.stringify(markerData
							.properties &&
							markerData.properties.fileList ? markerData.properties.fileList :
							{}));
						// 我的标记和标记疑点
						if (markerData.properties && markerData.properties.title) {
							let mapBottomBoxInnerHtml = `<div></div><span class="title">${markerData.properties && markerData.properties.title ? markerData.properties.title : '自定义标记' }</span>
						<div class="arrowdown" data-state="1"><span class="mui-icon mui-icon-arrowdown"></span></div>
						<p>位置：${markerData.properties.localAddr ? markerData.properties.localAddr : '未知'}</p>
						<div id="mapImageList">`;
							if (markerData.properties && markerData.properties.fileList) {
								getFileListUrl2(markerData.properties.fileList).then(res => {
									if (res) {
										for (let fileBase in res) {
											mapBottomBoxInnerHtml +=
												`<div><img src="${res[fileBase]}"/></div>`;
										}
									}
									mapBottomBoxInnerHtml += `
									</div>
									<input id="myMarkerId" value="${markerData.id}" />
									<div>
										<p>描述:</p>
										<span>${desc}</span>
									</div>`;
									document.getElementById('mapBottomBox').innerHTML =
										mapBottomBoxInnerHtml;
									document.getElementById('mapBottomBox').style.bottom =
										"0";
								})
							} else {
								mapBottomBoxInnerHtml += `
									</div>
									<input id="myMarkerId" value="${markerData.id}" />
									<div>
										<p>描述:</p>
										<span>${desc}</span>
									</div>`;
								document.getElementById('mapBottomBox').innerHTML =
									mapBottomBoxInnerHtml;
								document.getElementById('mapBottomBox').style.bottom = "0";
							}
						} else {
							// 我的任务疑点
							let statusMap = {
								0: {
									class: "mapWarning",
									title: "未核实"
								},
								1: {
									class: "mapSuccessTag",
									title: "已核实"
								}
							}
							let mapBottomBoxInnerHtml = `<div class="${state ? statusMap[state].class : 'mapWarning'}">${state ? statusMap[state].title : '未核实'}</div>
						<span class="title">${markerData.dataTitle}</span>
						<div class="arrowdown" data-state="${state}"><span class="mui-icon mui-icon-arrowdown"></span></div>
						<p>位置：${markerData.properties && markerData.properties['镇域名称'] ? markerData.properties['镇域名称'] : '未知'}</p>
						<div id="mapImageList">
							`;
							if (markerData.properties && markerData.properties.fileList) {
								getFileListUrl2(markerData.properties.fileList).then(res => {
									if (res) {
										for (let fileBase in res) {
											mapBottomBoxInnerHtml +=
												`<div><img src="${res[fileBase]}"/></div>`;
										}
									}
									mapBottomBoxInnerHtml += `
											${state == 0 ? `<div id="uploadImage">
												<div><span class="mui-icon mui-icon-plus"></span></div>
												<div><span>上传照片</span></div>
											</div>` : ``}
										</div>
										<input id="myMarkerId" value="${markerData.id}" />
										<div>
											<p>描述:</p>
											${state == 1 ? `<span>${desc}</span>` : `<textarea name="" id="mapTextArea" placeholder="请添加描述" cols="30" rows="3" >${desc}</textarea>`}
										</div>
										${state == 0 ? `
										<div class="displayFlex3">
											<div class="paperplaneMyMarker2 openMyPhoneMap" data-lat="${item.latlng.lat}" data-lng="${item.latlng.lng}">导航到这</div>
											<div class="paperplane"><span class="mui-icon mui-icon-paperplane"></span>提交</div>
										</div>
										` : ``}`;
									document.getElementById('mapBottomBox').innerHTML =
										mapBottomBoxInnerHtml;
									document.getElementById('mapBottomBox').style.bottom =
										"0";
								})
							} else {
								mapBottomBoxInnerHtml += `
										${state == 0 ? `<div id="uploadImage">
											<div><span class="mui-icon mui-icon-plus"></span></div>
											<div><span>上传照片</span></div>
										</div>` : ``}
									</div>
									<input id="myMarkerId" value="${markerData.id}" />
									<div>
										<p>描述:</p>
										${state == 1 ? `<span>${desc}</span>` : `<textarea name="" id="mapTextArea" placeholder="请添加描述" cols="30" rows="3" >${desc}</textarea>`}
									</div>
									${state == 0 ? `
									<div class="displayFlex3">
										<div class="paperplaneMyMarker2 openMyPhoneMap" data-lat="${item.latlng.lat}" data-lng="${item.latlng.lng}">导航到这</div>
										<div class="paperplane"><span class="mui-icon mui-icon-paperplane"></span>提交</div>
									</div>
									` : ``}`;
								document.getElementById('mapBottomBox').innerHTML =
									mapBottomBoxInnerHtml;
								document.getElementById('mapBottomBox').style.bottom = "0";
							}
						}
					})
					if (item.options.data.name || item.options.data.properties.title || item.options.data
						.properties.desc) {
						item.addTo(map)
							.bindPopup(item.options.data.name || item.options.data.properties.title || item
								.options.data
								.properties.desc, {
									autoClose: false,
									closeOnClick: ""
								})
							.openPopup();
					} else {
						item.addTo(map);
					}
				});
				if (center_) {
					map.panTo(center_);
				}

				// 自定义标记页面事件
				if (localStorage.getItem("mapTitle") === "自定义标记") {
					localStorage.setItem('showMyMarkerBottomBox', 'false');
					document.getElementById('addMyMarker').style.display = "flex";
					let markerItem = "";
					// 地图的点击事件
					map.on('click', function(e) {
						if (!localStorage.getItem("showMyMarkerBottomBox") || localStorage.getItem(
								"showMyMarkerBottomBox") ==
							"false") {
							document.getElementById('taskName').innerHTML =
								`<p>lat:${e.latlng.lat}</p><p>lng:${e.latlng.lng}</p>`;
							document.getElementById('taskName').style.display = "block";
							localStorage.setItem("latlngLat", e.latlng.lat - 0.00011);
							localStorage.setItem("latlngLng", e.latlng.lng - 0.19195);
							if (markerItem) {
								markerItem.setLatLng([e.latlng.lat, e.latlng.lng]);
							} else {
								markerItem = L.marker([e.latlng.lat, e.latlng.lng]);
								markerItem.addTo(map);
							}
						}
					})
				}
				let myDivIconDoms = document.getElementsByClassName("my-div-icon");
				if (myDivIconDoms[0]) {
					myDivIconDoms[0].click();
				}
				// puls加载完成
			}
		})
	</script>
</html>