样式修改，openlayer加载影像（未完成）

WX

2023-09-01 e603818514e4849cd71c1df6f621a70dc019d156

 src/assets/js/Map/olMap.js

@@ -1,27 +1,202 @@

import { Map, View } from "ol";//地图,视图
import { getToken } from "@/utils/auth";
//配置文件地址
import config from "./config";
import { Map, View } from "ol"; //地图,视图
import OSM from "ol/source/OSM"; //可以理解为数据源,就是一张图片
import TileLayer from "ol/layer/Tile"; //可以理解为图层
import { fromLonLat } from "ol/proj";//将坐标从经度/纬度转换为不同的投影。
import XYZ from "ol/source/XYZ"
import { fromLonLat, transform } from "ol/proj"; //将坐标从经度/纬度转换为不同的投影。
import XYZ from "ol/source/XYZ";
import WMTS from "ol/source/WMTS.js";
import WMTSTileGrid from "ol/tilegrid/WMTS.js";
import { get as getProjection, Projection } from "ol/proj.js";
import { register } from "ol/proj/proj4";

import { getTopLeft, getWidth } from "ol/extent.js";
const olMap = {
    initMap() {
        //google地图
        var googleMapLayer = new TileLayer({
            source: new XYZ({
                url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}'
            })
        });
  map: null,
  Layer: null,
  projectionObj: {
    code: "ESRI:103881",
    extent: [-180, -90, 180, 90],
  },
  initMap() {
    //google地图
    // var googleMapLayer = new TileLayer({
    //   source: new XYZ({
    //     url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}",
    //   }),
    // });
    // proj4.defs(
    //   "ESRI:103880",
    //   "+proj=laea +lat_0=0 +lon_0=0 +x_0=0 +y_0=0 +R=1737400 +units=m +no_defs +type=crs"
    // );
    // register(proj4);
    const projection = new Projection({
      // code: this.projectionObj.code,
      code: "ESRI:103881",
      extent: [-180, -90, 180, 90],
      //   extent: this.projectionObj.extent,
    });
    this.map = new Map({
      target: "mapView",
      layers: [], //AMapLayer, baiduMapLayer
      view: new View({
        projection: projection,
        center: [180, 90],
        zoom: 4,
      }),
    });
  },
  addTreeData(treeNode, obj) {
    // this.delLayerAll();
    this.projectionObj = obj;
    console.log(this.projectionObj);
    //判断是否为代理
    if (treeNode.proxy) {
      this.addProxyAddress(treeNode); //有代理
    } else {
      this.addUrlAddress(treeNode); //无代理
    }
  },
  //代理地址
  addProxyAddress(res) {
    //判断数据类型
    switch (res.data) {
      case 1: //数字正射影像图
        this.setDataType(res);
        break;
      case 2: //场景地形数据
        this.setTerrainData(res);
        break;
      case 3: //数字高程模型（晕渲图）
        this.setDataType(res);
        break;
      case 4: //单波段栅格数据
        this.setDataType(res);
        break;
      case 5: //多光谱栅格数据
        this.setDataType(res);
        break;
      case 6: //高光谱栅格数据
        this.setDataType(res);
        break;
      case 7: //矢量图层
        this.setVectorData(res);
        break;
      case 8: //三维模型
        this.setModelData(res);
        break;
    }
  },
  //普通地址
  addUrlAddress(res) {
    switch (res.category) {
      case 0: //其他
        break;
      case 1: //GisServer
        this.addProxyAddress(res);
        break;
      case 2: //GeoServer
        this.addGeoServerAddress(res);
        break;
      case 3: //数简
        this.addProxyAddress(res);
        break;
    }
  },
  setDataType(res) {
    switch (res.type) {
      case 0: //URL
        break;
      case 1: //TMS
        // this.setAddTmsLayer(res);
        break;
      case 2: //WMTS
        this.addWmts(res);
        break;
      case 3: //WMS
        // this.setAddWmsLayer(res);
        break;
    }
  },
  setTerrainData(res) {
    switch (res.type) {
      case 0: //URL
        // this.setAddTearrinLayer(res);
        break;
      case 1: //TMS
        // this.setAddTearrinLayer(res);
        break;
    }
  },
  setVectorData(res) {
    switch (res.type) {
      case 0: //URL
        break;
      case 3: //WMS
        // this.setAddWmsLayer(res);
        break;
      case 4: //WFS
        break;
    }
  },
  //获取服务地址
  getLayrUrl(res) {
    var url;
    if (res.proxy) {
      const token = getToken();
      url = config.proxy + res.proxy.replaceAll("{token}", token);
    } else {
      url = res.url;
    }
    return url;
  },
  deleteLayer() {
    if (this.Layer) {
      this.map.removeLayer(this.Layer);
      this.Layer = null;
    }
  },
  addWmts(res) {
    this.deleteLayer();
    var url = this.getLayrUrl(res);
    const projection = new Projection({
      code: this.projectionObj.code,
      // extent: this.projectionObj.extent,
      // code: "ESRI:103879",
      extent: [-180, -90, 180, 90],
    });
    // var projection = getProjection("ESRI:103880");
    var projectionExtent = projection.getExtent();

        var map = new Map({
            target: "mapView",
            layers: [googleMapLayer],//AMapLayer, baiduMapLayer
            view: new View({
                center: [10997148, 4569099],
                zoom: 4
            }),
        });

    },
}
export default olMap;
    var size = getWidth(projectionExtent) / 256;
    var resolutions = new Array(18);
    var matrixIds = new Array(18);
    for (var z = 1; z < 19; ++z) {
      // generate resolutions and matrixIds arrays for this WMTS
      resolutions[z] = size / Math.pow(2, z);
      matrixIds[z] = z;
    }
    this.Layer = new TileLayer({
      opacity: 0.7,
      source: new WMTS({
        url: url,
        layer: "img", //注意每个图层这里不同
        matrixSet: "GoogleMapsCompatible",
        format: "image/png",
        style: "default",
        projection: projection,
        tileGrid: new WMTSTileGrid({
          origin: getTopLeft(projectionExtent), //原点（左上角）
          resolutions: resolutions, //分辨率数组
          matrixIds: matrixIds, //矩阵标识列表，与地图级数保持一致
        }),
        wrapX: true,
      }),
    });
    if (this.map) {
      this.map.addLayer(this.Layer);
    }
  },
};
export default olMap;