|
|
@@ -79,336 +79,381 @@
|
|
|
<div class="changeType" id="addMyMarker">
|
|
|
<span class="mui-icon mui-icon-upload"></span>
|
|
|
</div>
|
|
|
+ <!-- 切换底图按钮 -->
|
|
|
+ <div class="changeType2 changeMap">
|
|
|
+ <span class="mui-icon mui-icon-map"></span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</body>
|
|
|
<script type="text/javascript">
|
|
|
- mui.plusReady(function() {
|
|
|
- if (plus) {
|
|
|
- function newPostRequest2(setting, funSuccess, funError) {
|
|
|
- var xhr = new XMLHttpRequest();
|
|
|
+ // 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);
|
|
|
+ // 请求成功回调函数
|
|
|
+ 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));
|
|
|
}
|
|
|
- // 动态获取图片（点击疑点或标记marker时）
|
|
|
- function getFileListUrl2(fileList) {
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- if (fileList) {
|
|
|
- let fileUrlList = [];
|
|
|
- let index = 0;
|
|
|
- for (let fileName in fileList) {
|
|
|
- index++;
|
|
|
+ }
|
|
|
+ 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]
|
|
|
}
|
|
|
- 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));
|
|
|
+ };
|
|
|
+ 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);
|
|
|
}
|
|
|
- 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();
|
|
|
- }
|
|
|
- });
|
|
|
+ }, function funerror(res, textStatus, xhr) {});
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ resolve();
|
|
|
}
|
|
|
- let markers = [];
|
|
|
- let geometrys = [];
|
|
|
- // 地图默认中心位置
|
|
|
- //定义一些常量
|
|
|
- let center_ = [31.17361258762417, 121.51803731918336];
|
|
|
+ });
|
|
|
+ }
|
|
|
+ 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]);
|
|
|
- }
|
|
|
- }
|
|
|
+ const skew = [0.00011, 0.19195];
|
|
|
+ // const skew = [-0.002,0.198];
|
|
|
+
|
|
|
+ function getOneLatLng(data, returnFunc) {
|
|
|
+ if (typeof data[0] == "object") {
|
|
|
+ getOneLatLng(data[0], returnFunc);
|
|
|
+ } else {
|
|
|
+ if (data[0] < data[1]) {
|
|
|
+ returnFunc([data[0] + skew[0], data[1] + skew[1]]);
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ returnFunc([data[1] + skew[0], data[0] + skew[1]]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let gotoOrtherPageState = false;
|
|
|
+ // 得到定位数据
|
|
|
+ if (localStorage.getItem("geometrys") && localStorage.getItem("mapTitle") !== "自定义标记") {
|
|
|
+ let geometrysItem = JSON.parse(localStorage.getItem("geometrys"));
|
|
|
+ let index = 1;
|
|
|
+ if (geometrysItem != null) {
|
|
|
+ if (geometrysItem[0]) {
|
|
|
+ getOneLatLng(geometrysItem[0].coord ? geometrysItem[0].coord : geometrysItem[0].geometry
|
|
|
+ .coordinates,
|
|
|
+ function(res) {
|
|
|
+ center_ = res;
|
|
|
+ });
|
|
|
}
|
|
|
- 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
|
|
|
- }));
|
|
|
- }
|
|
|
- });
|
|
|
+ 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>
|
|
|
+ }
|
|
|
+ };
|
|
|
+ // 如果得到当前手机定位
|
|
|
+ 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 initMapLayer = "layer";
|
|
|
+ var layer = L.tileLayer(
|
|
|
+ "http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}", {
|
|
|
+ attribution: '© 高德地图',
|
|
|
+ maxZoom: 19,
|
|
|
+ minZoom: 3,
|
|
|
+ subdomains: "1234",
|
|
|
+ zoom: 3
|
|
|
+ });
|
|
|
+ var other = 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: '© 高德地图',
|
|
|
+ maxZoom: 19,
|
|
|
+ minZoom: 3,
|
|
|
+ subdomains: "123",
|
|
|
+ zoom: 3
|
|
|
+ });
|
|
|
+
|
|
|
+ layer.addTo(map);
|
|
|
+
|
|
|
+ function changeMap() {
|
|
|
+ if (initMapLayer == "layer") {
|
|
|
+ initMapLayer = "other";
|
|
|
+ map.removeControl(layer);
|
|
|
+ other.addTo(map);
|
|
|
+ console.log("切换为other")
|
|
|
+ } else {
|
|
|
+ initMapLayer = "layer";
|
|
|
+ map.removeControl(other);
|
|
|
+ layer.addTo(map);
|
|
|
+ console.log("切换为layer")
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ 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 += `
|
|
|
+ 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 += `
|
|
|
+ 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>
|
|
|
+ document.getElementById('mapBottomBox').innerHTML =
|
|
|
+ mapBottomBoxInnerHtml;
|
|
|
+ document.getElementById('mapBottomBox').style.bottom = "0";
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 我的任务疑点
|
|
|
+ let statusMap = {
|
|
|
+ 0: {
|
|
|
+ class: "mapWarning",
|
|
|
+ title: "未核实"
|
|
|
+ },
|
|
|
+ 1: {
|
|
|
+ class: "mapSuccessTag",
|
|
|
+ title: "已核实"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let markerDataPropertiesStr = JSON.stringify(markerData.properties);
|
|
|
+ let mapBottomBoxInnerHtml = `<div class="${state ? statusMap[state].class : 'mapWarning'}">${state ? statusMap[state].title : '未核实'}</div>
|
|
|
<span class="title">${markerData.dataTitle}</span>
|
|
|
+ <p class="relevantLawsAndRegulations knowledgeRetrieval" data-search-str="${markerData.dataTitle}">相关法律法规</p>
|
|
|
+ <p class="detailedInformation" data-marker-data='${markerDataPropertiesStr}'>详细信息</p>
|
|
|
<div class="arrowdown" data-state="${state}"><span class="mui-icon mui-icon-arrowdown"></span></div>
|
|
|
+ <p>疑点图斑：</p>
|
|
|
+ <div><img class="patternSpot" src="http://47.103.92.60:2102/apps/patternSpot.png"/></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 += `
|
|
|
+ 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>
|
|
|
@@ -425,13 +470,13 @@
|
|
|
<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 += `
|
|
|
+ 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>
|
|
|
@@ -448,60 +493,60 @@
|
|
|
<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);
|
|
|
+ document.getElementById('mapBottomBox').innerHTML =
|
|
|
+ mapBottomBoxInnerHtml;
|
|
|
+ document.getElementById('mapBottomBox').style.bottom = "0";
|
|
|
}
|
|
|
- });
|
|
|
- if (center_) {
|
|
|
- map.panTo(center_);
|
|
|
}
|
|
|
+ })
|
|
|
+ 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();
|
|
|
+ // 自定义标记页面事件
|
|
|
+ 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 - skew[0]);
|
|
|
+ localStorage.setItem("latlngLng", e.latlng.lng - skew[1]);
|
|
|
+ if (markerItem) {
|
|
|
+ markerItem.setLatLng([e.latlng.lat, e.latlng.lng]);
|
|
|
+ } else {
|
|
|
+ markerItem = L.marker([e.latlng.lat, e.latlng.lng]);
|
|
|
+ markerItem.addTo(map);
|
|
|
+ }
|
|
|
}
|
|
|
- // puls加载完成
|
|
|
- }
|
|
|
- })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ let myDivIconDoms = document.getElementsByClassName("my-div-icon");
|
|
|
+ if (myDivIconDoms[0]) {
|
|
|
+ myDivIconDoms[0].click();
|
|
|
+ }
|
|
|
+ // puls加载完成
|
|
|
+ // }
|
|
|
+ // })
|
|
|
</script>
|
|
|
</html>
|
DESKTOP-6LTVLN7\Liumouren