From 290aa4c2bcd83c584e0b10cab76131c069bf64b7 Mon Sep 17 00:00:00 2001 From: 少年 <1392120328@qq.com> Date: 星期三, 13 三月 2024 10:44:25 +0800 Subject: [PATCH] youhua --- src/components/viewer2.vue | 33 +++++--- src/components/rightMenu/bottom2.vue | 44 ++++++----- src/components/sideMenu/layerMenu/layerPanel2.vue | 18 ++-- package-lock.json | 41 +++++++--- src/components/poplayer/history2.vue | 19 +--- src/components/leftMenu/sousuo2.vue | 22 ++-- package.json | 2 src/components/rightNavigation/NavigationBar2.vue | 2 src/utils/tool.js | 9 + src/utils/map2.js | 1 src/utils/transform.js | 2 src/components/sideMenu/layerTreePanel/layerTreePanel2.vue | 10 +- 12 files changed, 113 insertions(+), 90 deletions(-) diff --git a/package-lock.json b/package-lock.json index bb5be8a..0e7999c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,8 @@ "font-awesome": "^4.3.0", "jquery": "^3.3.1", "lodash": "^4.17.21", - "ol": "^7.5.2", + "ol": "^7.5.0", + "ol-ext": "^4.0.10", "sass-loader": "^10.0.4", "three": "^0.103.0", "vcolorpicker": "^0.1.8", @@ -5809,9 +5810,9 @@ } }, "node_modules/mapbox-to-css-font": { - "version": "2.4.2", - "resolved": "https://registry.npmmirror.com/mapbox-to-css-font/-/mapbox-to-css-font-2.4.2.tgz", - "integrity": "sha512-f+NBjJJY4T3dHtlEz1wCG7YFlkODEjFIYlxDdLIDMNpkSksqTt+l/d4rjuwItxuzkuMFvPyrjzV2lxRM4ePcIA==" + "version": "2.4.4", + "resolved": "https://registry.npmmirror.com/mapbox-to-css-font/-/mapbox-to-css-font-2.4.4.tgz", + "integrity": "sha512-X1dtuTuH2D1MRMuductMZCLV/fy9EoIgqW/lmu8vQSAhEatx/tdFebkYT3TVhdTwqFDHbLEgQBD3IKA4KI7aoQ==" }, "node_modules/math-expression-evaluator": { "version": "1.2.17", @@ -6647,15 +6648,23 @@ "dev": true }, "node_modules/ol": { - "version": "7.5.2", - "resolved": "https://registry.npmmirror.com/ol/-/ol-7.5.2.tgz", - "integrity": "sha512-HJbb3CxXrksM6ct367LsP3N+uh+iBBMdP3DeGGipdV9YAYTP0vTJzqGnoqQ6C2IW4qf8krw9yuyQbc9fjOIaOQ==", + "version": "7.5.0", + "resolved": "https://registry.npmmirror.com/ol/-/ol-7.5.0.tgz", + "integrity": "sha512-ENjuod3oIdAR3shCPKPmzoObb2wRfNtMSwhvYEA7kJ9RbZABzqPCsfJegSnZumJfd2Crk6Nw2u1p3IdX6g9RbQ==", "dependencies": { "earcut": "^2.2.3", "geotiff": "^2.0.7", "ol-mapbox-style": "^10.1.0", "pbf": "3.2.1", "rbush": "^3.0.1" + } + }, + "node_modules/ol-ext": { + "version": "4.0.16", + "resolved": "https://registry.npmmirror.com/ol-ext/-/ol-ext-4.0.16.tgz", + "integrity": "sha512-UCeknmfiw+BtvcGghN7L6e1pWRkWIw5ysueIVncNyEtn76pcNTXbDc6f7+4Zqz/4ZVdEcVYM8gmDft+L5RJZ9w==", + "peerDependencies": { + "ol": ">= 5.3.0" } }, "node_modules/ol-mapbox-style": { @@ -18452,9 +18461,9 @@ } }, "mapbox-to-css-font": { - "version": "2.4.2", - "resolved": "https://registry.npmmirror.com/mapbox-to-css-font/-/mapbox-to-css-font-2.4.2.tgz", - "integrity": "sha512-f+NBjJJY4T3dHtlEz1wCG7YFlkODEjFIYlxDdLIDMNpkSksqTt+l/d4rjuwItxuzkuMFvPyrjzV2lxRM4ePcIA==" + "version": "2.4.4", + "resolved": "https://registry.npmmirror.com/mapbox-to-css-font/-/mapbox-to-css-font-2.4.4.tgz", + "integrity": "sha512-X1dtuTuH2D1MRMuductMZCLV/fy9EoIgqW/lmu8vQSAhEatx/tdFebkYT3TVhdTwqFDHbLEgQBD3IKA4KI7aoQ==" }, "math-expression-evaluator": { "version": "1.2.17", @@ -19156,9 +19165,9 @@ "dev": true }, "ol": { - "version": "7.5.2", - "resolved": "https://registry.npmmirror.com/ol/-/ol-7.5.2.tgz", - "integrity": "sha512-HJbb3CxXrksM6ct367LsP3N+uh+iBBMdP3DeGGipdV9YAYTP0vTJzqGnoqQ6C2IW4qf8krw9yuyQbc9fjOIaOQ==", + "version": "7.5.0", + "resolved": "https://registry.npmmirror.com/ol/-/ol-7.5.0.tgz", + "integrity": "sha512-ENjuod3oIdAR3shCPKPmzoObb2wRfNtMSwhvYEA7kJ9RbZABzqPCsfJegSnZumJfd2Crk6Nw2u1p3IdX6g9RbQ==", "requires": { "earcut": "^2.2.3", "geotiff": "^2.0.7", @@ -19167,6 +19176,12 @@ "rbush": "^3.0.1" } }, + "ol-ext": { + "version": "4.0.16", + "resolved": "https://registry.npmmirror.com/ol-ext/-/ol-ext-4.0.16.tgz", + "integrity": "sha512-UCeknmfiw+BtvcGghN7L6e1pWRkWIw5ysueIVncNyEtn76pcNTXbDc6f7+4Zqz/4ZVdEcVYM8gmDft+L5RJZ9w==", + "requires": {} + }, "ol-mapbox-style": { "version": "10.7.0", "resolved": "https://registry.npmmirror.com/ol-mapbox-style/-/ol-mapbox-style-10.7.0.tgz", diff --git a/package.json b/package.json index e86e396..f5f6bec 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "font-awesome": "^4.3.0", "jquery": "^3.3.1", "lodash": "^4.17.21", - "ol": "^7.4.0", + "ol": "^7.5.0", "ol-ext": "^4.0.10", "sass-loader": "^10.0.4", "three": "^0.103.0", diff --git a/src/components/leftMenu/sousuo2.vue b/src/components/leftMenu/sousuo2.vue index 06abd69..9686f35 100644 --- a/src/components/leftMenu/sousuo2.vue +++ b/src/components/leftMenu/sousuo2.vue @@ -1,11 +1,11 @@ <template> <div id="sousuo" class="sousuo"> <!-- 鎼滅储妗� --> - <div class="ssk" v-show="ssk.show"> + <div class="ssk" v-if="ssk.show"> <span @click="ssjmxs" style="float: left; height: 100%; width: 80%; overflow: hidden" - ><i class="el-icon-search" style="padding: 0px 15px 0px 20px"></i + ><i class="el-icon-search" style="padding: 0px 15px 0px 20px;font-size: 0.15rem;"></i >{{ syssval }}</span > <span @@ -32,9 +32,9 @@ </span> --> </div> <!-- 鎼滅储鐣岄潰 --> - <div class="ssjm" v-show="ssjm"> + <div class="ssjm" v-if="ssjm"> <!-- 鎼滅储妗� --> - <div class="search-container" style="margin: 0.1rem 0"> + <div class="search-container"> <div class="back" @click="cancless"></div> <el-input placeholder="杈撳叆鍏抽敭瀛楁悳绱㈠湴鍥�" @@ -98,7 +98,7 @@ height: 0.4rem; line-height: 0.4rem; background: #fff; - border-radius: 0.15rem; + border-radius: 0.14rem; color: black; font-size: 0.14rem; } @@ -111,6 +111,7 @@ width: 100%; height: 100%; top: 0; + left: 0; background-color: #f3f3f3; z-index: 99; } @@ -142,12 +143,14 @@ .el-input /deep/ .el-input__inner { border: none; font-weight: 500; - font-size: 17px; + font-size: 0.14rem; color: #3e3d3d; } .el-select { - width: 80px; + width: 0.8rem; position: relative; + font-size: 0.14rem; + } .el-select:after { content: ""; @@ -163,14 +166,11 @@ padding-right: 25px; } .el-input /deep/ .el-input-group__append .el-button { - font-size: 15px; + font-size: 0.14rem; color: #ffffff; - line-height: 17px; background: #2477ff; border-radius: 13px; padding: 10px; - width: 62px; - height: 33px; } .el-scrollbar .hover { diff --git a/src/components/poplayer/history2.vue b/src/components/poplayer/history2.vue index e134ba1..03a62e0 100644 --- a/src/components/poplayer/history2.vue +++ b/src/components/poplayer/history2.vue @@ -39,7 +39,8 @@ mounted() { store.setNavigatorShow(false); store.setMapToolShow(false); - window.mapapi.getView().setCenter([4.606512, 2.621472]); + // window.mapapi.getView().setCenter(ol.proj.fromLonLat([4.606512, 2.621472])); + window.mapapi.getView().setCenter(ol.proj.fromLonLat([116.505348, 39.795592])); addHistoryLayer(this.currentValue); if (_GLOBAL.GPSMarker) { window.mapapi.removeLayer(_GLOBAL.GPSMarker); @@ -53,7 +54,7 @@ close() { store.setHistoryShow(false); window.mapapi.removeLayer(this.$global.historyLayer); - window.mapapi.getView().setCenter([116.505348, 39.795592]); + window.mapapi.getView().setCenter(ol.proj.fromLonLat([116.505348, 39.795592])); store.setNavigatorShow(true); store.setMapToolShow(true); }, @@ -68,7 +69,7 @@ } .searchBtn { - width: 51px; + width: 0.4rem; /* height: 40px; */ } @@ -77,7 +78,6 @@ right: 10px; bottom: 18px; width: 48px; - height: 594px; background: #ffffff; box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.21); border-radius: 13px; @@ -88,10 +88,9 @@ } .listBox li { font-weight: bold; - font-size: 15px; + font-size: 0.12rem; + line-height: 0.25rem; color: #1c222f; - height: 28px; - line-height: 28px; border-bottom: 1px solid #e5e5e5; text-align: center; } @@ -104,12 +103,6 @@ color: #127dff; } -.mapLeft { - float: left; - position: absolute; - width: 100vw; - height: 100vh; -} .active { /* background-color: #4590d7; */ diff --git a/src/components/rightMenu/bottom2.vue b/src/components/rightMenu/bottom2.vue index 85a6458..56874b4 100644 --- a/src/components/rightMenu/bottom2.vue +++ b/src/components/rightMenu/bottom2.vue @@ -10,7 +10,7 @@ <img src="@/assets/img/collection/recover.png" /> </div> </div> - <div class="mapTool2" v-show="test.fwval"> + <div class="mapTool2"> <div class="tool-rotate" @click="zoomIn" title="鏀惧ぇ"> <img src="@/assets/img/collection/add.png" /> </div> @@ -23,41 +23,45 @@ </template> <style scoped> + .mapTool { - width: 51px; + width: 0.42rem; /* border-radius: 10px; */ /* background: #ffffff; */ /* margin-bottom: 8px; */ } + .mapTool .tool-rotate img { width: 100%; } + .mapTool2 { - width: 40px; - height: 80px; - margin: 0 auto; + width: 0.32rem; + margin: auto; background: #ffffff; box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.21); - border-radius: 13px; + border-radius: 10px; display: flex; flex-direction: column; - justify-content: space-evenly; align-items: center; + justify-content: center; } -.mapTool2 .tool-rotate img { - width: 18px; -} -.border { - width: 36px; - height: 1px; - border: 1px solid #e5e5e5; +.mapTool2 .tool-rotate{ + height: 0.33rem; + line-height: 0.33rem; } -/* .tool-rotate { - padding: 8px; -} */ +.mapTool2 .tool-rotate img { + width: 0.17rem; +} + +.border { + width: 100%; + height: 1px; + border: 0.005rem solid #f3f3f3; +} </style> - + <script> import Bus from "../../js/bus.js"; import store from "@/utils/store2"; @@ -74,7 +78,7 @@ }, }; }, - mounted() {}, + mounted() { }, watch: { "state.show": { handler(newVal) { @@ -121,7 +125,7 @@ flyBack() { window.mapapi.getView().animate({ // 鍙缃渶瑕佺殑灞炴�у嵆鍙� - center: [116.52217697339846, 39.75979421847914], // 涓績鐐� + center: ol.proj.fromLonLat([116.52217697339846, 39.75979421847914]), // 涓績鐐� zoom: 12, // 缂╂斁绾у埆 rotation: undefined, // 缂╂斁瀹屾垚view瑙嗗浘鏃嬭浆寮у害 duration: 1000, // 缂╂斁鎸佺画鏃堕棿锛岄粯璁や笉闇�瑕佽缃� diff --git a/src/components/rightNavigation/NavigationBar2.vue b/src/components/rightNavigation/NavigationBar2.vue index d9f3beb..2e2f053 100644 --- a/src/components/rightNavigation/NavigationBar2.vue +++ b/src/components/rightNavigation/NavigationBar2.vue @@ -232,7 +232,7 @@ } .menuItem { - width: 51px; + width: 0.42rem; /* width: 32px; color: black; margin-top: 10px; diff --git a/src/components/sideMenu/layerMenu/layerPanel2.vue b/src/components/sideMenu/layerMenu/layerPanel2.vue index 6a2f1ba..4848bbb 100644 --- a/src/components/sideMenu/layerMenu/layerPanel2.vue +++ b/src/components/sideMenu/layerMenu/layerPanel2.vue @@ -209,7 +209,7 @@ ], zhuantiList: ZTTitem, //curMapModelIndex: 1, - curEMapModelIndex: 1, + curEMapModelIndex: 0, curSMapModelIndex: -1, curAreaTypeIndex: -1, curYjIndex: -1, @@ -277,7 +277,7 @@ case "浜岀淮鍦板浘": loadGeoMap(); loadBaseMap(); - addAnnotationLayer(); + // addAnnotationLayer(); addHxLayer(); addYzLayer(); window.mapapi.getView().setZoom(14); @@ -443,7 +443,7 @@ url: "https://skyzt.bda.gov.cn/gisserver/wmsserver/chengshiguihua_dikuaibianhao", params: { VERSION: "1.1.1", - SRS: "EPSG:4326", + SRS: "EPSG:3857", FORMAT: "image/png", TILED: true, LAYERS: "", @@ -588,23 +588,23 @@ font-family: "寰蒋闆呴粦"; font-weight: 400; cursor: pointer; + text-align: center; } .mapMode .layerItem { - width: 91px; + width: 0.8rem; margin-right: 24px; } .mapMode img { display: block; - width: 91px; + width: 100%; border-radius: 11px; border: 1px dashed #127dff; margin-bottom: 11px; } span { font-family: "寰蒋闆呴粦"; - font-weight: 500; - font-size: 15px; - color: #212121; + font-size: 0.12rem; + color: #6e6969; line-height: 12px; } .mapMode .active, @@ -642,7 +642,7 @@ margin: 0 auto; /* background-color: green; */ display: block; - width: 53px; + width: 0.5rem; border-radius: 11px; box-shadow: 0 0 5px 5px rgb(196 222 236 / 30%); margin-bottom: 11px; diff --git a/src/components/sideMenu/layerTreePanel/layerTreePanel2.vue b/src/components/sideMenu/layerTreePanel/layerTreePanel2.vue index 023b178..51426ba 100644 --- a/src/components/sideMenu/layerTreePanel/layerTreePanel2.vue +++ b/src/components/sideMenu/layerTreePanel/layerTreePanel2.vue @@ -1890,7 +1890,7 @@ source: clusterSource, style: function (feature) { var size = feature.get("features").length; - if (size == 1) { + if (size <= 100) { return new ol.style.Style({ image: new ol.style.Icon({ anchor: [0.5, 1], @@ -1944,7 +1944,7 @@ source: clusterSource, style: function (feature) { var size = feature.get("features").length; - if (size == 1) { + if (size <= 100) { return new ol.style.Style({ image: new ol.style.Icon({ anchor: [0.5, 1], @@ -2032,7 +2032,7 @@ source: clusterSource, style: function (feature) { var size = feature.get("features").length; - if (size == 1) { + if (size <= 100) { return new ol.style.Style({ image: new ol.style.Icon({ anchor: [0.5, 1], @@ -2298,7 +2298,7 @@ // 鍒涘缓鑱氬悎灞� var clusterSource = new ol.source.Cluster({ - distance: 40, + distance: 200, source: vectorSource, }); @@ -2308,7 +2308,7 @@ source: clusterSource, style: function (feature) { var size = feature.get("features").length; - if (size == 1) { + if (size <= 1300) { return new ol.style.Style({ image: new ol.style.Icon({ anchor: [0.5, 1], diff --git a/src/components/viewer2.vue b/src/components/viewer2.vue index 01f4e22..4a27409 100644 --- a/src/components/viewer2.vue +++ b/src/components/viewer2.vue @@ -57,7 +57,7 @@ </template> <script> import store from "@/utils/store2.js"; -import { setClick, leftClick,touchClick } from "@/utils/map2.js"; +import { setClick, leftClick, touchClick } from "@/utils/map2.js"; import _GLOBAL from "@/assets/GLOBAL2"; // import { leftClick, loadLayer } from "@/utils/map.js"; import leftBottom from "@/components/leftMenu/bottom2.vue"; @@ -87,6 +87,7 @@ addHxLayer, addYzLayer, loadBaseMap, + loadGeoMap, listenDirection, getCurrentPosition } from "@/utils/tool"; @@ -145,7 +146,7 @@ state: store.history, }; }, - created() {}, + created() { }, mounted() { this.$nextTick(function () { ol.Map.prototype.getLayerByName = function (name) { @@ -162,7 +163,7 @@ const TDTKey = "f234b950740b8c2e0d9959a51c169d21"; const tiandituUrl = "http://t0.tianditu.gov.cn"; - let options = { proj: "EPSG:4326", layer: "img", matrixSets: "c" }; + let options = { proj: "EPSG:3857", layer: "img", matrixSets: "c" }; let _proj = options.proj; let _layer = options.layer; let _key = TDTKey; @@ -173,12 +174,12 @@ let origin = projectionExtent ? ol.extent.getTopLeft(projectionExtent) : [-180, 90]; - let fromLonLat = ol.proj.getTransform("EPSG:4326", projection); + let fromLonLat = ol.proj.getTransform("EPSG:3857", projection); let width = projectionExtent ? ol.extent.getWidth(projectionExtent) : ol.extent.getWidth( - ol.extent.applyTransform([-180.0, -90.0, 180.0, 90.0], fromLonLat) - ); + ol.extent.applyTransform([-180.0, -90.0, 180.0, 90.0], fromLonLat) + ); let resolutions = []; let matrixIds = []; @@ -257,17 +258,23 @@ layers: layers, target: "openlayerContainer", view: new ol.View({ - center: [116.505348, 39.795592], - projection: "EPSG:4326", - zoom: 12, - minZoom: 9.5, + center: ol.proj.fromLonLat([116.505348, 39.795592]), + projection: "EPSG:3857", + zoom: 11.5, + minZoom: 7, + maxZoom: 19.5, enableRotation: false, + // constrainResolution: true, + smoothResolutionConstraint: false, }), }); window.mapapi = map; - addImageLayer(); - addAnnotationLayer(); + // addImageLayer(); + // addAnnotationLayer(); + window.mapapi.getView().setZoom(14); + loadGeoMap(); + loadBaseMap(); addHxLayer(); addYzLayer(); @@ -394,7 +401,7 @@ console.log(window.gisBaseUrl); Axios.get( window.gisBaseUrl + - "/gisserver/wfsserver/qiyelianqiye?version=1.3.0&request=GetFeature&format=json&typename=浼佷笟閾句紒涓�" + "/gisserver/wfsserver/qiyelianqiye?version=1.3.0&request=GetFeature&format=json&typename=浼佷笟閾句紒涓�" ).then((res) => { console.log(res); }); diff --git a/src/utils/map2.js b/src/utils/map2.js index 30f1293..baeefb1 100644 --- a/src/utils/map2.js +++ b/src/utils/map2.js @@ -2245,6 +2245,7 @@ //openlayer 鍦板浘鐐瑰嚮浜嬩欢 export function setClick(state) { function handleClick(e) { + console.log(e,'鍦板浘鐐瑰嚮') store.setLayerPanelShow(false); // 鍦熷湴绠$悊 if (store.tdglInfo.flag) { diff --git a/src/utils/tool.js b/src/utils/tool.js index a8e0345..ae201d3 100644 --- a/src/utils/tool.js +++ b/src/utils/tool.js @@ -30,6 +30,8 @@ _GLOBAL.ImageLayer = new ol.layer.Tile({ source: new ol.source.XYZ({ url: `${'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'}/tile/{z}/{y}/{x}`, + projection:"EPSG:3857", + tileSize: 512 }), }); window.mapapi.addLayer(_GLOBAL.ImageLayer); @@ -43,7 +45,7 @@ url: "https://skyzt.bda.gov.cn/gisserver/wmsserver/shiliangditu_baisexi_wms", //鍥惧眰鍦板潃 params: { VERSION: "1.1.1", - SRS: "EPSG:4326", + SRS: "EPSG:3857", FORMAT: "image/png", TILED: true, LAYERS: "", @@ -88,7 +90,7 @@ url: 'https://skyzt.bda.gov.cn/gisserver/wmsserver/YZ_BJ60', params: { 'VERSION': '1.1.1', - 'SRS': 'EPSG:4326', + 'SRS': 'EPSG:3857', 'FORMAT': 'image/png', 'TILED': true, "LAYERS": '' @@ -106,7 +108,7 @@ url: 'https://skyzt.bda.gov.cn/gisserver/wmsserver/YZ_BJ',//鍥惧眰鍦板潃 params: { 'VERSION': '1.1.1', - 'SRS': 'EPSG:4326', + 'SRS': 'EPSG:3857', 'FORMAT': 'image/png', 'TILED': true, "LAYERS": '' @@ -124,6 +126,7 @@ } _GLOBAL.historyLayer = new ol.layer.Tile({ source: new ol.source.XYZ({ + projection:"EPSG:3857", url: `https://skyzt.bda.gov.cn/yzAdapter/Vector/?request=1&year=${layerName}&type=Sate&level={z}&x={x}&y={y}`, }) }); diff --git a/src/utils/transform.js b/src/utils/transform.js index 471f66c..9c40baf 100644 --- a/src/utils/transform.js +++ b/src/utils/transform.js @@ -139,8 +139,8 @@ }); ol.proj.addProjection(gcj02Mecator); // 灏�4326/3857杞负gcj02鍧愭爣鐨勬柟娉曞畾涔� -ol.proj.addCoordinateTransforms('EPSG:3857', gcj02Mecator, projzh.smerc2gmerc, projzh.gmerc2smerc); ol.proj.addCoordinateTransforms('EPSG:4326', gcj02Mecator, projzh.ll2gmerc, projzh.gmerc2ll); +ol.proj.addCoordinateTransforms('EPSG:3857', gcj02Mecator, projzh.smerc2gmerc, projzh.gmerc2smerc); // 鎴戜娇鐢ㄧ殑react锛屾墍浠ヨ繖閲岄渶瑕佸鍑哄畾涔夌殑gcj02Mecator锛屾彁渚涚粰澶栭儴浣跨敤 export default gcj02Mecator; -- Gitblit v1.9.3