<template>
  <div>
    <div ref='map' class='map' :style="{'height':height}">
      <div ref='btn1' class='btn1' @click='btn1click'> 测试 </div>
    </div>
  </div>
</template>

<script>
import Map from '@arcgis/core/Map';
import MapView from '@arcgis/core/views/MapView';
import SpatialReference from '@arcgis/core/geometry/SpatialReference';
import Extent from '@arcgis/core/geometry/Extent';
import Home from '@arcgis/core/widgets/Home';
import Compass from '@arcgis/core/widgets/Compass';
import Fullscreen from '@arcgis/core/widgets/Fullscreen';
import Legend from '@arcgis/core/widgets/Legend';
import ScaleBar from '@arcgis/core/widgets/ScaleBar';
import Zoom from '@arcgis/core/widgets/Zoom';
import TileLayer from '@arcgis/core/layers/TileLayer';
import MapImageLayer from '@arcgis/core/layers/MapImageLayer';
import Viewpoint from '@arcgis/core/Viewpoint';

export default {
  name: 'mapDemo',
  props:{
    height: {
      type: String,
      default() {
        let calcHeight = window.document.documentElement.clientHeight - 170;
        let m_height = calcHeight.toString() + 'px';
        return m_height;
      }
    },
    center: {
      type: Array,
      default: function() {
        return [118.3223, 35.0557];
      }
    },
    extent: {
      type: Array,
      default: function() {
        return [118.109760, 35.019916, 118.475084, 35.388584];
      }
    },
  },
  created() {
    this.initExtent = new Extent(
      this.extent[0], this.extent[1], this.extent[2], this.extent[3]
    );
  },
  mounted() {
    this.$nextTick(() => {
      debugger
      this.initMap();
    });
  },
  methods:{
    initMap() {
      this.esriMap = new Map({});
      this.mapView = new MapView({
        container: this.$refs.map,
        map: this.esriMap,
        // ui:{
        //   components:[]
        // },
        extent: this.initExtent
      });

      this.initLayers();
      // this.initMapEvents();
      // this.initGraphicsLayers();
      // this.mapView.ui.components = [];
      this.mapView.when(() => {
        // console.log('------mapView.when回调!!!!!');
        // let that = this;
        // setTimeout(function() {
        //   that.initWeights();
        // },200);

      }, function(error) {
        this.$message.error(error.message);
      });
    },
    initLayers(){
      let tileLayer = new TileLayer({
        id:'tileLayer',
        url:'http://218.59.194.74:6080/arcgis/rest/services/LYLSQ_YX_102100_202112/MapServer',
        visible:true
      });
      this.esriMap.add(tileLayer);
      tileLayer.on("layerview-create",()=>{
        // this.initWeights();
      });
      let m_layer = new MapImageLayer({
        id:"biz_layer",
        url:"http://218.59.194.82:6080/arcgis/rest/services/LSQZRZY_RE_WEB_V1/MapServer",
        visible:true
      });
      this.esriMap.add(m_layer);
    },
    initWeights() {
      let zoom = new Zoom({
        view: this.mapView
      });
      this.mapView.ui.add(zoom, 'top-left');

      let homeBtn = new Home({
        view: this.mapView,
        viewpoint: new Viewpoint({
          targetGeometry: this.initExtent
        })
      });
      homeBtn.when(function(evt) {
        console.log('------Home组件加载完毕!!!!!');
      }, function(err) {
        console.log('------Home组件加载异常：' + err.message);
      });

      this.mapView.ui.add(homeBtn, 'top-left');

      let compass = new Compass({
        view: this.mapView
      });
      this.mapView.ui.add(compass, 'top-left');

      //组件有问题，全屏模式开启后，再切换回正常模式，地图不显示了
      // let fullScreen = new Fullscreen({
      //   view:this.mapView
      // })
      // this.mapView.ui.add(fullScreen,"top-right");

      // let legend = new Legend({
      //   view:this.mapView,
      //   style:"max-height:10em;max-width:200px;overflow-y:auto"
      // });
      // this.mapView.ui.add(legend, 'bottom-left');

      let scaleBar = new ScaleBar({
        view: this.mapView,
        unit: 'metric',              //Possible Values:"non-metric"|"metric"|"dual"
        style: 'line'                //Possible Values:"ruler"|"line"
      });
      this.mapView.ui.add(scaleBar, 'bottom-left');
    },
    btn1click(){
      this.initWeights();
    }
  }
};
</script>

<style scoped>
html, body, .map {
  margin: 0;
  padding: 0;
  position: relative;
}
.btn1{
  position: absolute;
  top:1em;
  left: 5em;
  background-color: pink;
  width: 2em;
}
</style>
