From 478b9027e30a8ea8eba0c9360654b5f05fce62e5 Mon Sep 17 00:00:00 2001
From: ZhAkps <46207005+ZhAkps@users.noreply.github.com>
Date: 星期二, 06 二月 2024 15:38:16 +0800
Subject: [PATCH] 修改引用openlayer

---
 src/components/viewer2.vue |   71 ++++++++++++++++++++++++-----------
 1 files changed, 49 insertions(+), 22 deletions(-)

diff --git a/src/components/viewer2.vue b/src/components/viewer2.vue
index 158d9f6..efd53eb 100644
--- a/src/components/viewer2.vue
+++ b/src/components/viewer2.vue
@@ -80,13 +80,15 @@
 import sliderAlpha from "./sideMenu/sliderAlpha/main.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",
@@ -137,7 +139,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) {
@@ -157,13 +159,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 = [];
@@ -171,7 +173,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,
@@ -180,7 +182,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",
@@ -191,13 +193,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",
@@ -208,13 +210,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",
@@ -225,7 +227,7 @@
         style: "default",
         tileGrid: wmtsTileGrid,
       });
-      let wmtsLayer2 = new TileLayer({
+      let wmtsLayer2 = new ol.layer.Tile({
         name: "浜岀淮鍦板浘",
         id: "cva_c",
         source: wmtsSource2,
@@ -238,10 +240,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,
@@ -250,6 +252,31 @@
 
       window.map = map;
 
+      // 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);
 

--
Gitblit v1.9.3