vue 通过@arcgis/core 引用 acrgis地图

vue 通过@arcgis/core 引用 acrgis地图

<template>
  <div class="hello">
    <div id="mapview"></div>

    <div style="position: absolute;z-index:10;">
      <button type="primary" @click="print">打印</button>
    </div>
  </div>
</template>

<script>
import '@arcgis/core/assets/esri/themes/light/main.css';
import Map from '@arcgis/core/Map'
import Basemap from "@arcgis/core/Basemap";
import TileLayer from '@arcgis/core/layers/TileLayer'
import MapView from '@arcgis/core/views/MapView'
import PrintTask from "@arcgis/core/tasks/PrintTask";
import PrintTemplate from "@arcgis/core/rest/support/PrintTemplate";
import PrintParameters from "@arcgis/core/tasks/support/PrintParameters";
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return{
      map:null,
      view:null,
    }
  },
  created() {
  },
  mounted() {
    this.$nextTick(()=>{
      this.getmap()
    })

  },
  methods:{

    print(){
      let printTask = new PrintTask({
        url: 'http://192.168.0.112:6080/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task'
        // url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task'
      },'print');
      let template = new PrintTemplate({
        format: "png32",
        exportOptions: {
          width: 800,
          height: 600,
          dpi: 300
        },
        layout: "a4-portrait",
        layoutOptions: {
          titleText: "Print map",
          authorText: "Sam"
        }
      });
      const view = new MapView()
      let params = new PrintParameters({
        view: view,
        map:this.map,
        template: template,
        url:'http://127.0.0.1:6080/arcgis/rest/services/shkjgh/YJJBNT/MapServer'
      });
      printTask.execute(params).then((printResult, printError) =>{

        console.log(printResult.url)
        window.open(printResult.url,'_blank');

      }).catch((printError) =>{
        console.log(printError)
      });
      // printTask.execute(params,function (evt){
      //   console.log(evt)
      //   alert(123)
      //   window.open(evt.url,'_blank');
      // })



    },
    getmap(){
      let basemap = new Basemap({
        baseLayers: [
          new TileLayer({
            url: 'http://127.0.0.1:6080/arcgis/rest/services/shkjgh/INDEX/MapServer',
            title: "Basemap",
          })
        ],
        title: "basemap",
        id: "basemap",
      });
      const map = new Map({
        // basemap: "osm",
        basemap: basemap,
      })
      console.log(map)
      console.log(map.layers)
      let tempLayers = null
      const view = new MapView({
        container :'mapview',
        map:map,
        center: [116.404844,39.913385],
        zoom: 2
      })
      // this.view = view;
      let layer =new TileLayer({
        url: 'http://127.0.0.1:6080/arcgis/rest/services/shkjgh/YJJBNT/MapServer',
        title: '永久基本农田',
      });
      map.layers.add(layer);
      tempLayers = map.layers

      view.ui.remove('zoom')//清除放大缩小按钮
      view.ui.remove('attribution')//清楚底部powered by ESRI
      console.log(view)
      this.map = map;
    },
    qiehuan(){

    //   this.map.basemap.baselayers = [
    //     new TileLayer: ({
    //     url: 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer'
    //   })
    // ]
    }



  }
}
</script>

<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
#mapview{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
</style>