MapTalks.js 使用小结（三）: 各类地图加载

1.加载天地图

      this.map = new maptalks.Map("map", {
        center: [120.462472, 36.148971],
        zoom: 11,
        baseLayer: new maptalks.TileLayer("tile", {
          crossOrigin: "Anonymous",
          urlTemplate:
            "http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=mytk",
          subdomains: [1, 2, 3, 4],
        }),
      });

2.加载谷歌地图

      this.map = new maptalks.Map("map", {
        center: [120.462472, 36.148971],
        zoom: 11,
        baseLayer: new maptalks.TileLayer("tile", {
          urlTemplate:
            "http://mt2.google.cn/vt?lyrs=m@180000000&hl=zh-CN&gl=cn&src=app&x={x}&y={y}&z={z}&s=Gal",
        }),
      });

3.加载arcgis WMTS 服务

     this.map = new maptalks.Map("map", {
        center: [120.462472, 36.148971],
        zoom: 11,
        baseLayer: new maptalks.TileLayer("tile", {
          urlTemplate:
            "https://www.chart.msa.gov.cn/arcgis/rest/services/CHARTCELL/MapServer/WMTS?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=CHARTCELL&STYLE=default&TILEMATRIXSET=default028mm&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=image/png",
        }),
      });

4.加载百度地图和路况地图

      const time_num = new Date().getTime();
      var baseLayer = new maptalks.TileLayer("base", {
        // 字体和地图背景色的对比度变弱
        urlTemplate: `http://api2.map.bdimg.com/customimage/tile?&x={x}&y={y}&z={z}&udt=20200901&scale=1&styles=t%3Aland%7Ce%3Ag%7Cc%3A%231b1b1bff%2Ct%3Abuilding%7Ce%3Ag%7Cc%3A%232b2b2b%2Ct%3Ahighway%7Ce%3Aall%7Cc%3A%23444444ff%7Cl%3A-100%7Cs%3A-91%2Ct%3Aarterial%7Ce%3Ag%7Cl%3A-77%7Cs%3A-94%2Ct%3Agreen%7Ce%3Ag%7Cc%3A%231b1b1b%2Ct%3Awater%7Ce%3Ag%7Cc%3A%23444444ff%2Ct%3Asubway%7Ce%3Ag.s%7Cc%3A%23181818%2Ct%3Arailway%7Ce%3Ag%7Cl%3A-52%2Ct%3Aall%7Ce%3Al.t.s%7Cc%3A%23313131%2Ct%3Aall%7Ce%3Al.t.f%7Cc%3A%238b8787%2Ct%3Amanmade%7Ce%3Ag%7Cc%3A%231b1b1b%2Ct%3Alocal%7Ce%3Ag%7Cl%3A-75%7Cs%3A-91%2Ct%3Asubway%7Ce%3Ag%7Cl%3A-65%2Ct%3Aboundary%7Ce%3Ag%7Cc%3A%238b8787%7Cl%3A-29%7Cw%3A1`,
      });
      const trafficLayer = new maptalks.TileLayer("trafficLayer", {
        urlTemplate: `http://its.map.baidu.com:8002/traffic/TrafficTileService?time=${time_num}&v=016&level={z}&x={x}&y={y}`,
      });
      this.map = new maptalks.Map("map", {
        center: [121.408676, 31.071027],
        zoom: 10,
        minZoom: 10,
        pitch: 50,
        maxZoom: 22,
        view: {
          projection: "baidu",
        },
        baseLayer: baseLayer,
        attribution: false,
      });
      this.map.addLayer(trafficLayer);