<!--<template>-->
<!--  <div id='measurement' class='measure' v-drag="'.measure .ant-card-head'">-->
<!--    <a-card v-show='value' title='测量' class='measurePanel unselectable'>-->
<!--      <a-icon slot='extra' type='close' class='panelClose' @click="$emit('input',false)" />-->
<!--      <a-radio-group v-model='mesaureType' @change='onChange'>-->
<!--        <a-radio value='distance' @click='doMeasure'>-->
<!--          <img src='../../../assets/MeasureTool32.png' width='20'>-->
<!--          测量距离-->
<!--        </a-radio>-->
<!--        <a-radio value='area' @click='doMeasure'>-->
<!--          <img src='../../../assets/MeasureAreaTool32.png' width='20'>-->
<!--          测量面积-->
<!--        </a-radio>-->
<!--      </a-radio-group>-->
<!--      <h3>通过单击地图以放置您的第一个点来开始测量</h3>-->
<!--    </a-card>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--// import AreaMeasurement2D from '@arcgis/core/widgets/AreaMeasurement2D';-->
<!--// import DistanceMeasurement2D from '@arcgis/core/widgets/DistanceMeasurement2D';-->
<!--import SketchViewModel from "@arcgis/core/widgets/Sketch/SketchViewModel";-->

<!--export default {-->
<!--  name: 'Measurement',-->
<!--  inject: ['basicMap'],-->
<!--  props: {-->
<!--    value: {-->
<!--      type: Boolean,-->
<!--      default: false-->
<!--    },-->
<!--  },-->
<!--  data() {-->
<!--    return {-->
<!--      mesaureType:"",-->
<!--      sketchVM:{},-->
<!--      areaMeasurement2D: {},-->
<!--      distanceMeasurement2D: {}-->
<!--    };-->
<!--  },-->
<!--  created() {-->
<!--    this.sketchVM = new SketchViewModel({-->
<!--      layer:this.basicMap.draw_GraphicsLayer,-->
<!--      view:this.basicMap.mapView-->
<!--    });-->
<!--    this.sketchVM.on("create",(evt)=> {-->
<!--      if(evt.state == "start"){-->
<!--        this.basicMap.draw_GraphicsLayer.removeAll();-->
<!--      }else if(evt.state == "complete"){-->
<!--        debugger;-->
<!--        let a = evt.graphic;-->
<!--      }-->
<!--    });-->
<!--  },-->
<!--  watch:{-->
<!--    mesaureType:function(val) {-->
<!--      // if (val == 'area') {-->
<!--      //   if(this.distanceMeasurement2D.visible){-->
<!--      //     this.distanceMeasurement2D.visible = false;-->
<!--      //   }-->
<!--      //   this.areaMeasurement2D = new AreaMeasurement2D({-->
<!--      //     view: this.basicMap.mapView,-->
<!--      //     unitOptions: ['square-meters', 'square-kilometers', 'hectares']-->
<!--      //   });-->
<!--      //   this.areaMeasurement2D.viewModel.start();-->
<!--      //   this.basicMap.mapView.ui.add(this.areaMeasurement2D, 'top-right');-->
<!--      // } else if(val=='distance'){-->
<!--      //   if(this.areaMeasurement2D.visible){-->
<!--      //     this.areaMeasurement2D.visible = false;-->
<!--      //   }-->
<!--      //   this.distanceMeasurement2D = new DistanceMeasurement2D({-->
<!--      //     view: this.basicMap.mapView,-->
<!--      //     unitOptions: ['meters', 'kilometers']-->
<!--      //   });-->
<!--      //   this.distanceMeasurement2D.viewModel.start();-->
<!--      //   this.basicMap.mapView.ui.add(this.distanceMeasurement2D, 'top-right');-->
<!--      // }else{-->
<!--      //   if(this.areaMeasurement2D.visible){-->
<!--      //     this.areaMeasurement2D.visible = false;-->
<!--      //   }-->
<!--      //   if(this.distanceMeasurement2D.visible){-->
<!--      //     this.distanceMeasurement2D.visible = false;-->
<!--      //   }-->
<!--      // }-->
<!--    }-->
<!--  },-->
<!--  methods:{-->
<!--    onChange(e) {-->
<!--      this.mesaureType = e.target.value;-->
<!--    },-->
<!--    doMeasure(e){-->
<!--      debugger-->
<!--      let cur_type = e.target.value;-->
<!--      if(cur_type == 'distance'){-->
<!--        this.sketchPolyline();-->
<!--      }else{-->
<!--        this.sketchPolygon();-->
<!--      }-->
<!--    },-->
<!--    sketchPolyline(){-->
<!--      this.sketchVM.create("polyline",{mode:"click"});-->
<!--    },-->
<!--    sketchPolygon(){-->
<!--      this.sketchVM.create("polygon",{mode:"click"});-->
<!--    },-->
<!--    initTool(){-->
<!--      this.mesaureType = "distance";-->
<!--    },-->
<!--    closeTool(){-->
<!--      this.mesaureType = "";-->
<!--    }-->
<!--  }-->
<!--};-->
<!--</script>-->

<!--<style scoped>-->
<!--.measure {-->
<!--  position: absolute;-->
<!--  top: 75px;-->
<!--  left: 70px;-->
<!--}-->
<!--.measure .measurePanel{-->
<!--  width: 300px;-->
<!--  box-shadow: 0 0 5px #357ee5;-->
<!--}-->
<!--</style>-->
