<template>
  <div ref="divbox" class="divbox">
    <CTMap3D
      :shadows="true"
      ref="CTMap3D"
      :animate="false"
      :animatePoints="[116.391270,39.907100]"
      :center = "[116.542997158755,40.0358535108557]"
      @animateEnd="animateEnd"
      @moveend="moveend"
      @mousemove="mapMousemove"
      @ready="CTMap3DReady">
      <!--<TiandituMap k="40e0806ea26590d3257b66d0cb1caf99" @ready="Map2DReady"></TiandituMap>-->
      <!--<AMap k="73b308eb947fe6f7828e663828029fbc"  @ready="AMap2DReady"></AMap>-->
      <LayerMap ref="LayerMap"
                @ready="LayerMapReady"
                k="40e0806ea26590d3257b66d0cb1caf99"
                :newLayer="[]"
                :layerName="layerName">
      </LayerMap>
      <ControlBar @change='controlBarChange'></ControlBar>
      <!--<LayerMap k="40e0806ea26590d3257b66d0cb1caf99"></LayerMap>-->
      <Tiles3D :pick="pickTiles3D" :alpha="1" :color="tiles3Dcolor" @leftclick="leftclick" @mousemove="mousemove">
              <TileFeature url="http://localhost:8088/00_19/00/tileset.json"></TileFeature>
              <!-- <TileFeature url="http://192.168.100.13:85/bm3dtiles_w/01/tileset.json"   ></TileFeature>
              <TileFeature url="http://192.168.100.13:85/bm3dtiles_w/02/tileset.json"   ></TileFeature>
              <TileFeature url="http://192.168.100.13:85/bm3dtiles_w/03/tileset.json"   ></TileFeature>
              <TileFeature url="http://192.168.100.13:85/bm3dtiles_w/04/tileset.json"   ></TileFeature>
              <TileFeature url="http://192.168.100.13:85/bm3dtiles_w/05/tileset.json"   ></TileFeature>
              <TileFeature url="http://192.168.100.13:85/bm3dtiles_w/06-00/tileset.json"   ></TileFeature>
              <TileFeature url="http://192.168.100.13:85/bm3dtiles_w/06-01/tileset.json"   ></TileFeature>
              <TileFeature url="http://192.168.100.13:85/bm3dtiles_w/07/tileset.json"   ></TileFeature>
              <TileFeature url="http://192.168.100.13:85/bm3dtiles_w/08/tileset.json"   ></TileFeature>
              <TileFeature url="http://192.168.100.13:85/bm3dtiles_w/09/tileset.json"   ></TileFeature>
              <TileFeature url="http://192.168.100.13:85/bm3dtiles_w/10/tileset.json"   ></TileFeature>
              <TileFeature url="http://192.168.100.13:85/bm3dtiles_w/11-00/tileset.json"   ></TileFeature>
              <TileFeature url="http://192.168.100.13:85/bm3dtiles_w/11-01/tileset.json"   ></TileFeature>
              <TileFeature url="http://192.168.100.13:85/bm3dtiles_w/12/tileset.json"   ></TileFeature>
              <TileFeature url="http://192.168.100.13:85/bm3dtiles_w/13/tileset.json"   ></TileFeature>
              <TileFeature url="http://192.168.100.13:85/bm3dtiles_w/14/tileset.json"   ></TileFeature>
              <TileFeature url="http://192.168.100.13:85/bm3dtiles_w/15/tileset.json"   ></TileFeature>
              <TileFeature url="http://192.168.100.13:85/bm3dtiles_w/16/tileset.json"   ></TileFeature>
              <TileFeature url="http://192.168.100.13:85/bm3dtiles_w/17/tileset.json"   ></TileFeature>
              <TileFeature url="http://192.168.100.13:85/bm3dtiles_w/18/tileset.json"   ></TileFeature>
              <TileFeature url="http://192.168.100.13:85/bm3dtiles_w/19/tileset.json"   ></TileFeature> -->
          </Tiles3D>
      <!--<Entity>-->
        <!--<EntityPolygon :show="true" :czml="polygon"></EntityPolygon>-->
        <!--<Billboard :options="billboardArray"></Billboard>-->
      <!--</Entity>-->
      <AnimateModel></AnimateModel>
      <!--<Czml @leftclick="czmlleftclick" @mousemove="czmlMousemove">-->
        <!--&lt;!&ndash; <CzmlEntity :data="polygon"></CzmlEntity> &ndash;&gt;-->
        <!--<CzmlBillboard :data="billboard2"></CzmlBillboard>-->
        <!--<CzmlPolygon :show="czmlshow" :disabled='disabled' :data="polygon2"></CzmlPolygon>-->
      <!--</Czml>-->

      <!--<Wander :show="showWander"></Wander>-->

    </CTMap3D>
  </div>

</template>

