<template>
  <div id="app">
    <map-container @load="load" :style-url="style" show-zoom auth-type="Authorization" :debugger-mode="true"></map-container>
<!--    <div style="position: absolute;top: 0;left: 0;width: 300px;height: 300px">-->
<!--&lt;!&ndash;      <layer-control :map="map" :ignore-layers="['村域']"></layer-control>&ndash;&gt;-->
<!--&lt;!&ndash;      <new-tree @contextmenu="testClick"></new-tree>&ndash;&gt;-->
<!--    </div>-->
  </div>
</template>

<script>
import EditArea from "./tool/edit/EditArea";
import Graffiti from "./tool/edit/Graffiti";
import ClickEdit from "./tool/edit/ClickEdit";
// import Mini from "./tool/edit/ClickEdit";
import MapContainer from "./components/map/MapContainer";
import PieCustomLayer from "./layer/PieCustomLayer";
import LineCustomLayer from "./layer/LineCustomLayer"; // import MiniMap from "./components/control/MiniMap";
import MapCommon from "./common/MapCommon";
import Touch from "./tool/longTouch/LongTouch";
import DrawAreaControl from "./tool/control/DrawAreaControl";
import SelectPolygon from "./tool/edit/SelectPolygon";
import DrawArea from "./tool/edit/DrawArea";
import CompassControl from "./tool/control/CompassControl";
import LayerControl from "./components/LayerControl/LayerControl";
import BarCustomLayer from "./layer/BarCustomLayer";
import DrawLineTool from "./tool/edit/DrawLineTool";
import SplitTool from "./tool/edit/SplitTool";
import MergeTool from "./tool/edit/MergeTool";
import DeductTool from "./tool/edit/DeductTool";
import DrawPointTool from "./tool/edit/DrawPointTool";
import NewTree from "./components/Tree/NewTree";
export default {
  name: 'app',
  components: {MapContainer, LayerControl,NewTree},
  data() {
    return {
      // style: 'http://gykj123.cn:9035/api/v1/styles/gykj/rJxP2DamuX',
      style: "./static/style.json",
      map: null,

    }
  },
  created() {
    // localStorage.setItem("token","eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJhZG1pbiIsImNvbnRleHRVc2VySWQiOiIwIiwiY29udGV4dE5hbWUiOiLotoXnuqfnrqHnkIblkZgiLCJjb250ZXh0RGVwdElkIjoiMCIsImNvbnRleHRBcHBsaWNhdGlvbklkIjoiMCIsImlhdCI6MTYxNTU0ODQyNiwiZXhwIjoxNjMxMTAwNDI2fQ.NE2hxhrxtyhNWtvtuZVh1TCJ0idPAp5uYwTRmIPRyYE")
  },
  mounted() {
    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent)) {
      //当前设备为移动端（H5）
      console.log("H5")
    } else {
      //当前设备为桌面显示器（PC）
      console.log("PC")
    }
  },
  methods: {
    testClick(val){
      console.log("点击",val)
    },
    load(map) {

      setTimeout(() => {
        this.map = map;
      }, 3000)
      let feature={"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[113.8603882,34.8611182],[113.8602812,34.8609744],[113.8598738,34.86109],[113.8595811,34.8604974],[113.8594146,34.8601605],[113.8591911,34.8597081],[113.8590763,34.8594757],[113.8590747,34.8594705],[113.8605079,34.8591721],[113.860606,34.8594049],[113.8611621,34.8607243],[113.8612448,34.8609278],[113.8603882,34.8611182]]]]},"properties":{"qhdm":"410193570206","provincecode":"41","citycode":"4101","countycode":"410193","qhmc":"杨桥","dkbm":"4101935702060066","mj":39.13,"objectid":111455747,"from":"dt_zzdk","myobjectid":"dt_zzdk111455747"}}
      map.setCenter([113.8603882,34.8611182])
      let control1=new DeductTool({
        map:map,
        features:[feature],
        showTool:true,
        showArea:true,
        showLength: true,
        circleRadius: 3,
        circleStrokeWidth:1,
        callBack:(e)=>{
          console.log("分割完成",e)
        }
      });
      control1.start()
      // map.addControl(control1, 'bottom-right')

      // map.on("dblclick",()=>{
      //   console.log("双击")
      // })
      // map.on("contextmenu",()=>{
      //   console.log("右键")
      // })
      // let control=new MergeTool({
      //   features:[],
      //   clickLayers:["测试地块"],
      //   callBack:(e)=>{
      //     console.log("绘制完成",e)
      //   },
      //   moveCallBack:(e)=>{
      //     console.log("移动",e)
      //   },
      // });
      // map.addControl(control, 'bottom-right')
      // let control=new SplitTool({
      //   features:[],
      //   clickLayers:["种植地块"],
      //   showArea:true,
      //   callBack:(e)=>{
      //     console.log("绘制完成",e)
      //   },
      //   moveCallBack:(e)=>{
      //     console.log("移动",e)
      //   },
      // });
      // map.addControl(control, 'bottom-right')

      // let control3=new Graffiti({
      //   showArea:true,
      //   checkValid:true,
      //   continueDraw:true,
      //   callBackName:"test",
      //   showIcon:true,
      //   drawLineOnly:true,
      //   callBack:(res)=>{
      //     console.log(res)//绘制成功回调
      //   },errorCallBack:err=>{
      //     console.log(err)//绘制失败回调
      //   },
      // });
      // map.addControl(control3, 'bottom-right');
      // let control=new SelectPolygon({
      //   continueSelect:true,
      //   clickLayers:["测试地块"],
      //   showIcon:true,
      //   callBack:(res)=>{
      //     console.log(res)//绘制成功回调
      //   },errorCallBack:err=>{
      //     console.log(err)//绘制失败回调
      //   },
      // });
      // // control.start();
      // map.addControl(control, 'bottom-right');
      //
      let control2=new DrawArea({
        showIcon:true,
        showArea:true,
        showLength:true,
        checkValid:true,
        showTool:true,
        continueDraw:false,
        showCross:true,
        circleRadius:3,
        circleStrokeWidth:1,
        callBack:(res)=>{
          console.log("完成",res)//绘制成功回调
        },
        updateCallBack:(res)=>{
          console.log("更新",res)//绘制成功回调
        },
        errorCallBack:err=>{
          console.log("错误",err)//绘制失败回调
        },
        cancelCallback: cancelRes => {
          console.log('取消', cancelRes)
        }
      });
      map.addControl(control2, 'bottom-right');

      map.addLayer({
        id: 'my-raster-layer',
        type: 'raster',
        source: {
          type: 'raster',
          'scheme': 'tms',
          tiles: ['http://wrjztuat.zyic.com:7078/geoserver/gwc/service/tms/1.0.0/aiearth:a604740c55ae4c6691f6154d63a6e8ae_2024014101050160060004_2404291011@EPSG:900913@png/{z}/{x}/{y}.png'], // 栅格瓦片服务的URL模板
          tileSize: 256, // 瓦片大小
          maxzoom: 22 // 最大缩放级别
        },
        paint: {
          'raster-opacity': 0.85 // 设置图层透明度
        }
      });
      // map.addSource('my-source', {
      //   'type': 'vector',
      //   url:"./static/zzdk.json"
      //   // tiles:['http://219.142.142.99:8010/cbagriins/app/v1/agriinsAcc/maps/grandtech-middleground-vectile-wgs/api/v1/tilesets/admin/ZZDK_1/{z}/{x}/{y}'],
      //   // tiles:['https://api.grandtechmap.com/grandtech-middleground-vectile-wgs/api/v1/tilesets/gykj/dt_zzdk/{z}/{x}/{y}.pbf?access_token=tiletoken.mty1nduxmde5mji4odjimzu2owi2nzkznjq0ntrhnmq2zdawymy4nmq5ndbl'],
      // });
      //
      // map.addLayer({
      //   'id': 'my-layer',
      //   'source': 'my-source', // 使用之前创建的源
      //   "source-layer": "ZZDK_1",
      //   // "source-layer": "dt_zzdk",
      //   "type": "line",
      //   "minzoom": 11,
      //   "maxzoom": 18,
      //   "layout": {
      //     "visibility": "visible"
      //   },
      //   "paint": {
      //     "line-color": "#0000ff",
      //     "line-opacity": 1,
      //     "line-width": 1.5
      //   },
      //   // 其他图层样式属性...
      // });

      // control2.start();
      // map.on("test",function (e){
      //   console.log("test",e)
      // })

      // let control=new CompassControl({rotateAble:true,pitchAble:true});
      // map.addControl(control, 'bottom-right');


      // let chartLayer=new PieCustomLayer("统计图",[{ point:[112.6,45],values:[35.6,41.2,155.9]},{ point:[114,45.5],values:[12,20,33]}],{
      //   clickCallBack:(data)=>{
      //     console.log(data)
      //   }
      // })
      // chartLayer.addToMap(map)

      // let chartLayer = new LineCustomLayer("统计图", [
      //   {
      //     point: [114.514780, 33.777750],
      //     values: [35,48,39,65,24,76]
      //   },
      //   {point: [114.614780, 33.777750],
      //     values: [35,48,39,65,24,76]
      //   },
      //   {point: [114.614780, 33.877750],
      //     values: [35,48,39,65,24,76]
      //   }
      //
      // ], {
      //   clickCallBack: (data) => {
      //     console.log(data)
      //   },
      //   width: 60,
      //   height: 60,
      // })
      // chartLayer.addToMap(map)
      // control.start();
      // console.log("已加载");
      // console.log()
      // map.addControl(new MiniMap({showPointLayers:[],}), 'top-right');
      // MapCommon.copyLineToAreaFit(map,"省域","test")
      // let longTouch=new Touch(map,"test",res=>{
      //   console.log(res);
      // })

      // let tool= new Graffiti(map,{callBack:(res)=>{
      //    console.log(res)
      //    }})
      //
      //  tool.start()
      // let edit=  new EditArea(map,{
      //   callBack:res=>{
      //     //双击绘制完成回调
      //     console.log(res)
      //   },
      //   errorCallBack:res=>{
      //     //发生错误回调
      //     console.log(res)
      //   },
      //   //需要编辑的要素
      //   feature:{
      //     "id":"ssssssssssssssssssss",
      //     "type": "Feature",
      //     "properties": {},
      //     "geometry": {
      //       "type": "Polygon",
      //       "coordinates": [
      //         [
      //           [
      //             14.765625,
      //             68.13885164925573
      //           ],
      //           [
      //             -9.140625,
      //             -16.63619187839765
      //           ],
      //           [
      //             152.578125,
      //             -15.28418511407642
      //           ],
      //           [
      //             161.015625,
      //             69.90011762668541
      //           ],
      //           [
      //             14.765625,
      //             68.13885164925573
      //           ]
      //         ]
      //       ]
      //     }
      //   }
      // });
      // edit.start()//开始编辑
      // let tool= new ClickEdit(map,{clickLayers:["测试地块"],callBack:(feature)=>{
      //   console.log(feature)
      //   },features:[],
      //   clickLayersFilters:[]});
      // tool.start();
      // let tool =new DrawArea(map,{callBack:(res)=>{
      //   console.log(res);
      // },errorCallBack:err=>{
      //   console.error(err);
      // }})
      // tool.start()
      // setTimeout(()=>{
      //   console.log("关闭")
      //   // tool.closeByHand();
      // },10000)
      // let control=new DrawAreaControl((feature)=>{
      //    console.log(feature)
      // },e=>{
      //   console.log("取消")
      // });
      // map.addControl(control, 'bottom-right')
      // //绘制线
      // let control=new DrawLineTool({
      //   showTool:true,
      //   toolPosition:"top-right",
      //   callBack:(e)=>{
      //     console.log("绘制完成",e)
      //   },
      //   moveCallBack:(e)=>{
      //     console.log("移动",e)
      //   },
      // });
      // map.addControl(control, 'bottom-right')
      //分割工具
      // let control=new DrawPointTool({
      //   showPosition:true,
      //   callBack:(e)=>{
      //     console.log("绘制完成",e)
      //   },
      //   moveCallBack:(e)=>{
      //     console.log("移动",e)
      //   },
      // });
      // map.addControl(control, 'bottom-right')
    }
  }
}
</script>

<style lang="css">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  width: 100%;
  height: 100vh;
}

body, html {
  padding: 0;
  margin: 0;
}

</style>
