<template>
  <div id="map">
  </div>
</template>

<script>
import Mapbox from '@/framework/map/mapbox'//引入export的Mapbox对象
import Bar3D from '@/framework/map/three/threebox'
import * as Tool from '@/framework/map/tool'
export default {
  name: 'mapbox',
  async mounted(){
    // this.init()
    let vm = this
    let { mapbox, deck, layer } = await Mapbox.init('map',{
        center: [121.2974353356, 31.1915996883],
        zoom: 15.1,
        pitch: 0,
        type: 'vector', //raster :瓦片 ； vector：矢量
        source: '172.20.5.41:8080',
        style: 'dark', //地图样式
        font: ['Microsoft YaHei Regular'],
        // 带多个立体边框的面积图
        areaShade: {
          // 文件名
          as1: {
            areaColor: 'red',
            opacity: 0.1, // 填充透明度
            lineColor: 'red|red|red|yellow'
          },
          // 文件名2
          as2: {
            type: 'dynamic',
            areaColor: 'yellow',
            opacity: 0.5,
            lineColor: 'green|yellow'
          }
        },
        // 3d柱状图点位
        bar3d: {
          bar1: 'bar1'
        },
        // 自定义3d建筑
        build3d: {
          tongzhou: {
            color: 'rgba(22, 13, 78, 1)' // 建筑颜色
          }
        },
        video: ['vid.webm', 'radar.webm'],
        // 光流图
        line3d: {
          tongzhouroute: {
            color: 'rgb(29,66,240)', //光流颜色
            spoit: 100, //光点亮度(建议范围为1-500)
            width: 1 //光流线宽(建议范围为1-10)
          }
        }
    })
    window.map = mapbox
    // let bar3d = new Bar3D(mapbox)
    // mapbox.on('style.load', () => {
    //   // 0. 添加图片
    //   layer.addImage(
    //     'img',
    //     '展馆.png',
    //     Tool.pointToGeoJson([121.29728078842165, 31.191703893277978]),
    //     720,
    //     151
    //   )
    //   bar3d.add([121.2974353356, 31.1955996883, 100])
    // })
  },
  data(){
    return {
      barData: {},
      points: [],
      d3: {
        bearing: 0,
        pitch: 0,
        zoom: 0
      }
    }
  },
  methods: {
      // init(){
      //   this.mbgl.accessToken = 'pk.eyJ1IjoidHJhY3lsdW94dSIsImEiOiJjanlzZXRidnkwamUyM2xxeWluazRqN3l5In0.pL7BymUzy1SwR0wD_WyWVA';
      //   let map = new this.mbgl.Map({
      //     container: 'map',
      //     style: 'mapbox://styles/mapbox/streets-v9',
      //     center: [-87.61694, 41.86625],
      //     zoom: 15.99,
      //     pitch: 40,
      //     bearing: 1
      //   })
      //   map.on('load', function() {
      //     map.addLayer({
      //       'id': 'room-extrusion',
      //       'type': 'fill-extrusion',
      //       'source': {
      //         'type': 'geojson',
      //         'data': 'https://docs.mapbox.com/mapbox-gl-js/assets/indoor-3d-map.geojson'
      //       },
      //       'paint': {
      //         'fill-extrusion-color': ['get', 'color'],
      //         'fill-extrusion-height': ['get', 'height'],
      //         'fill-extrusion-base': ['get', 'base_height'],
      //         'fill-extrusion-opacity': 0.6
      //       }
      //     })
      //   })
      // }
  },
  data () {
    return {
      msg: ''
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
body {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 80%;
}
#map {
  width: 90%;
  height: 100%;
}
</style>
