Leaflet加载各种类型的底图服务

Leaflet加载geoserver发布的wmts服务

Geoserver默认切片格式为EPSG:4326:n，如EPSG:4326:1、EPSG:4326:2、EPSG:4326:3、...，leaflet默认加载matrixID为n，如1、2、3、...，所以需要先进行处理如下图:

这里需要用到leaflet.tilelayer.wmts插件，请去github

    const map = L.map('map', { crs: L.CRS.EPSG4326, center: [31.3, 120.5], zoom: 8, attributionControl: false }) //crs要设置为跟geoserver切片相同的坐标系

    const url = "http://1.2.3.4:8080/geoserver/mylayer1/gwc/service/wmts" // 改wmts服务对应的Geoserver地址
    const layerIGNScanStd = "mylayer1:ws1" // 图层名
    const matrixIds = []
    for (var i = 0; i < 22; ++i) {
        matrixIds[i] = { identifier: "" + i, topLeftCorner: new L.LatLng(90, -180) }
    }
    const ign = new L.TileLayer.WMTS(url, { layer: layerIGNScanStd, style: '', tilematrixSet: "EPSG:4326", format: 'image/png', matrixIds: matrixIds })
    map.addLayer(ign)

Leaflet加载Arcgis的矢量图

mapConfig.js

    export const ARCGIS_MAP_ID = '40b0b506febc4f2fbb512ae5fd2475b4'
    export const ARCGIS_TOKEN = 'AAPK4db33e78b0234a62a8e764821f1a4ca2h06juJ_ovQnkrHxoIV7Tr1fwEZjugkBMn4ogfp0t1erCAsLn4UU0M4la4RNYCaA2'

import * as Vector from 'esri-leaflet-vector'
L.Vector = Vector

    L.Vector.vectorBasemapLayer(ARCGIS_MAP_ID, { apiKey: ARCGIS_TOKEN }).addTo(map)