<template>
  <div ref="divbox" class="divbox">
    <div class="button">
      <button @click="drawPolylineDistance">测距</button>
      <button @click="drawPolygonDistance">测面</button>
      <button @click="clearDistance">结束</button>

      <button @click="czmlstart">小车开始</button>
      <button @click="czmlstop">小车结束</button>
      <button @click="czmlup">小车更新</button>

    </div>

    <CTMap3D
      :shadows="true"
      ref="CTMap3D"
      :pitch="-90"
      :heading="0"
      :animate="false"
      :animatePoints="[116.391270,39.907100]"
      :center = "[116.542997158755,40.0358535108557]"
      @animateEnd="animateEnd"
      @moveend="moveend"
      @mousemove="mapMousemove"
      @ready="CTMap3DReady">
      <LayerMap ref="LayerMap"
                @ready="LayerMapReady"
                k="40e0806ea26590d3257b66d0cb1caf99"
                :newLayer="[]"
                :layerName="layerName">
      </LayerMap>
      <!--天地图插件-->
      <TiandituMap k="40e0806ea26590d3257b66d0cb1caf99" @ready="Map2DReady"></TiandituMap>

      <CzmlList :data="czmldata1"></CzmlList>

      <CzmlList :data="czmldata2"></CzmlList>

      <CzmlList :data="czmldata3"></CzmlList>


      <AnimateModel @leftclick="animateClick" v-if="animateModelShow"
                    ref="AnimateModel"
                    :data="this.animateModelData1"></AnimateModel>
      <ControlBar :diy="diy"
                  @diyclick="diyclick"
                  @change='controlBarChange'></ControlBar>
    </CTMap3D>
  </div>

</template>

