<template>
    <div class="tools">
      <el-button-group>
        <el-button type="primary" title="全图" icon="iconfont icondiqiu" @click="fullMap"></el-button>
        <el-button type="primary" title="测面" icon="iconfont iconmianceliang" @click="measureMent('area')"></el-button>
        <el-button type="primary" title="测距" icon="iconfont iconceju" @click="measureMent('distance')"></el-button>
         <el-button type="primary" title="放大" icon="iconfont iconfangda" @click="zoomOut"></el-button>
        <el-button type="primary" title="缩小" icon="iconfont iconsuoxiao" @click="zoomIn"></el-button>
        <el-button type="primary" title="点选" icon="iconfont iconshuxing" @click="info"></el-button>
        <el-button type="primary" title="清除" icon="el-icon-delete" @click="clear"></el-button>
      </el-button-group>

    </div>
</template>
<script>
import {maps} from '@/libs/map/mapUtils'
import draw from '@/libs/map/draw'
import identifyUtils from '@/libs/map/IdentifyUtils'
import measure from '@/libs/map/measure'

import {loadModules} from "esri-loader"
export default {
    props:{
        viewId:{
            type:String,
            default:"mainView"
        }
    },
    mixins:[draw,identifyUtils,measure],
    data(){
        return{
            url:""
        }
    },
    methods:{
        fullMap(){
            var view = maps[this.viewId];
            view.zoom = 10;
            view.center = [108.95,34.27]
        },
        measureMent(type){
            this.measure(this.viewId,type);
        },
        clearHeightLayer(){
            
        },
        clear(){
            this.measure(this.viewId,null);
        },
        info(){
             var view = maps[this.viewId];
             var self = this;
            this.initDraw("point",this.viewId,null,function(geo){
                self.identify(self.url,[],geo,function(result){
                    debugger
                });
            });
        },
        zoomOut(){
            var view = maps[this.viewId];
          this.initDraw("rectangle",this.viewId,null,function(geo){
            view.extent = geo.extent;
          });
        },
        zoomIn(){
            var view = maps[this.viewId];
          this.initDraw("rectangle",this.viewId,null,function(geo){
            var  dWidth, dHeight, dXmin, dYmin, dXmax, dYmax;
            dWidth = view.extent.width * view.extent.width / geo.extent.width;
            dHeight = view.extent.height * view.extent.height / geo.extent.height;
            dXmin = view.extent.xmin - ((geo.extent.xmin - view.extent.xmin) * view.extent.width / geo.extent.width);
            dYmin = view.extent.ymin - ((geo.extent.ymin - view.extent.ymin) * view.extent.height / geo.extent.height);
            dXmax = dXmin + dWidth;
            dYmax = dYmin + dHeight;
            //pEnv.PutCoords(dXmin, dYmin, dXmax, dYmax);
            loadModules(["esri/geometry/Extent"]).then(([Extent]) => {
              view.extent = new Extent({
                xmin: dXmin,
                ymin: dYmin,
                xmax: dXmax,
                ymax: dYmax,
                spatialReference: {
                  wkid: 102100
                }
              });
            }).catch( err => {
              throw (err);
            })
          });
        }

    }

    
}
</script>
<style lang="less" scoped>

</style>