<script>
  import wanggedata from './wangge'
  export default {
    name: "Map",
    data() {
      return {
        pickTiles3D: [
          { center: [116.5411688532892, 40.03711698076882], id: 111, title: '数据1' },
          { center: [116.54110531272653, 40.03519519059162], id: 222, title: '数据2'},
          { center: [116.54210269822279, 40.03593171411618], id: 333, title: '数据3'}
        ],
        pathWander: [],
        showWander: true,
        disabled: false,
        czmlshow: true,
        size: null,
        layerName: ['satellite'],
        newLayer: [{
                                name: 'sunhe',
                                type: 'WebMapTileServiceImageryProvider',
                                url : 'http://192.168.100.13:8047/geowebcache/service/wmts?',
                                layer : 'sunhe1_2D',
                                style : 'default',
                                tileMatrixSetID : 'EPSG:3857_sunhe1_2D',
                                tileMatrixLabels : ['EPSG:3857_sunhe1_2D:0','EPSG:3857_sunhe1_2D:1','EPSG:3857_sunhe1_2D:2','EPSG:3857_sunhe1_2D:3','EPSG:3857_sunhe1_2D:4','EPSG:3857_sunhe1_2D:5','EPSG:3857_sunhe1_2D:6','EPSG:3857_sunhe1_2D:7','EPSG:3857_sunhe1_2D:8','EPSG:3857_sunhe1_2D:9','EPSG:3857_sunhe1_2D:10','EPSG:3857_sunhe1_2D:11','EPSG:3857_sunhe1_2D:12','EPSG:3857_sunhe1_2D:13','EPSG:3857_sunhe1_2D:14','EPSG:3857_sunhe1_2D:15','EPSG:3857_sunhe1_2D:16','EPSG:3857_sunhe1_2D:17','EPSG:3857_sunhe1_2D:18','EPSG:3857_sunhe1_2D:19'],
                                format : 'image/png'
                            },{
                                name: 'sunhe',
                                type: 'WebMapTileServiceImageryProvider',
                                url : 'http://192.168.100.13:8047/geowebcache/service/wmts?',
                                layer : 'sunhe2_2D',
                                style : 'default',
                                tileMatrixSetID : 'EPSG:3857_sunhe2_2D',
                                tileMatrixLabels : ['EPSG:3857_sunhe2_2D:0','EPSG:3857_sunhe2_2D:1','EPSG:3857_sunhe2_2D:2','EPSG:3857_sunhe2_2D:3','EPSG:3857_sunhe2_2D:4','EPSG:3857_sunhe2_2D:5','EPSG:3857_sunhe2_2D:6','EPSG:3857_sunhe2_2D:7','EPSG:3857_sunhe2_2D:8','EPSG:3857_sunhe2_2D:9','EPSG:3857_sunhe2_2D:10','EPSG:3857_sunhe2_2D:11','EPSG:3857_sunhe2_2D:12','EPSG:3857_sunhe2_2D:13','EPSG:3857_sunhe2_2D:14','EPSG:3857_sunhe2_2D:15','EPSG:3857_sunhe2_2D:16','EPSG:3857_sunhe2_2D:17','EPSG:3857_sunhe2_2D:18','EPSG:3857_sunhe2_2D:19'],
                                format : 'image/png'
                            },{
                                name: 'sunhe',
                                type: 'WebMapTileServiceImageryProvider',
                                url : 'http://192.168.100.13:8047/geowebcache/service/wmts?',
                                layer : 'sunhe3_2D',
                                style : 'default',
                                tileMatrixSetID : 'EPSG:3857_sunhe3_2D',
                                tileMatrixLabels : ['EPSG:3857_sunhe3_2D:0','EPSG:3857_sunhe3_2D:1','EPSG:3857_sunhe3_2D:2','EPSG:3857_sunhe3_2D:3','EPSG:3857_sunhe3_2D:4','EPSG:3857_sunhe3_2D:5','EPSG:3857_sunhe3_2D:6','EPSG:3857_sunhe3_2D:7','EPSG:3857_sunhe3_2D:8','EPSG:3857_sunhe3_2D:9','EPSG:3857_sunhe3_2D:10','EPSG:3857_sunhe3_2D:11','EPSG:3857_sunhe3_2D:12','EPSG:3857_sunhe3_2D:13','EPSG:3857_sunhe3_2D:14','EPSG:3857_sunhe3_2D:15','EPSG:3857_sunhe3_2D:16','EPSG:3857_sunhe3_2D:17','EPSG:3857_sunhe3_2D:18','EPSG:3857_sunhe3_2D:19'],
                                format : 'image/png'
                            }],
        billboardArray: [{
          position: [116.54356827533098, 40.035701206382356],
          image: './static/home.png'
        }],
        tiles3Dcolor: '#ffffff',
        model2: [{
          "position" : {
            "cartographicDegrees" : [
              116.53927270066592,
              40.034529192814674,
              0
            ]
          },
          "model": {
            "gltf" : "./static/car/index.gltf",
            "scale" : 10,
            "minimumPixelSize": 128
          }
        }],
        billboard2: [{
          label: '',
          image: './static/home.png',
          position: [116.53927270066592, 40.034529192814674]
        },{
          label: '来个标题',
          image: './static/home.png',
          position: [116.5448674318373, 40.03213262867915]
        }],
        polygon2: [{
                    color: '#00FFFF',
                    id: '1111111',
                    hierarchy: [
                      116.53927270066592,
                      40.034529192814674,
                      116.5407374359242,
                      40.03110517569499,
                      116.5448674318373,
                      40.03213262867915,
                      116.54325391704461,
                      40.03553747619213,
                      116.53928122595504,
                      40.034552679842825
                    ]
                  },{
                    color: '#7FFF00',
                    id: '2222222222',
                    hierarchy: [
                      116.53629800193178,
                      40.03416561553714,
                      116.53916434634269,
                      40.034652595205074,
                      116.54014496571251,
                      40.03102290987404,
                      116.53723149248705,
                      40.03043437162686,
                      116.53628144790434,
                      40.0341033474993
                    ]
                  },{
                    color: '#008B8B',
                    id: '33333333',
                    hierarchy: [
                      116.536381503883,
                      40.03412898681175,
                      116.53668721140993,
                      40.03049988963516,
                      116.53361478455533,
                      40.030415325783814,
                      116.53303809465112,
                      40.03406725143638,
                      116.53641094458065,
                      40.03413075443552
                    ]
                  }],
        polygon: [{
          "id" : "redPolygon",
          "polygon" : {
            "positions" : {
              "cartographicDegrees" : [
                116.54223162576565,
                40.037540883162016,
                0,

                116.54007545458248,
                40.035860287566784,
                0,

                116.54127496249018,
                40.03433052053215,
                0,

                116.54383712801645,
                40.03502183599574,
                0
              ]
            },
            "material" : {
              "solidColor" : {
                "color" : {
                  "rgba" : [255, 0, 0, 80]
                }
              }
            }
          }
        }]
      }
    },
    mounted() {
      const divbox = this.$refs['divbox']
      this.size = {
        width: divbox.clientWidth,
        height: divbox.clientHeight
      }

      let arr = []
      for(let i = 0; i <  2; i++) {
        arr.push({
          position: [116.54356827533098 + (i*.001), 40.035701206382356],
          image: './static/home.png'
        })
      }
      this.billboardArray = arr
    },
    methods: {
      controlBarChange(arr) {
          alert("arr:"+arr)
      },
      CTMap3DReady() {
        this.$emit('ready')
      },
      LayerMapReady() {

      },
      Map2DReady({ map2D, Map2D }) {
        //天地图

      },
      AMap2DReady({ map2D, Map2D }) {
        //高德地图
        this.map2D = map2D
        this.Map2D = Map2D
      },
      animateEnd() {
        console.log("动画结束")
      },
      init() {
        //初始化
        this.$refs['CTMap3D'].goHome()
        this.layerName = ['satellite', 'satelliteroad']
      },
      changeLayer() {
        //切换图层
        this.layerName = ['map']
      },
      customLayer() {
        this.layerName = ['satellite']
      },
      czmlleftclick({properties, entity}) {
        console.log(entity)
      },
      czmlMousemove(json) {
        json.label.textContent = "nihaome?"
      },
      mapMousemove(event) {
        let lnglat = this.$refs['CTMap3D'].cartographicfromCartesian(event.endPosition)
        //console.log(lnglat)
      },
      demo(options) {
        //this.disabled = !this.disabled
        //this.tiles3Dcolor = "#00ff00"
        console.log(this.$refs['CTMap3D'].bounds())
        return
        const { map2D, Map2D } = this
        this.showWander = !this.showWander
        //
        //this.polygon[0]. polygon.positions.cartographicDegrees = wanggedata
        //this.$set(this.polygon[0]. polygon.positions, "cartographicDegrees", wanggedata)
        //this.polygon = []
        //console.log(this.polygon)
          // fetch('../out/main.wasm').then(response =>
        //   response.arrayBuffer()
        // ).then(bytes => WebAssembly.instantiate(bytes)).then(results => {
        //   instance = results.instance;
        //   document.getElementById("container").textContent = instance.exports.main();
        // }).catch(console.error);

        // this.tiles3Dcolor = '#ff2200'
        //
        /*
        Map2D.$methods.routeSearch({
          start: [116.53293741263172, 40.03400688018847],
          end: [116.54059893634957, 40.031065997718315],
          callback: path => {
            this.pathWander = path
            return
            //获取所有值
            this.$refs['CTMap3D'].polyline({
              positions: path
            })
          }
        })
        */
        /*
        Map2D.$methods.routeSearch({
          start: [116.55264961175979, 40.03833412150522],
          end: [116.54242682377115, 40.03528828718918],
          callback: path => {
            //获取所有值
            this.$refs['CTMap3D'].polyline({
              positions: path
            })
          }
        })
        */

      },
      draw(options, entityOptions) {
        this.$refs['CTMap3D'].draw(options, entityOptions)
      },
      clearDraw() {
        this.$refs['CTMap3D'].clearDraw()
      },
      leftclick(json) {
        console.log(json)
      },
      mousemove(json) {
        json.label.textContent = "nihaome"
        //console.log(json)
      },
      moveend() {
        console.log("结束")
        this.polygon2 = JSON.parse(JSON.stringify(this.polygon2))
      }

    }
  }
</script>

<style scoped>
.divbox {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>
