From 065669d31914a2f65c48d351417f48e49bd79c0c Mon Sep 17 00:00:00 2001
From: lixuliang <lixuliang_hd@126.com>
Date: 星期三, 13 三月 2024 11:30:46 +0800
Subject: [PATCH] Merge branch 'master' of http://103.135.160.14:9034/r/PM20221203225_MobileWeb
---
src/components/viewer2.vue | 276 ++++++++++++++++++++++++++++++++++---------------------
1 files changed, 170 insertions(+), 106 deletions(-)
diff --git a/src/components/viewer2.vue b/src/components/viewer2.vue
index 5937e50..4a27409 100644
--- a/src/components/viewer2.vue
+++ b/src/components/viewer2.vue
@@ -4,19 +4,19 @@
<div id="openlayerContainer" @click="clicktoclose"></div>
<!-- 椤甸潰鏍囬 -->
- <div class="titleBg">
+ <!-- <div class="titleBg">
<img src="@/assets/img/title/title.png" />
- </div>
+ </div> -->
<!-- 鍘嗗彶褰卞儚 -->
- <!-- <my-history v-if="state.show"></my-history> -->
+ <my-history v-if="state.show"></my-history>
<!-- 鍘嗗彶褰卞儚鍏抽棴鎸夐挳 -->
<!-- <div class="colseBtn" v-if="state.show" @click="closeHistory(false)">
<img class="searchBtn" src="@/assets/closeinput1.png" />
</div> -->
<!-- 鍙充晶瀵艰埅妗� -->
- <!-- <my-navigation-bar></my-navigation-bar> -->
+ <my-navigation-bar></my-navigation-bar>
<!-- 鎼滅储妗� -->
- <!-- <my-sousuo v-if="!state.show" v-show="childrendata.ssval"></my-sousuo> -->
+ <my-sousuo v-if="!state.show" v-show="childrendata.ssval"></my-sousuo>
<!-- 鍙充笂蹇嵎鍖哄煙锛堝伐绋嬫爲銆佺┖闂村垎鏋愶級 -->
<!-- <div class="right-top">
<my-layertree :rightshowzy="childrendata"></my-layertree>
@@ -26,76 +26,80 @@
<!-- 宸︿笅蹇嵎鍖哄煙锛堝浣嶃�佹寚鍖楃瓑锛� -->
<!-- <my-left-bottom :test="childrendata"></my-left-bottom> -->
<!-- 鍙充笅蹇嵎鍖哄煙锛堟斁澶х缉灏忥級 -->
- <!-- <my-right-bottom :test="childrendata"></my-right-bottom> -->
+ <my-right-bottom :test="childrendata"></my-right-bottom>
<!-- 鍚勭闈㈡澘 -->
<!-- 璁剧疆闈㈡澘 -->
- <!-- <my-setting-panel></my-setting-panel> -->
+ <my-setting-panel></my-setting-panel>
<!-- 浣嶇疆闈㈡澘 -->
- <!-- <my-collection-panel></my-collection-panel> -->
+ <my-collection-panel></my-collection-panel>
<!-- 鎸囧寳閽堥潰鏉� -->
<!-- <my-direction-panel></my-direction-panel> -->
<!-- 鏂板鏀惰棌闈㈡澘 -->
- <!-- <my-add-collection-panel></my-add-collection-panel> -->
+ <my-add-collection-panel></my-add-collection-panel>
<!-- 绐ㄤ簳銆佹憚鍍忓ご缁熻闈㈡澘 -->
- <!-- <my-statistics-panel></my-statistics-panel> -->
+ <my-statistics-panel></my-statistics-panel>
<!-- 绐ㄤ簳缁熻鍒嗘瀽闈㈡澘 -->
- <!-- <my-manhole-panel></my-manhole-panel> -->
+ <my-manhole-panel></my-manhole-panel>
<!-- 鎽勫儚澶寸粺璁″垎鏋愰潰鏉� -->
- <!-- <my-video-panel></my-video-panel> -->
+ <my-video-panel></my-video-panel>
<!-- 鍥惧眰闈㈡澘 -->
- <!-- <my-layer-panel></my-layer-panel> -->
+ <my-layer-panel></my-layer-panel>
<!-- 婕父闈㈡澘 -->
- <!-- <my-roam-panel></my-roam-panel> -->
+ <my-roam-panel></my-roam-panel>
<!-- 鍥惧眰鏍戦潰鏉� -->
- <!-- <my-layer-tree-panel></my-layer-tree-panel> -->
+ <my-layer-tree-panel></my-layer-tree-panel>
<!-- 鍦熷湴绠＄悊寮圭獥 -->
- <!-- <my-land-admin-info></my-land-admin-info>
- <my-slider></my-slider> -->
+ <my-land-admin-info></my-land-admin-info>
+ <my-slider></my-slider>
+ <my-poplayer></my-poplayer>
</div>
</template>
<script>
-import store from "@/utils/store.js";
-
-import _GLOBAL from "@/assets/GLOBAL";
-import { leftClick, loadLayer } from "@/utils/map.js";
-import leftBottom from "@/components/leftMenu/bottom.vue";
-import rightBottom from "@/components/rightMenu/bottom.vue";
-import sousuo from "@/components/leftMenu/sousuo.vue";
+import store from "@/utils/store2.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";
+import rightBottom from "@/components/rightMenu/bottom2.vue";
+import sousuo from "@/components/leftMenu/sousuo2.vue";
import menu from "@/components/menu/menu.vue";
-import NavigationBar from "./rightNavigation/NavigationBar.vue";
-import layertree from "@/components/rightMenu/layerTree.vue";
+import NavigationBar from "./rightNavigation/NavigationBar2.vue";
+import layertree from "@/components/rightMenu/layerTree2.vue";
import settingPanel from "./sideMenu/settingMenu/main.vue";
-import collectionPanel from "./sideMenu/collectionMenu/main.vue";
+import collectionPanel from "./sideMenu/collectionMenu/main2.vue";
import directionPanel from "./sideMenu/directionMenu/main.vue";
-import addCollectionPanel from "./sideMenu/addCollectionMenu/main.vue";
+import addCollectionPanel from "./sideMenu/addCollectionMenu/main2.vue";
import statisticsPanel from "./sideMenu/statisticsMenu/main.vue";
import manholePanel from "./sideMenu/manholeStatistics/main.vue";
import videoPanel from "./sideMenu/videoStatistics/main.vue";
import layerPanel from "./sideMenu/layerMenu/main2.vue";
import roamPanel from "./sideMenu/roamPanel/main.vue";
-import layerTreePanel from "./sideMenu/layerTreePanel/main.vue";
-import history from "./poplayer/history.vue";
-import landAdminInfo from "./poplayer/landAdmin.vue";
-import sliderAlpha from "./sideMenu/sliderAlpha/main.vue";
+import layerTreePanel from "./sideMenu/layerTreePanel/main2.vue";
+import history from "./poplayer/history2.vue";
+import landAdminInfo from "./poplayer/landAdmin2.vue";
+import mainPoplayer from "./poplayer/poplayer2.vue";
+import sliderAlpha from "./sideMenu/sliderAlpha/main2.vue";
import Axios from "axios";
-
-import Map from "ol/Map.js";
-import TileLayer from "ol/layer/Tile.js";
-import View from "ol/View.js";
import {
- get as getProjection,
- getTransform
-} from 'ol/proj';
-import {
- getWidth,
- getTopLeft,
- applyTransform
-} from 'ol/extent';
-import
- WMTS
- from 'ol/source/WMTS';
-import WMTSTileGrid from 'ol/tilegrid/WMTS';
+ addImageLayer,
+ addAnnotationLayer,
+ addHxLayer,
+ addYzLayer,
+ loadBaseMap,
+ loadGeoMap,
+ listenDirection,
+ getCurrentPosition
+} from "@/utils/tool";
+// import Map from "ol/Map.js";
+// import TileLayer from "ol/layer/Tile.js";
+// import View from "ol/View.js";
+// import { get as getProjection, getTransform } from "ol/proj";
+// import { getWidth, getTopLeft, applyTransform } from "ol/extent";
+// import WMTS from "ol/source/WMTS";
+// import WMTSTileGrid from "ol/tilegrid/WMTS";
+// import XYZ from "ol/source/XYZ";
+// import {createXYZ} from "ol/tilegrid";
export default {
name: "viewer2",
@@ -119,6 +123,7 @@
"my-history": history,
"my-land-admin-info": landAdminInfo,
"my-slider": sliderAlpha,
+ "my-poplayer": mainPoplayer,
},
data() {
return {
@@ -141,29 +146,40 @@
state: store.history,
};
},
- created() {},
+ created() { },
mounted() {
this.$nextTick(function () {
-
- console.log('openlayer init');
+ ol.Map.prototype.getLayerByName = function (name) {
+ var layer;
+ this.getLayers().array_.forEach(function (lyr) {
+ if (name == lyr.values_.name) {
+ layer = lyr;
+ }
+ });
+ return layer;
+ };
const layers = [];
- const TDTKey = 'f234b950740b8c2e0d9959a51c169d21';
- const tiandituUrl = 'http://t0.tianditu.gov.cn';
- let options = {proj:'EPSG:4326',layer:'cia',matrixSets:"c"};
+ const TDTKey = "f234b950740b8c2e0d9959a51c169d21";
+ const tiandituUrl = "http://t0.tianditu.gov.cn";
+ let options = { proj: "EPSG:3857", layer: "img", matrixSets: "c" };
let _proj = options.proj;
let _layer = options.layer;
let _key = TDTKey;
let _matrixSets = options.matrixSets;
-
- let projection = getProjection(_proj);
+
+ let projection = ol.proj.get(_proj);
let projectionExtent = projection.getExtent();
- let origin = projectionExtent ? getTopLeft(projectionExtent) : [-180, 90];
- let fromLonLat = getTransform("EPSG:4326", projection);
+ let origin = projectionExtent
+ ? ol.extent.getTopLeft(projectionExtent)
+ : [-180, 90];
+ let fromLonLat = ol.proj.getTransform("EPSG:3857", projection);
let width = projectionExtent
- ? getWidth(projectionExtent)
- : getWidth(applyTransform([-180.0, -90.0, 180.0, 90.0], fromLonLat));
+ ? ol.extent.getWidth(projectionExtent)
+ : ol.extent.getWidth(
+ ol.extent.applyTransform([-180.0, -90.0, 180.0, 90.0], fromLonLat)
+ );
let resolutions = [];
let matrixIds = [];
@@ -171,13 +187,16 @@
resolutions[z] = width / (256 * Math.pow(2, z));
matrixIds[z] = z;
}
- let wmtsTileGrid = new WMTSTileGrid({
+ let wmtsTileGrid = new ol.tilegrid.WMTS({
origin: origin,
resolutions: resolutions,
matrixIds: matrixIds,
});
- console.log('url:',`${tiandituUrl}/${_layer}_${_matrixSets}/wmts?tk=${_key}`);
- let wmtsSource = new WMTS({
+ console.log(
+ "url:",
+ `${tiandituUrl}/${_layer}_${_matrixSets}/wmts?tk=${_key}`
+ );
+ let wmtsSource = new ol.source.WMTS({
url: `${tiandituUrl}/${_layer}_${_matrixSets}/wmts?tk=${_key}`,
layer: _layer,
version: "1.0.0",
@@ -188,14 +207,15 @@
style: "default",
tileGrid: wmtsTileGrid,
});
- let wmtsLayer = new TileLayer({
+ let wmtsLayer = new ol.layer.Tile({
+ name: "褰卞儚鍦板浘",
id: _layer + "_" + _matrixSets,
source: wmtsSource,
});
- let wmtsSource1 = new WMTS({
- url: `${tiandituUrl}/img_${_matrixSets}/wmts?tk=${_key}`,
- layer: 'img',
+ let wmtsSource1 = new ol.source.WMTS({
+ url: `${tiandituUrl}/cia_${_matrixSets}/wmts?tk=${_key}`,
+ layer: "cia",
version: "1.0.0",
matrixSet: _matrixSets,
format: "tiles",
@@ -204,25 +224,66 @@
style: "default",
tileGrid: wmtsTileGrid,
});
- let wmtsLayer1 = new TileLayer({
- id: _layer + "_" + _matrixSets,
+ let wmtsLayer1 = new ol.layer.Tile({
+ name: "璺綉鍥惧眰",
+ id: "cia_c",
source: wmtsSource1,
});
- layers.push(wmtsLayer1);
- layers.push(wmtsLayer);
+ let wmtsSource2 = new ol.source.WMTS({
+ url: `${tiandituUrl}/vec_c/wmts?tk=${_key}`,
+ layer: "vec",
+ version: "1.0.0",
+ matrixSet: _matrixSets,
+ format: "tiles",
+ projection: projection,
+ requestEncoding: "KVP",
+ style: "default",
+ tileGrid: wmtsTileGrid,
+ });
+ let wmtsLayer2 = new ol.layer.Tile({
+ name: "浜岀淮鍦板浘",
+ id: "cva_c",
+ source: wmtsSource2,
+ });
+ // wmtsLayer2.setVisible(false);
+ ////浜岀淮鍦板浘
+ // layers.push(wmtsLayer2);
+ ////鍗槦褰卞儚
+ // layers.push(wmtsLayer);
+ ////璺綉
+ // layers.push(wmtsLayer1);
-
- const map = new Map({
+ const map = new ol.Map({
layers: layers,
target: "openlayerContainer",
- view: new View({
- center: [-6655.5402445057125, 6709968.258934638],
- zoom: 12,
+ view: new ol.View({
+ 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();
+ window.mapapi.getView().setZoom(14);
+ loadGeoMap();
+ loadBaseMap();
+ addHxLayer();
+ addYzLayer();
+ setClick(true);
+ touchClick();
+
+ getCurrentPosition();
+ listenDirection();
+ // leftClick()
window.layerOpen = function (name, options) {
layuiLayer.close(SmartEarthPopupData.layerProp);
@@ -280,34 +341,34 @@
},
methods: {
clicktoclose() {
- clearTimeout(this.timer);
- this.timer = setTimeout(() => {
- this.count++;
- if (this.count == 2) {
- // console.log("鍗曞嚮浜嬩欢");
- // 鍏抽棴鎵�鏈夊脊绐�
- //this.$refs.menu.closeall();
- // 娓呴櫎瀹氫綅涓殑浣嶇疆鏍囪
- //this.$refs.menu.clearFlyPoint();
- } else {
- // 鎵ц鏀惧ぇ鎿嶄綔
- // console.log("鍙屽嚮");
- // Viewer.camera.zoomIn();
- // console.log(window.clickPOI);
- let p = sgworld.Navigate.getDegrees();
- // console.log(p);
- Viewer.camera.flyTo({
- destination: Cesium.Cartesian3.fromDegrees(
- window.clickPOI.lon,
- window.clickPOI.lat,
- p.height / 1.8
- ),
- duration: 1.0,
- });
- }
- this.count = 0;
- }, 300);
- this.count++;
+ // clearTimeout(this.timer);
+ // this.timer = setTimeout(() => {
+ // this.count++;
+ // if (this.count == 2) {
+ // // console.log("鍗曞嚮浜嬩欢");
+ // // 鍏抽棴鎵�鏈夊脊绐�
+ // //this.$refs.menu.closeall();
+ // // 娓呴櫎瀹氫綅涓殑浣嶇疆鏍囪
+ // //this.$refs.menu.clearFlyPoint();
+ // } else {
+ // // 鎵ц鏀惧ぇ鎿嶄綔
+ // // console.log("鍙屽嚮");
+ // // Viewer.camera.zoomIn();
+ // // console.log(window.clickPOI);
+ // // let p = sgworld.Navigate.getDegrees();
+ // // console.log(p);
+ // // Viewer.camera.flyTo({
+ // // destination: Cesium.Cartesian3.fromDegrees(
+ // // window.clickPOI.lon,
+ // // window.clickPOI.lat,
+ // // p.height / 1.8
+ // // ),
+ // // duration: 1.0,
+ // // });
+ // }
+ // this.count = 0;
+ // }, 300);
+ // this.count++;
},
datafromchild(data) {
for (var i in data) {
@@ -340,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);
});
@@ -354,7 +415,8 @@
width: 100%;
height: 100%;
background: black;
- position: absolute !important;
+ /* position: absolute !important; */
+ z-index: 0;
}
.titleBg {
@@ -378,12 +440,14 @@
.bottomLeft {
display: none;
}
+
.colseBtn {
position: absolute;
z-index: 2;
top: 0.55rem;
left: 0.2rem;
}
+
.colseBtn img {
width: 30px;
}
--
Gitblit v1.9.3