From 9736514b2aa57051e934341b23a2f6b123cc06a9 Mon Sep 17 00:00:00 2001 From: 少年 <1392120328@qq.com> Date: 星期三, 07 二月 2024 17:43:18 +0800 Subject: [PATCH] 11 --- src/utils/map2.js | 161 +++++++++++++++++++++++++++++++++-------------------- 1 files changed, 101 insertions(+), 60 deletions(-) diff --git a/src/utils/map2.js b/src/utils/map2.js index e7cef48..02b51c5 100644 --- a/src/utils/map2.js +++ b/src/utils/map2.js @@ -751,7 +751,9 @@ lon: lon, lat: lat, } - } else if (propertyNames.includes("id")) { + } + + else if (propertyNames.includes("id")) { objdata = { POITYPE: "POINT", name: properties["_name"]._value, @@ -2203,6 +2205,7 @@ //openlayer 鍒涘缓鐐逛綅 +window.pointArr = []; export function createPointMarker(position, obj) { let startFeature = new ol.Feature({ geometry: new ol.geom.Point(position), @@ -2210,6 +2213,12 @@ startFeature.setProperties({ desc: obj, }); + if (window.pointArr && window.pointArr.length > 0) { + window.pointArr.forEach(item => { + window.mapapi.removeLayer(item) + }) + window.pointArr = [] + } let MarkerLayer = new ol.layer.Vector({ id: 'LocationPoint', name: '鏍囪鐐�', @@ -2229,26 +2238,14 @@ }), zIndex: 1099, }) + window.pointArr.push(MarkerLayer) return MarkerLayer; } //openlayer 鍦板浘鐐瑰嚮浜嬩欢 export function setClick(state) { - console.log('setClick'); - let ponitPanel = document.getElementById('ponitPanel'); - let overlay = new ol.Overlay({ - element: ponitPanel, - autoPan: { - animation: { - duration: 250, - }, - }, - }); - window.map.addOverlay(overlay); - - // let _clickCallback = callback; function handleClick(e) { - console.log(e.coordinate); + store.setLayerPanelShow(false); // 鍦熷湴绠$悊 if (store.tdglInfo.flag) { axios @@ -2262,7 +2259,7 @@ ).then(response => { let center = { lon: 0, lat: 0 }; if (window.tdglLine) { - window.map.removeLayer(window.tdglLine); + window.mapapi.removeLayer(window.tdglLine); window.tdglLine = null; } var format = new ol.format.WKT(); // 鍒涘缓涓�涓� WKT 瑙f瀽鍣� @@ -2274,7 +2271,7 @@ features: [feature] // 灏嗚绱犲璞″姞鍏ュ埌鍥惧眰婧愪腑 }) }); - window.map.addLayer(window.tdglLine) + window.mapapi.addLayer(window.tdglLine) axios @@ -2351,7 +2348,7 @@ rjl, jzxg, jzmd, - lon:e.coordinate[0], + lon: e.coordinate[0], lat: e.coordinate[1], } } @@ -2367,38 +2364,94 @@ return; } + window.mapapi.forEachFeatureAtPixel(e.pixel, function (feature) { + let properties = feature.getProperties().features[0].values_; + console.log(properties, 'aaa'); + console.log(properties.values_, 'bbb'); + for (const propertyNames in properties) { + if (propertyNames.indexOf("鐩戞帶鍚�") !== -1) { + // objdata = { + // POITYPE: "SPJK", + // name: properties["JK鍚嶇О"]._value, + // type: properties["JK绫诲瀷"]._value, + // function: properties["鍔熻兘"]._value, + // area: properties["鎵�鍦ㄥ尯"]._value, + // number: properties["JK缂栧彿"]._value, + // code: properties["JK鍐呯爜"]._value, + // lon: lon, + // lat: lat, + // } + Message({ + message: '杩炴帴鐘舵�佹煡璇腑', + type: 'info', + offset: 60, + center: true, + duration: 1000, + }); + layerOpen(properties["JK鍚嶇О"]._value, { + width: "100%", + height: "40%", + // offset: [offsetTop + "px", "380px"], + url: "../../static/video/video.html?code=" + properties["JK鍐呯爜"]._value, + fn: { + success: (layero, index) => { + SmartEarthPopupData.layerContainer = layero; + }, + end: () => { - window.map.forEachFeatureAtPixel(e.pixel, function (feature) { - // console.log(feature, '111111') + }, + cancel: () => { + + }, + }, + }); + return + } else if (propertyNames.indexOf("閮ㄤ欢鍚嶇О") !== -1) { + objdata = { + // 鐐逛綅绫诲瀷锛堜腑鑻辨枃閰嶇疆琛╬oiKeys.js) + POITYPE: "CSBJ", + // 灞曠ず瀛楁 + name: properties["閮ㄤ欢鍚嶇О"], + address: properties["瀹夎鍦板潃"], + code: properties["閮ㄤ欢缂栫爜"], + type: properties["閮ㄤ欢绫诲瀷"], + // 寮规缁忕含搴� + lon: properties["Longtitude"], + lat: properties["Latitude"], + } + } else if (propertyNames.indexOf("浜曠紪鍙�") !== -1) { + objdata = { + POITYPE: "YINJ", + name: properties["浜曞悕绉�"], + depth: properties["浜曟繁"], + type: properties["浜曠被鍨�"], + location: properties["浣嶇疆"], + code: properties["浜曠紪鍙�"], + lon: properties["Longtitude"], + lat: properties["Latitude"], + } + } else if (propertyNames.indexOf("QYMC") !== -1) { + objdata = { + POITYPE: "QY", + QYMC: properties["QYMC"], + XYDM: properties["XYDM"], + BZDZ: properties["BZDZ"], + DZ: properties["DZ"], + lon: properties["Longtitude"], + lat: properties["Latitude"], + } + } + } + if (feature && feature.values_.desc) { - ponitPanel.style.display = 'block' - let obj = feature.values_.desc objdata = { POITYPE: "POINT", name: obj.name, address: obj.address, - lon: obj.lng, - lat: obj.lat } - ponitPanel.innerHTML = ` - <div class="ponitPanel-name"> - <span>鍚嶇О锛�</span> - <span>${objdata.name}</span> - </div> - <div class="ponitPanel-value"> - <span>鍦板潃锛�</span> - <span>${objdata.address}</span> - </div>` - - setTimeout(() => { - overlay.setPosition(e.coordinate); - }, 0) - - // store.setPoplayerShowAction(true); - // store.setPoplayerListAction(objdata); // if (window.instance) { // window.instance.$destroy(); // } @@ -2409,10 +2462,15 @@ // }); // window.instance.$mount(); } + + store.setTdglShow(false); + store.setTdlgInfo({}); + store.setdwShow(true); + store.setdwInfo(objdata); }); } if (state) { - clickEvent = window.map.on('click', handleClick); + clickEvent = window.mapapi.on('click', handleClick); } else { ol.Observable.unByKey(clickEvent) clickEvent = null @@ -2421,26 +2479,9 @@ export function flyToPoint(posisitons) { - // let zoom = window.map.getView().getZoom(); - // if (zoom >= 16) { - // zoom = 12 - // } - // let duration = 2000; - window.map.getView().animate({ + window.mapapi.getView().animate({ center: posisitons, - zoom: 12, + zoom: 15, duration: 1500 }) - // window.map.getView().animate( - // //鍔ㄧ敾寮�濮嬫椂 - // { - // zoom: zoom > 16 ? zoom - 0.01 : zoom + 0.01, - // duration: duration / 2, - // }, - // //鍔ㄧ敾缁撴潫鏃� - // { - // zoom: zoom >= 16 ? 16 : zoom + 4, - // duration: duration / 2, - // } - // ); } \ No newline at end of file -- Gitblit v1.9.3