skyversation-public
/
audit-app


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397
							<!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>
		<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">老港镇林地审计-任务1</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 src="../js/util.js"></script>
	<script type="text/javascript">
		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/marker-icon-2x-sc.png',
				iconSize: [25, 41],
				iconAnchor: [12, 41],
				popupAnchor: [1, -34],
				tooltipAnchor: [16, -28],
				shadowSize: [41, 41]
			})
			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) {
						getFileListUrl(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) {
						getFileListUrl(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);
					}
				}
			})
		}
	</script>
</html>