【maptalks】请求天地图和本地切片地图

初始化地图

const options = Object.assign({}, mapOptions, initOptions.mapOptions);
const map = new maptalks.Map(initOptions.containerID, options);

添加图层函数

import * as maptalks from "maptalks";
import {WMTSTileLayer} from "maptalks.wmts";
export function addLayers(map, layers) {
  const layerGroup = getLayers(map, layers)
  map.addLayer(layerGroup)
  return layerGroup
}

export function getLayers(map, layers) {
  const layerGroup = []
  if (!layers) return
  layers.forEach((layer) => {
    const type = layer.type
    let mapLayer = undefined
    removeLayer(map, layer.id)
    switch (type) {
      case "Tile":
        mapLayer = new maptalks.TileLayer(layer.id, layer)
        break
      case "WMS":
        mapLayer = new maptalks.WMSTileLayer(layer.id, layer)
        break
      case "WMTS":
        mapLayer = new WMTSTileLayer(layer.id, layer)
        break
      case "layerGroup": {
        const gLayers = layer.layers
        const groupLayers = getLayers(map, gLayers)
        mapLayer = new maptalks.GroupTileLayer(layer.id, groupLayers)
      }
    }
    if (mapLayer) {
      layer.value = mapLayer
      mapLayer.value = layer
      layerGroup.push(mapLayer)
    }
  })
  return layerGroup
}

移除图层函数主要是为了避免重复添加

export function removeLayer(map, layerID) {
  if (map === undefined) return false
  //已经存在就移除
  const markerLayer = map.getLayer(layerID)
  if (markerLayer) {
    map.removeLayer(markerLayer)
    return true
  }
  return false
}

主要问题在于图层的配置

// 天地图
const online= [
  {
    type: 'layerGroup', 
    id: '',// 不可重复、不可忽略
    visible: true,
    name: '矢量底图',
    layers: [
      {
        type: 'WMTS',
        name: "矢量地图",
        urlTemplate: `https://t5.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk=${token}`,// token是到天地图网站申请的
        subdomains: ["a", "b", "c", "d"],// 不可忽略
        visible: true,
        id: ''// 不可重复、不可忽略
      },
      {
        type: 'WMTS',
        name: "矢量标注",
        urlTemplate: `https://t5.tianditu.gov.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk=${token}`,
        subdomains: ["a", "b", "c", "d"],// 不可忽略
        visible: true,
        id: ''// 不可重复、不可忽略
      },
    ]
  },
  {
    type: 'layerGroup',
    id: 'imageLayerGroup',
    visible: true,
    name: '影像底图',
    layers: [
      {
        type: 'WMTS',
        name: "影像地图",
        urlTemplate: `https://t5.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=${token}`,
        subdomains: ["a", "b", "c", "d"],
        visible: true,
        maxAvailableZoom: 18,
        id: ''// 不可重复、不可忽略
      },
      {
        type: 'WMTS',
        name: "影像标注",
        urlTemplate: `https://t5.tianditu.gov.cn/DataServer?T=cia_w&X={x}&Y={y}&L={z}&tk=${token}`,
        subdomains: ["a", "b", "c", "d"], // 不可忽略
        visible: true,
        maxAvailableZoom: 18,
        id: ''// 不可重复、不可忽略
      },
    ]
  },
];

// 本地图层
const local = [
  {
    type: 'layerGroup',
    id: '',// 不可重复
    visible: true,
    name: '影像底图',
    layers: [
      {

        type: 'Tile', // 按理说以wmts的形式来加载是可以的吧？但是没成功，有问题，可以看一下
        name: "影像地图",
        urlTemplate: ``,//请求地址，包含各个请求参数，
        subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"], // 不可忽略，注意区别
        tileSystem: [1, -1, -180, 90],
        minZoom: 5,
        maxZoom: 22,
        maxAvailableZoom: 18,
        id: '' // 不可忽略且不可重复
      },
    ]
  },
]

最后调用

addLayer(map,online)