地图主题 - Theme

天地图-卫星图

<div id="js_map" style="height: 100vh"></div>

import Map from "@arcgis/core/Map"
import MapView from "@arcgis/core/views/MapView"
import BaseMap from "@arcgis/core/BaseMap"
import WebTileLayer from "@arcgis/core/layers/WebTileLayer"

const map: any = new Map({
  basemap: new BaseMap({
    baseLayers: [
      // 天地图-卫星图
      new WebTileLayer({
        urlTemplate: "http://{subDomain}.tianditu.gov.cn/DataServer?T=cia_w&x={col}&y={row}&l={level}&tk=3d3ef159e32811545a27b0436b22951d",
        subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
        visible: true
      })
    ]
  })
})

const mapView: any = new MapView({
  map,
  container: 'js_map',
  center: [102.92934063304513, 25.102234987110343],
  zoom: 3,
  constraints: { 
    lods: [
      { "level": 0, "resolution": 156543.03392800014, "scale": 5.91657527591555E8 },
      { "level": 1, "resolution": 78271.51696399994, "scale": 2.95828763795777E8 },
      { "level": 2, "resolution": 39135.75848200009, "scale": 1.47914381897889E8 },
      { "level": 3, "resolution": 19567.87924099992, "scale": 7.3957190948944E7 },
      { "level": 4, "resolution": 9783.93962049996, "scale": 3.6978595474472E7 },
      { "level": 5, "resolution": 4891.96981024998, "scale": 1.8489297737236E7 },
      { "level": 6, "resolution": 2445.98490512499, "scale": 9244648.868618 },
      { "level": 7, "resolution": 1222.992452562495, "scale": 4622324.434309 },
      { "level": 8, "resolution": 611.4962262813797, "scale": 2311162.217155 },
      { "level": 9, "resolution": 305.74811314055756, "scale": 1155581.108577 },
      { "level": 10, "resolution": 152.87405657041106, "scale": 577790.554289 },
      { "level": 11, "resolution": 76.43702828507324, "scale": 288895.277144 },
      { "level": 12, "resolution": 38.21851414253662, "scale": 144447.638572 },
      { "level": 13, "resolution": 19.10925707126831, "scale": 72223.819286 },
      { "level": 14, "resolution": 9.554628535634155, "scale": 36111.909643 },
      { "level": 15, "resolution": 4.77731426794937, "scale": 18055.954822 },
      { "level": 16, "resolution": 2.388657133974685, "scale": 9027.977411 },
      { "level": 17, "resolution": 1.1943285668550503, "scale": 4513.988705 },
      { "level": 18, "resolution": 0.5971642835598172, "scale": 2256.994353 },
      { "level": 19, "resolution": 0.29858214164761665, "scale": 1128.497176 },
    ]
  },
  spatialReference: {
    wkid: 3857,
  }
})

天地图-矢量图

new WebTileLayer({
  urlTemplate: "http://{subDomain}.tianditu.gov.cn/DataServer?T=cia_w&x={col}&y={row}&l={level}&tk=3d3ef159e32811545a27b0436b22951d",
  subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
  visible: true
})

ArcGis BaseMap主题

new Map({
  basemap: 'dark-gray',
})

• 黑灰：dark-gray-vector
• 卫星图：satellite
• 卫星+地名：hybrid
• 海洋蓝：oceans
• 地形地势：terrain
• 灰白：gray-vector
• topo：topo-vector
• 街道relief：streets-relief-vector

ArcGis地图瓦片服务

new WebTileLayer({
  urlTemplate: "https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{level}/{row}/{col}",
})

瓦片服务服务地址：

• 魅蓝：https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{level}/{row}/{col}
• 暖色：https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetWarm/MapServer/tile/{z}/{y}/{x}
• 灰色：https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}
• 海洋：https://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunityENG/MapServer/tile/{z}/{y}/{x}

其他地图瓦片服务

{
  'Google': {
    '影像': 'https://mt{0,1,2,3}.google.cn/vt/lyrs=s&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}',
    '街道': 'https://mt{0,1,2,3}.google.cn/vt/lyrs=m&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}',
    '影像带标注': 'https://mt{0,1,2,3}.google.cn/vt/lyrs=y&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}',
    '地形带标注': 'https://mt{0,1,2,3}.google.cn/vt/lyrs=p&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}'
  },
  '高德': {
    '影像': 'https://webst0{1,2,3,4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
    '街道': 'https://webst0{1,2,3,4}.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}',
  },
  'GeoQ': {
    '基础': 'https://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}',
    '魅蓝': 'https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}',
    '暖色': 'https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetWarm/MapServer/tile/{z}/{y}/{x}',
    '灰色': 'https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}'
  },
  'OSM': {
    '街道': 'https://{a,b,c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
  }
}

高德示例：

new WebTileLayer({
  urlTemplate: "https://webst04.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}"
})