From a6c2f0e8d84799f88b98c2736ed3108d32ef9327 Mon Sep 17 00:00:00 2001
From: ZhAkps <46207005+ZhAkps@users.noreply.github.com>
Date: 星期二, 06 二月 2024 10:37:32 +0800
Subject: [PATCH] 增加二维
---
src/components/viewer2.vue | 128 +++++++++++++++++++++++++-----------------
1 files changed, 77 insertions(+), 51 deletions(-)
diff --git a/src/components/viewer2.vue b/src/components/viewer2.vue
index 5937e50..158d9f6 100644
--- a/src/components/viewer2.vue
+++ b/src/components/viewer2.vue
@@ -14,9 +14,9 @@
<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>
@@ -24,47 +24,47 @@
<!-- 鍘熷乏涓嬭彍鍗� -->
<!-- <my-menu v-on:getshowsta="datafromchild" ref="menu"></my-menu> -->
<!-- 宸︿笅蹇嵎鍖哄煙锛堝浣嶃�佹寚鍖楃瓑锛� -->
- <!-- <my-left-bottom :test="childrendata"></my-left-bottom> -->
+ <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>
</div>
</template>
<script>
-import store from "@/utils/store.js";
+import store from "@/utils/store2.js";
-import _GLOBAL from "@/assets/GLOBAL";
+import _GLOBAL from "@/assets/GLOBAL2";
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 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 directionPanel from "./sideMenu/directionMenu/main.vue";
@@ -74,7 +74,7 @@
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 layerTreePanel from "./sideMenu/layerTreePanel/main2.vue";
import history from "./poplayer/history.vue";
import landAdminInfo from "./poplayer/landAdmin.vue";
import sliderAlpha from "./sideMenu/sliderAlpha/main.vue";
@@ -83,19 +83,10 @@
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 { 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";
export default {
name: "viewer2",
@@ -144,19 +135,28 @@
created() {},
mounted() {
this.$nextTick(function () {
-
- console.log('openlayer init');
+ console.log("openlayer init");
+
+ 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:4326", layer: "img", matrixSets: "c" };
let _proj = options.proj;
let _layer = options.layer;
let _key = TDTKey;
let _matrixSets = options.matrixSets;
-
+
let projection = getProjection(_proj);
let projectionExtent = projection.getExtent();
let origin = projectionExtent ? getTopLeft(projectionExtent) : [-180, 90];
@@ -176,7 +176,10 @@
resolutions: resolutions,
matrixIds: matrixIds,
});
- console.log('url:',`${tiandituUrl}/${_layer}_${_matrixSets}/wmts?tk=${_key}`);
+ console.log(
+ "url:",
+ `${tiandituUrl}/${_layer}_${_matrixSets}/wmts?tk=${_key}`
+ );
let wmtsSource = new WMTS({
url: `${tiandituUrl}/${_layer}_${_matrixSets}/wmts?tk=${_key}`,
layer: _layer,
@@ -189,13 +192,14 @@
tileGrid: wmtsTileGrid,
});
let wmtsLayer = new TileLayer({
+ name: "褰卞儚鍦板浘",
id: _layer + "_" + _matrixSets,
source: wmtsSource,
});
let wmtsSource1 = new WMTS({
- url: `${tiandituUrl}/img_${_matrixSets}/wmts?tk=${_key}`,
- layer: 'img',
+ url: `${tiandituUrl}/cia_${_matrixSets}/wmts?tk=${_key}`,
+ layer: "cia",
version: "1.0.0",
matrixSet: _matrixSets,
format: "tiles",
@@ -205,24 +209,46 @@
tileGrid: wmtsTileGrid,
});
let wmtsLayer1 = new TileLayer({
- id: _layer + "_" + _matrixSets,
+ name: "璺綉鍥惧眰",
+ id: "cia_c",
source: wmtsSource1,
});
- layers.push(wmtsLayer1);
+
+ let wmtsSource2 = new 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 TileLayer({
+ name: "浜岀淮鍦板浘",
+ id: "cva_c",
+ source: wmtsSource2,
+ });
+ wmtsLayer2.setVisible(false);
+ ////鍗槦褰卞儚
layers.push(wmtsLayer);
-
-
+ ////浜岀淮鍦板浘
+ layers.push(wmtsLayer2);
+ ////璺綉
+ layers.push(wmtsLayer1);
const map = new Map({
layers: layers,
target: "openlayerContainer",
view: new View({
- center: [-6655.5402445057125, 6709968.258934638],
+ center: [116.505348, 39.795592],
+ projection: "EPSG:4326",
zoom: 12,
}),
});
-
+ window.map = map;
window.layerOpen = function (name, options) {
layuiLayer.close(SmartEarthPopupData.layerProp);
--
Gitblit v1.9.3