<script>
  export default {
    name: "Map",
    data() {
      return {
        diy: [{
          icon: 'icon-fangzi',
          title: '切换'
        }],
        animateModelData1: [{"id":"document","name":"document",
          "version":"1.0",
          "clock":{"interval":"2019-05-14T11:47:25Z/2019-05-17T14:03:27Z","currentTime":"2019-05-16T17:16:48Z","multiplier":2}},
          {"id":"car10300000000263","name":"AnimateModel",
            "label":{"font":"18px 微软雅黑","horizontalOrigin":"CENTER","showBackground":true,"fillColor":{"rgba":[0,255,254,255]},"pixelOffset":{"cartesian2":[0,-50]},"style":"FILL_AND_OUTLINE","text":"梁铁"},
            "billboard":{"image":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAoCAYAAACfKfiZAAAFgklEQVRYR6VYXWxURRT+ztzuLdVCtywvEJMWNRpNsCSKGk1EEkx8gAiJGMG21PTHBWPaB7stTfkLgv3xAZSQ/gq2REwwoQbeIAFMTCCoaTXRhKgsLzQx3e62om33du+YM8vd3u7PvXfLJJtsds7M+eZ855s5ZwleR1PUrxVio4C5DZDlBCoHwB8eYQkZBihsQowk5nAdx0tjXrYmV6PWaLlPmgcJqHG1tRlI4IxB4jA6SsNO63IDaIr6fbp5kAhN1gavPV6Arc/qqFhTgLJSgfJSoabG7iUQm5UYuzeP4Z/m8Mt4YsGnxKF4XJzIFZHsAJLOrxJhPe9U9Xwh2jcXpRy6RSIcNXHk8gzO/jynTKXEqBEXm7KByADga46uBynn/udWaxjYUYyKNZqbz6zzHJkdw//gbtRkEDFIscnoLh21Gy8GkDz5HXbO4T5ftRz+Ivc0cUIXm5EKxPd/zSsQRlystUdiYXdb2Nn55YYVSzp1rkVv9E1bIBbRkQLga4kcJ6CRw87OH/bk6UA4Ei9+PqXogMTheFfgENskAbRGy3Vp3uGvtxpLwCCcRkNDA0wiSC1px5uQYaC/v99xHecEg+ARJ7GWJaoA+EKRM0TYzdk+sONRx03q6+txI/AWbuOVDLvd0X3o6+11XF93/l8lVSnxldEVqCE0Rf16oRnlVbdb/ErfTqM+GMSQ/1hWk133D+D0yZOO61miT3cmL8n4nCglLTSxTSO64DXx3gwdx1VRndNJdaTFlYoNJ6bUZZWQcjtZ4f9s6yP46NVlrplf2DrpaOMFwBc/zOLji/8pGsgXmrhGRBs58zkKbmNd66Ws/FvrqiZCGBgYcNyG7wSWpZTyOumhSBiEMi/88671e/ZgqORoVgfv3T+AL11ygBdaauArmvSWiOQf5zpWuh1ezdfV1WF4VVdW2+rJVvT39Xnax6IybwAKRDCI4TQlVE23o2zNY9jf3pYfAF8oMk8EzSsFvPvA4GncuHUTN/1bVD5UxdqgSaC3t8eTc1YAK8GUMDgJY0RU4jUJ+RaUUiqpMZDx8XF16traWmiahj4PFNiScIpl+BsRnnGTobp+NQ3DJUdRHWtDf0+PooJMU/FeGwzirP+YmuPfnIDYZPg7iea/Py0QWmuuiygY3IN5yEzOJ0KQuq5CLgwDQ4HOReFnWl7e8BLqat/PoMW6iObNRAfhw2iZXmyqui1bHuSSXWWsDXxps4SkEDi74pMMR5XRfRhMexv4NXzKfhXzKl/zxB8k6Ilsj1Ht3r1ZN/eSbZXT7Rg8dWqRaeoxMuWfRveqJ5PPccvkuzrkOf6a/hwztxDOD1ROMKaJwZ4FZVjZz/Zx0E50rvwmVZDozZEwBMq4FrjywQqULHu4Uiwd1NSsVNJTBYmJu/HugOopFrw0T27xCXmRf/D6MnqhwbKxEo9zxjBpK7pXXloMAIDWHPlaCOy0QHxbvfyhI8Enf3voQVEKwDRxLtEd2GUBWxznZBf0K4BinmA6Bt8pdi3RckWCOWfnqixPGt03SKyzd0sZRHOBIkAXmBxrktWxf3ORa7VkAWGHR67MqNKLh3IumXq5PdG1asQOOGumcYUMiUY1abPgiFS/UIiK1QWqaraKVz4pV71j4/MY+jGjNUsCIJwwOgOpNi87BTZovpbIKAEVFnrKUxSSFz6IogTGjM6AavPSh2NzquvmKBcrKoIWEiskNopSU6mAE1KAJe7G42J9fs3pA5iqTxTmNQJK8pGcZSuBKZji9fR+0DUH7AZLBeHFecY9kOuU+YLw6twzADb0CiIf53kB8AIiX+d5A1AUJW/LEZaonTIlNRLb3P4T8i5Dp7RX/yUkRrihSZrJ7+JzWo3Xf8byUoETDm7reJ673KXIlNf8Dzt3iPBeDiXjAAAAAElFTkSuQmCC"},
           // "model":{"minimumPixelSize":36,"scale":1},
            "position":{"epoch":"2019-05-14T11:47:25Z","cartographicDegrees":["2019-05-16T17:16:48Z",116.5373612762,40.0428250561,0,"2019-05-16T17:17:57Z",116.540515554,40.0427757744,0,"2019-05-16T17:18:55Z",116.5427042366,40.0436792662,0,"2019-05-17T10:05:08Z",117.04412,39.38326,0,"2019-05-17T10:05:15Z",117.04412,39.38326,0,"2019-05-17T10:05:21Z",117.04412,39.38326,0,"2019-05-17T10:05:27Z",117.04412,39.38326,0,"2019-05-17T10:05:33Z",117.04412,39.38326,0,"2019-05-17T10:05:39Z",117.04412,39.38326,0,"2019-05-17T10:05:45Z",117.04412,39.38326,0,"2019-05-17T10:05:50Z",117.04412,39.38326,0,"2019-05-17T10:05:57Z",117.04412,39.38326,0,"2019-05-17T10:06:03Z",117.04412,39.38326,0,"2019-05-17T10:06:09Z",117.04412,39.38326,0,"2019-05-17T10:06:15Z",117.04412,39.38326,0,"2019-05-17T10:06:21Z",117.04412,39.38326,0,"2019-05-17T10:06:27Z",117.04412,39.38326,0,"2019-05-17T10:06:33Z",117.04412,39.38326,0,"2019-05-17T10:06:39Z",117.04412,39.38326,0,"2019-05-17T10:06:45Z",117.04412,39.38326,0,"2019-05-17T10:06:51Z",117.04412,39.38326,0,"2019-05-17T10:06:57Z",117.04412,39.38326,0,"2019-05-17T10:07:05Z",117.04412,39.38326,0,"2019-05-17T10:07:09Z",117.04412,39.38326,0]},"orientation":{"velocityReference":"#position"},"availability":"2019-05-14T11:47:25Z/2019-05-17T14:03:27Z",
          "path":{"material":{"solidColor":{"color":{"rgba":[255,0,0,255]}}},"width":2}}],
        czmldata3: [{
          "id" : "document",
          "name" : "document",
          "version" : "1.0"
        },{
          "name" : "sss",
          "polygon" : {
            "positions" : {
              "cartographicDegrees" : [
                116.53629800193178,
                40.03416561553714,0,
                116.53916434634269,
                40.034652595205074,0,
                116.54014496571251,
                40.03102290987404,0,
                116.53723149248705,
                40.03043437162686,0,
                116.53628144790434,
                40.0341033474993,0
              ]
            },
            "material" : {
              "solidColor" : {
                "color" : {
                  "rgba" :  [150, 0, 150, 100]
                }
              }
            }
          }
        },{
          "name" : "sss",
          "polygon" : {
            "positions" : {
              "cartographicDegrees" : [
                116.53927270066592,
                40.034529192814674,0,
                116.5407374359242,
                40.03110517569499,0,
                116.5448674318373,
                40.03213262867915,0,
                116.54325391704461,
                40.03553747619213,0,
                116.53928122595504,
                40.034552679842825,0
              ]
            },
            "material" : {
              "solidColor" : {
                "color" : {
                  "rgba" :  [150, 0, 150, 100]
                }
              }
            }
          }
        }],
        czmldata1: [{
          "id" : "document",
          "name" : "document",
          "version" : "1.0"
        },{
          "name" : "sss",
          "label": {
            "font" : "17px 微软雅黑",
            "horizontalOrigin" : "CENTER",
            "outlineWidth" : 1,
            "pixelOffset" : {
              "cartesian2" : [0, -20]
            },
            "style" : "FILL_AND_OUTLINE",
            "text" : "津A.8888"
          },
          "billboard" : {
            "image" : './static/home.png'
          },
          "position" : {
            "cartographicDegrees": [116.53927270066592, 40.034529192814674, 0]
          }
        }],
        czmldata2: [{
          "id" : "document",
          "name" : "document",
          "version" : "1.0"
        },{
          "name" : "sss",
          "label": {
            "font" : "17px 微软雅黑",
            "horizontalOrigin" : "CENTER",
            "outlineWidth" : 1,
            "pixelOffset" : {
              "cartesian2" : [0, -20]
            },
            "style" : "FILL_AND_OUTLINE",
            "text" : "津A.66"
          },
          "billboard" : {
            "image" : './static/home.png'
          },
          "position" : {
            "cartographicDegrees": [116.53997270066592, 40.034629192814674, 0]
          }
        },{
          "name" : "sss",
          "label": {
            "font" : "17px 微软雅黑",
            "horizontalOrigin" : "CENTER",
            "outlineWidth" : 1,
            "pixelOffset" : {
              "cartesian2" : [0, -20]
            },
            "style" : "FILL_AND_OUTLINE",
            "text" : "津A.333"
          },
          "billboard" : {
            "image" : './static/home.png'
          },
          "position" : {
            "cartographicDegrees": [116.54997270066592, 40.034629192814674, 0]
          }
        }],
        animateModelShow: true,
        animateModelData: [{
          "id" : "document",
          "name" : "document",
          "version" : "1.0",
          "clock": {
            "interval": "2015-01-01T00:00:00Z/2015-01-01T00:00:60Z",
            "currentTime": "2015-01-01T00:00:00Z",
            "multiplier": 10
          }
        }, {
          "id" : "car",
          "name" : "AnimateModel",
          "label": {
            "font" : "17px 微软雅黑",
            "horizontalOrigin" : "CENTER",
            "outlineWidth" : 1,
            "pixelOffset" : {
              "cartesian2" : [0, -20]
            },
            "style" : "FILL_AND_OUTLINE",
            "text" : "津A.pk"
          },
          "position" : {
            "epoch" : "2015-01-01T00:00:00Z",
            "cartographicDegrees" : [
              0, 116.53643425076635,40.03433540326442, 0,
              20, 116.54060601215346,40.034872530740465, 0,
              40, 116.54311976749611,40.03551541206543, 0,
              60, 116.53877972744955,40.035675392483434, 0
            ]
          },
          "orientation": {
            "velocityReference": "#position"
          },
          "model": {
            minimumPixelSize: 100,
            "gltf" : "./static/pk/index.gltf",
            "scale" : 1.0
          }
        }, {
          "id" : "bluecar",
          "name" : "AnimateModel",
          "label": {
            "font" : "17px 微软雅黑",
            "horizontalOrigin" : "CENTER",
            "outlineWidth" : 1,
            "pixelOffset" : {
              "cartesian2" : [0, -20]
            },
            "style" : "FILL_AND_OUTLINE",
            "text" : "津B.xfc"
          },
          "position" : {
            "epoch" : "2015-01-01T00:00:10Z",
            "cartographicDegrees" : [
              0, 116.53643425076635,40.03433540326442, 0,
              20, 116.54060601215346,40.034872530740465, 0,
              40, 116.54311976749611,40.03551541206543, 0,
              60, 116.53877972744955,40.035675392483434, 0
            ]
          },
          "orientation": {
            "velocityReference": "#position"
          },
          "model": {
            minimumPixelSize: 100,
            "gltf" : "./static/xfc/index.gltf",
            "scale" : 1.0
          }
        }, {
          "id" : "bluecar11",
          "name" : "AnimateModel",
          "label": {
            "font" : "17px 微软雅黑",
            "horizontalOrigin" : "CENTER",
            "outlineWidth" : 1,
            "pixelOffset" : {
              "cartesian2" : [0, -20]
            },
            "style" : "FILL_AND_OUTLINE",
            "text" : "津B.xqc"
          },
          "position" : {
            "epoch" : "2015-01-01T00:00:20Z",
            "cartographicDegrees" : [
              0, 116.53643425076635,40.03433540326442, 0,
              20, 116.54060601215346,40.034872530740465, 0,
              40, 116.54311976749611,40.03551541206543, 0,
              60, 116.53877972744955,40.035675392483434, 0
            ]
          },
          "orientation": {
            "velocityReference": "#position"
          },
          "model": {
            minimumPixelSize: 100,
            "gltf" : "./static/xqc/index.gltf",
            "scale" : 1.0
          }
        }],
        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: {
      drawPolylineDistance() {
        this.$refs['CTMap3D'].polylineDistance({
          draw:({label, properties}) => {
            let len = this.getDistance(properties.pathPoint)/1000
            len = len.toFixed(2)
            if(properties.endBol) {
              label.text.setValue('总长度：'+len+'公里')
            }else {
              label.text.setValue(len+'公里')
            }

          }
        })
      },
      diyclick(item) {
        if(item.icon == 'icon-fangzi') {
          this.diy = [{
            icon: 'icon-louyu',
            title: '哈哈'
          }]
        }else if(item.icon == 'icon-louyu') {
          this.diy = [{
            icon: 'icon-fangzi',
            title: '切换'
          }]
        }
        /*
        [{
          icon: 'icon-fangzi',
          title: '切换'
        },{
          icon: 'icon-louyu',
          title: '哈哈'
        }]*/

        //alert(JSON.stringify(item))
      },
      drawPolygonDistance() {
        this.$refs['CTMap3D'].polygonDistance({})
      },
      clearDistance() {
        this.$refs['CTMap3D'].clearDistance()
      },

      animateClick({properties, entity}) {
        console.log(properties, entity)
        this.$refs['AnimateModel'].lookAt(entity)
        //entity
      },
      czmlstart() {
        const clock = this.$refs['CTMap3D'].getClock()
        clock.shouldAnimate(true)
        //this.$refs['AnimateModel'].setStartTime('2015-01-01T00:00:20Z')
      },
      czmlstop() {
        const clock = this.$refs['CTMap3D'].getClock()
        clock.shouldAnimate(false)
        //this.animateModelShow = false
        //2015-01-01T00:00:00Z/2015-01-01T00:00:60Z
        //this.$refs['AnimateModel'].shouldAnimate(false)
      },
      czmlup(czml) {
        this.animateModelData.splice(2,1)
      },
      controlBarChange(arr) {
          alert("arr:"+arr)
      },
      CTMap3DReady() {
        this.$emit('ready')
      },
      LayerMapReady() {

      },
      Map2DReady({ map2D, Map2D }) {
        //天地图
        this.map2D = map2D
        this.Map2D = Map2D
        this.PolylineTool = new Map2D.PolylineTool(map2D, {})
      },
      getDistance(arr) {
        //天地图获取距离数据
        //所有点
        const { Map2D,map2D, PolylineTool } = this
        let _arr = []
        for(let i = 0; i < arr.length; i+=2) {
          _arr.push(new Map2D.LngLat(arr[i], arr[i+1]))
        }
        return parseFloat(this.PolylineTool.getDistance(_arr))
      },
      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) {
        if(json && json.label)
        json.label.textContent = "nihaome";
        //console.log(json)
      },
      moveend() {
        console.log("结束")
       // this.polygon2 = JSON.parse(JSON.stringify(this.polygon2))
        this.czmldata3 = [{
          "id" : "document",
          "name" : "document",
          "version" : "1.0"
        },{
          "name" : "sss",
          id: 'aaa',
          "polygon" : {
            "positions" : {
              "cartographicDegrees" : [
                116.53629800193178,
                40.03416561553714,0,
                116.53916434634269,
                40.034652595205074,0,
                116.54014496571251,
                40.03102290987404,0,
                116.53723149248705,
                40.03043437162686,0,
                116.53628144790434,
                40.0341033474993,0
              ]
            },
            "material" : {
              "solidColor" : {
                "color" : {
                  "rgba" :  [150, 0, 150, 100]
                }
              }
            }
          }
        },{
          "name" : "sss",
          id: 'bnbb',
          "polygon" : {
            "positions" : {
              "cartographicDegrees" : [
                116.53927270066592,
                40.034529192814674,0,
                116.5407374359242,
                40.03110517569499,0,
                116.5448674318373,
                40.03213262867915,0,
                116.54325391704461,
                40.03553747619213,0,
                116.53928122595504,
                40.034552679842825,0
              ]
            },
            "material" : {
              "solidColor" : {
                "color" : {
                  "rgba" :  [150, 0, 150, 100]
                }
              }
            }
          }
        }]
      }

    }
  }
</script>

<style scoped>
  .button {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1000;
  }
  .divbox {
    width: 100%;
    height: 100%;
    position: relative;
  }
</style>
