<template>
  <div style="width: 100%;
  height: 100%">
    <div id="viewDiv" style="width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;">
     
    </div>
  </div>
</template>

<script>

   import { loadCss, setDefaultOptions, loadModules } from "esri-loader";
export default {
  name: "Data",
 
  mounted() {
    loadModules(
      ["esri/layers/WebTileLayer", "esri/Map", "esri/views/SceneView"],
      {
        url: "http://localhost:8081/arcgis_js_api/4.18/init.js"
      }
    )
      .then(([WebTileLayer, Map, SceneView]) => {
        var tiandituBaseUrl = "http://{subDomain}.tianditu.gov.cn"; //天地图服务地址
        var token = "7baeffb96bf61861b302d0f963cfda66"; //天地图token

        var map = new Map({
          ground: "world-elevation"
        });

        var view = new SceneView({
          container: "viewDiv",
          map: map,
          scale: 123456789,
          center: [120.75, 30.75]
        });

        //矢量地图(球面墨卡托投影)
        var tiledLayer = new WebTileLayer({
          urlTemplate:
            tiandituBaseUrl +
            "/img_w/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=img&STYLE=default&FORMAT=tiles&TILEMATRIXSET=w&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=" +
            token,
          subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
        });

        //矢量注记(球面墨卡托投影)
        var tiledLayerAnno = new WebTileLayer({
          urlTemplate:
            tiandituBaseUrl +
            "/cia_w/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=cia&STYLE=default&FORMAT=tiles&TILEMATRIXSET=w&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=" +
            token,
          subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
        });

        map.add(tiledLayer);
        map.add(tiledLayerAnno);
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>


</style>