From 26385d2c91d763259eb1ef55c3255e5ca01717a5 Mon Sep 17 00:00:00 2001 From: ZhAkps <46207005+ZhAkps@users.noreply.github.com> Date: 星期二, 06 二月 2024 18:18:08 +0800 Subject: [PATCH] Merge branch 'master' of http://106.120.22.35:48888/r/PM20221203225_MobileWeb --- src/components/viewer2.vue | 112 ++++++++++++++++++++++++++++--------------------------- 1 files changed, 57 insertions(+), 55 deletions(-) diff --git a/src/components/viewer2.vue b/src/components/viewer2.vue index 24b7784..65aad7c 100644 --- a/src/components/viewer2.vue +++ b/src/components/viewer2.vue @@ -3,14 +3,6 @@ <!-- openlayer --> <div id="openlayerContainer" @click="clicktoclose"></div> - <div id="ponitPanel"> - <div class="title">鐐逛綅璇︽儏</div> - <div class="content"> - - </div> - - </div> - <!-- 椤甸潰鏍囬 --> <div class="titleBg"> <img src="@/assets/img/title/title.png" /> @@ -65,9 +57,9 @@ </template> <script> import store from "@/utils/store2.js"; -import { setClick } from '@/utils/map2.js' +import { setClick,leftClick } from '@/utils/map2.js' import _GLOBAL from "@/assets/GLOBAL2"; -import { leftClick, loadLayer } from "@/utils/map.js"; +// 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"; @@ -85,18 +77,20 @@ import roamPanel from "./sideMenu/roamPanel/main.vue"; import layerTreePanel from "./sideMenu/layerTreePanel/main2.vue"; import history from "./poplayer/history.vue"; -import landAdminInfo from "./poplayer/landAdmin.vue"; -import poplayer from "./poplayer/main.vue"; -import sliderAlpha from "./sideMenu/sliderAlpha/main.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"; +// 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", @@ -120,7 +114,7 @@ "my-history": history, "my-land-admin-info": landAdminInfo, "my-slider": sliderAlpha, - "my-poplayer": poplayer + "my-poplayer":mainPoplayer }, data() { return { @@ -148,7 +142,7 @@ this.$nextTick(function () { console.log("openlayer init"); - Map.prototype.getLayerByName = function (name) { + ol.Map.prototype.getLayerByName = function (name) { var layer; this.getLayers().array_.forEach(function (lyr) { if (name == lyr.values_.name) { @@ -168,13 +162,13 @@ 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:4326", 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 = []; @@ -182,7 +176,7 @@ 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, @@ -191,7 +185,7 @@ "url:", `${tiandituUrl}/${_layer}_${_matrixSets}/wmts?tk=${_key}` ); - let wmtsSource = new WMTS({ + let wmtsSource = new ol.source.WMTS({ url: `${tiandituUrl}/${_layer}_${_matrixSets}/wmts?tk=${_key}`, layer: _layer, version: "1.0.0", @@ -202,13 +196,13 @@ style: "default", tileGrid: wmtsTileGrid, }); - let wmtsLayer = new TileLayer({ + let wmtsLayer = new ol.layer.Tile({ name: "褰卞儚鍦板浘", id: _layer + "_" + _matrixSets, source: wmtsSource, }); - let wmtsSource1 = new WMTS({ + let wmtsSource1 = new ol.source.WMTS({ url: `${tiandituUrl}/cia_${_matrixSets}/wmts?tk=${_key}`, layer: "cia", version: "1.0.0", @@ -219,13 +213,13 @@ style: "default", tileGrid: wmtsTileGrid, }); - let wmtsLayer1 = new TileLayer({ + let wmtsLayer1 = new ol.layer.Tile({ name: "璺綉鍥惧眰", id: "cia_c", source: wmtsSource1, }); - let wmtsSource2 = new WMTS({ + let wmtsSource2 = new ol.source.WMTS({ url: `${tiandituUrl}/vec_c/wmts?tk=${_key}`, layer: "vec", version: "1.0.0", @@ -236,7 +230,7 @@ style: "default", tileGrid: wmtsTileGrid, }); - let wmtsLayer2 = new TileLayer({ + let wmtsLayer2 = new ol.layer.Tile({ name: "浜岀淮鍦板浘", id: "cva_c", source: wmtsSource2, @@ -249,10 +243,10 @@ ////璺綉 layers.push(wmtsLayer1); - const map = new Map({ + const map = new ol.Map({ layers: layers, target: "openlayerContainer", - view: new View({ + view: new ol.View({ center: [116.505348, 39.795592], projection: "EPSG:4326", zoom: 12, @@ -261,6 +255,32 @@ window.map = map; setClick(true) + leftClick() + // var url = + // "https://skyzt.bda.gov.cn/gisserver/tmsserver/chengshiguihua_dikuaibianhao_tms/"; + + // var tmslayer = new ol.layer.Tile({ + // source: new ol.source.XYZ({ + // projection: projection, + // tileGrid: ol.tilegrid.createXYZ({ + // extent: [50.731, -90, 180, 70.0478], + // }), + // tileUrlFunction: function (tileCoord, pixelRatio, proj) { + // // return url + (tileCoord[0] - 1) + '/' + tileCoord[1] + '/' + (Math.pow(2, tileCoord[0] - 1) + tileCoord[2]) + '.jpeg'; + // return ( + // url + + // (tileCoord[0] - 1) + + // "/" + + // tileCoord[1] + + // "/" + + // (Math.pow(2, tileCoord[0] - 1) + tileCoord[2]) + + // ".jpeg" + // ); + // }, + // }), + // }); + // window.map.addLayer(tmslayer); + window.layerOpen = function (name, options) { layuiLayer.close(SmartEarthPopupData.layerProp); @@ -391,7 +411,7 @@ width: 100%; height: 100%; background: black; - position: absolute !important; + /* position: absolute !important; */ z-index: 0; } @@ -427,23 +447,5 @@ .colseBtn img { width: 30px; } - -#ponitPanel { - width: 80vw; - background-repeat: no-repeat; - background-size: 100% 100%; - background-image: url("./poplayer/img/bg.png"); - z-index: 999; - color: #fff; - font-family: SourceHanSansSC-R; - padding: 10px 5px 10px 5px; - box-sizing: border-box; - font-size: 16px; - pointer-events: all; - position: absolute; - bottom: 12px; - left: -50px; -} - </style> -- Gitblit v1.9.3