修改引用openlayer

ZhAkps

2024-02-06 478b9027e30a8ea8eba0c9360654b5f05fce62e5

 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);