Vue Arcgis叠加天地图

Posted 2020-11-30 coffeeeddy

<template>
  <div class="wrapper">
    <div id="viewDiv">
      <PageSwitch />
    </div>
  </div>
</template>

<script>
import PageSwitch from "@/components/PageSwitch";
import { loadModules } from "esri-loader";
export default {
  name: "Data",
  components: {
    PageSwitch
  },
  mounted() {
    loadModules(
      ["esri/layers/WebTileLayer", "esri/Map", "esri/views/SceneView"],
      {
        url: "https://zrzyhghj3.jiaxing.gov.cn/arcgis/api/4.12/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 lang="less" scoped>
.wrapper {
  width: 100%;
  height: 100%;
  #viewDiv {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>