diff --git a/src/views/modules/visual/command/cpts/map.vue b/src/views/modules/visual/command/cpts/map.vue index fccd8c225..90a24bde8 100644 --- a/src/views/modules/visual/command/cpts/map.vue +++ b/src/views/modules/visual/command/cpts/map.vue @@ -48,6 +48,7 @@ let dotLayer2; let countTextLayer; let countTextBgLayer; let searchMarker; +let searchBgLayer; export default { name: "l7", @@ -627,8 +628,82 @@ export default { } }, + drawSearchBg(lng, lat) { + function getPoints(lng, lat) { + // lng 经度;lat 纬度;dis 距离(千米) + let r = 6371; //地球半径千米 + let dis = 1.5; //3千米距离 + let dlng = + 2 * + Math.asin(Math.sin(dis / (2 * r)) / Math.cos((lat * Math.PI) / 180)); + dlng = (dlng * 180) / Math.PI; // 经度半径 + let dlat = dis / r; + dlat = (dlat * 180) / Math.PI; // 纬度半径 + // 圆形每一度 都算出一个经纬度 + for (let sides = 1; sides <= 360; sides++) { + var angle = Math.PI * (1 / sides - 1 / 2); + var rotatedAngle, x, y; + var points = []; + for (var i = 0; i < sides; ++i) { + rotatedAngle = angle + (i * 2 * Math.PI) / sides; + x = lng + dlng * Math.cos(rotatedAngle); + y = lat + dlat * Math.sin(rotatedAngle); + points.push([x, y]); + } + } + console.log("points=======", points); + return points; + } + + let sourceData; + if (lng) { + sourceData = { + type: "FeatureCollection", + features: [ + { + type: "Feature", + properties: { + center: [lng, lat], + }, + geometry: { + type: "Polygon", + coordinates: [getPoints(lng, lat)], + }, + }, + ], + }; + } else { + sourceData = { + type: "FeatureCollection", + features: [], + }; + } + + if (searchBgLayer) { + searchBgLayer.setData(sourceData); + } else { + searchBgLayer = new PolygonLayer({ + // autoFit: true, + }) + .source(sourceData) + .color("#f0f") + .shape("fill") + .style({ + opacityLinear: { + enable: true, // true - false + dir: "out", // in - out + }, + opacity: 0.3, + raisingHeight: 0, + }); + + scene.addLayer(searchBgLayer); + } + }, + async setDotMarker(item, posArr) { this.removeDotMarker(); + this.drawSearchBg(...posArr); const marker = new Marker({ offsets: [0, -20], }).setLnglat(posArr); @@ -652,7 +727,7 @@ export default { }); scene.addMarker(marker); - scene.setZoomAndCenter(18, posArr); + scene.setZoomAndCenter(14, posArr); marker.openPopup(); searchMarker = marker; }, @@ -661,6 +736,7 @@ export default { if (searchMarker) { searchMarker.remove(); } + this.drawSearchBg(); }, // 把地图缩放等级在原来基础上大一点 diff --git a/src/views/modules/visual/command/index.vue b/src/views/modules/visual/command/index.vue index dd29faae3..f06adb938 100644 --- a/src/views/modules/visual/command/index.vue +++ b/src/views/modules/visual/command/index.vue @@ -50,7 +50,7 @@ @keyup.enter="handleSearch" v-model="searchName" /> -