skyversation-public
/
audit-app


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515
							<!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: 18,
			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"
		// 		url: "http://t0.tianditu.gov.cn/vec_c/wmts?tk=7e55f62d7d46488299e8caa8d6f0dcf4"
		// 	})
		// 	.addTo(map);
		var layer = L.tileLayer(
			"http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}", {
				attribution: '&copy; 高德地图',
				maxZoom: 19,
				minZoom: 3,
				subdomains: "1234",
				zoom: 3
			}).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>