ol加载wmts切片服务/xyz服务/WMS服务地图

/*
 * @Author: 杨云峰
 * @Date: 2021-06-03 11:01:43
 * @LastEditTime: 2023-02-28 14:48:31
 * @LastEditors: dinglizu
 * @Description: ol地图初始化
 */
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import XYZ from "ol/source/XYZ";
import TileLayer from "ol/layer/Tile";
import WMTS from "ol/source/WMTS";
import WMTSTileGrid from "ol/tilegrid/WMTS";
import {
  defaults as defaultControls
} from "ol/control";

Map.prototype.getLayerByProp = function getLayerByProp(key, value) {
  return this.getLayers()
    .getArray()
    .filter(layer => layer.get(key) === value);
};



// 加载天地图地图服务
const KEY = "af76e2d81e4d0b03e7c63a222d96a6bb";

// 加载wmts图层
function crtLayerWMTS() {
  const layer = new TileLayer({
    source: new WMTS({
      name: "",
      // http://123.249.117.7:8040/geometa-subscribe/gwc/demo/basemaphebi?gridSet=EPSG:4326_basemaphebi&format=image/png
      // http://123.249.117.7:8040/geometa-subscribe/gwc/demo/basemap?gridSet=EPSG:4326_basemap&format=image/png
      url:"http://123.249.117.7:8040/geometa-subscribe/gwc/service/wmts",
      layer: "basemaphebi",
      matrixSet: "EPSG:4326_basemaphebi",
      style: "default",
      version:"1.0.0",
      format: "image/png",
      wrapX: true,
      tileGrid: new WMTSTileGrid({
        tileSize: [256, 256],
        extent: [-180.0, -90.00000000000006, 180.0000000000001, 90.0],
        origin: [-180.0, 90.0],
        resolutions: [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 6.866455078125E-4, 3.4332275390625E-4, 1.71661376953125E-4, 8.58306884765625E-5, 4.291534423828125E-5, 2.1457672119140625E-5, 1.0728836059570312E-5, 5.364418029785156E-6, 2.682209014892578E-6, 1.341104507446289E-6, 6.705522537231445E-7, 3.3527612686157227E-7],
        matrixIds: ['EPSG:4326_basemaphebi:0', 'EPSG:4326_basemaphebi:1', 'EPSG:4326_basemaphebi:2', 'EPSG:4326_basemaphebi:3', 'EPSG:4326_basemaphebi:4', 'EPSG:4326_basemaphebi:5', 'EPSG:4326_basemaphebi:6', 'EPSG:4326_basemaphebi:7', 'EPSG:4326_basemaphebi:8', 'EPSG:4326_basemaphebi:9', 'EPSG:4326_basemaphebi:10', 'EPSG:4326_basemaphebi:11', 'EPSG:4326_basemaphebi:12', 'EPSG:4326_basemaphebi:13', 'EPSG:4326_basemaphebi:14', 'EPSG:4326_basemaphebi:15', 'EPSG:4326_basemaphebi:16', 'EPSG:4326_basemaphebi:17', 'EPSG:4326_basemaphebi:18', 'EPSG:4326_basemaphebi:19', 'EPSG:4326_basemaphebi:20', 'EPSG:4326_basemaphebi:21']
       
      })
    }),
    // zIndex: 1,
    // visible: true,
    id:"baseSystemHb"
  });
  return layer;
}

// 加载xyz地图服务
function crtlayerXYZ(id, url, visible, tileUrlFunction = function () {}) {
  const layer = new TileLayer({
    source: new XYZ({
      url,
      tileUrlFunction
    }),
    visible,
    id
  });
  return layer;
}

// 天地图url
function tianDiTuUrl() {
  // 矢量地图
  let vector = `https://t2.tianDiTu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=${KEY}`;
  // 影像地图
  let raster = `https://t1.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=${KEY}`;
  // 地形图
  let topography = `https://t0.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=${KEY}`;

  return {
    vector,
    raster,
    topography
  };
}

//底图
function initBase(id) {
  const layer = new TileLayer({
    source: new XYZ({
      url: "http://222.143.32.185/arcgis/rest/services/huizhou/huizhou/MapServer/tile/{z}/{y}/{x}",
      projection: "EPSG:3857"
    }),
    visible: true,
    id
  });

  return layer;
}


export default function mapInit(id, option = {}) {
  const tianDiTu = tianDiTuUrl();


  const tileUrlFunction = function (xyz) {
    const z = xyz[0];
    const x = xyz[1];
    const y = xyz[2];
    return `https://rt1.map.gtimg.com/realtimerender?z=${z}&x=${x}&y=${y}&type=vector&style=0&key=KSMBZ-3SMCV-LTYPU-UPYHY-GI2WF-UWBXB`;
  };

  const map = new Map({
    layers: [
      // crtlayerXYZ("VECTOR", tianDiTu.vector, false, tileUrlFunction),
      crtlayerXYZ("RASTER", tianDiTu.raster, true, tileUrlFunction),
      // crtlayerXYZ("TOPOGRAPHY", tianDiTu.topography, false, tileUrlFunction),
      crtLayerWMTS(),
    ],
    target: id,
    view: new View({
      projection: "EPSG:4326",
      center: [114.35839687284109, 35.68840803799298],
      zoom: 10,
      maxZoom: 18,
      ...option
    }),
    controls: defaultControls({
      zoom: false,
      rotate: false,
      attribution: false
    })
  });
  return map;
}





//  单独加载图层的话 使用下面方法
// 加载wms图层

import { TileWMS } from 'ol/source'
import Feature from 'ol/Feature'
import VectorSource from 'ol/source/Vector'
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'
import { Circle as CircleStyle, Fill, Stroke, Style, Text } from 'ol/style'
import MultiPolygon from 'ol/geom/MultiPolygon.js';
import MultiLineString from 'ol/geom/MultiLineString.js';
import Polygon from 'ol/geom/Polygon.js';
import Point from 'ol/geom/Point'
import Icon from 'ol/style/Icon'


// 加载wms图层
export function crtLayerWMS(map,id){
  const layers = map.getLayers().getArray()
  let layer = layers.find((item) => item.values_.id === id)
  if (layer) {
    layer.getSource().clear()
    layer.setVisible(true)
  } else{
    // WMS 图层对象
    var wmsService = new TileLayer ({
      source: new TileWMS({
          url: 'http://123.249.117.7:8040/geometa-subscribe/geometa/wms',
          params: {
              'FORMAT': 'image/png',
              'VERSION': '1.1.1',
              tiled: true,
              STYLES: '',
              LAYERS: 'geometa:geo_forehydrographicnet_b', //服务发布的图层名称
              tilesOrigin: 104.18060302734375 + "," + 30.750732421875
          }
      }),
      id,
      visible: true,
      zIndex: 2,
    });
    map.addLayer(wmsService)
  }
}