<!--
 * @Description: 地图坐标拾取工具
 * @Author: 王晓颖
 * @Date: 2020-09-09 10:18:08
 -->
<template>
  <div style="width: 100%; height:100%">
    <div style="width:100%; height:100%;position:relative">
      <f-map :type="type" :plugins="plugins" :layers="layers" @ready="mapReady">
        <!--自定义线-->
        <!--<f-map-features :data="boundaryData" type="Polygon" geoField="geo" layer="boundary"/>-->
        <!--精一地图边界-->
        <!--<f-map-features :data="boundaryData" type="ArcgisPolygon" geoField="geo" layer="boundary"/>-->

      </f-map>
      <!--切换图层按钮区域-->
      <!--<div style="position:absolute;top:20px;right:20px;z-index:100">-->
      <!--<button1 v-model="layersShow.constructionShow" @click.native="showConstructionCars">渣土车</button1>-->
      <!--<button1 v-model="layersShow.shuangchuangShow" @click.native="showShuangChuang">人员</button1>-->
      <!--<button1 v-model="layersShow.caseShow" @click.native="showCase">事件</button1>-->
      <!--</div>-->
      <!--<zhatu v-if="layersShow.constructionShow"/>-->
      <!--<shuangchuang v-if="layersShow.shuangchuangShow"/>-->
      <!--<case v-if="layersShow.caseShow"/>-->
    </div>
  </div>
</template>

<script>
import FMap from '@/components/fMap/components/fMap'
import {fetchConstructionCars, fetchShuangchuang, fetchCase} from '@/api/cityManage'
import FMapFeatures from '@/components/fMap/components/fMapFeatures'
import Button1 from '@/components/button/button1'
import {fetchBoundary, fetchAreaBoundary} from '@/api/geojson'
export default {
  name: 'JyMap2D',
  components: {FMapFeatures, FMap, Button1},
  data () {
    return {
      type: 'blackVector', // 地图类型
      plugins: ['mapswitch', 'mouseposition'], // 插件
      zoom: 13, // 缩放等级
      layers: {
        default: {name: 'default', title: '默认图层', symbol: ''},
        boundary: {name: 'boundary', title: '边界图层', selectable: false, style: 'fill:rgba(3,89,164,0.6);stroke-color:#FCFC9D;stroke-width:2;'},
        areaBoundary: {name: 'areaBoundary', title: '乡镇图层', selectable: false, style: 'fill:rgba(3,89,164,0.6);stroke-color:#FFFFF;stroke-width:2;'},
        car: {name: 'car', title: '车辆', bubbleable: true, bubble: 'truckBB', symbol: 'track-ztc'},
        police: {name: 'police', title: '交通', symbol: 'police'},
        volunteers: {name: 'volunteers', type: 'Clust', animation: true, bubble: 'myclustBB', title: '志愿者', symbol: 'volunteers'},
        volunteer: {name: 'volunteer', bubbleable: true, bubble: 'volunteerBB', title: '志愿者1', symbol: 'volunteer'},
        caseHandle: {name: 'caseHandle', bubbleable: true, bubble: 'caseBB', title: '已处理事件', symbol: 'case-handle'},
        caseOvertime: {name: 'caseOvertime', bubbleable: true, bubble: 'caseBB', title: '超期事件', symbol: 'case-over'},
        caseWait: {name: 'caseWait', bubbleable: true, bubble: 'caseBB', title: '待处理事件', symbol: 'case-wait'},
        video: {name: 'video', title: '视频', symbol: 'video'}
      }, // 往fmap注入的图层
      boundaryData: [], // 边界数据
      areaBoundaryData: [], // 乡镇级行政区数据
      constructionCarsData: [], // 渣土车位置数据
      shuangchuangData: [], // 双创志愿者数据
      caseHandleData: [], // 案件数据
      caseOvertimeData: [], // 案件数据
      caseWaitData: [], // 案件数据
      layersShow: {
        constructionShow: false, // 渣土车图层显示
        shuangchuangShow: false, // 双创志愿者图层显示
        caseShow: false // 案件图层显示
      }
    }
  },
  mounted () {
    this.getBoundary()
  },
  methods: {
    // 地图准备好后的操作，返回fmap对象
    mapReady ({fmap}) {
      this.fmap = fmap
    },
    // 获取行政区划
    getBoundary () {
      // 精一接口
      fetchBoundary().then(response => {
        if (response.code === '1') {
          const data = response.data.data[0].data
          this.boundaryData = data
        }
      })
    },
    getAreaBoundary () {
      fetchAreaBoundary().then(response => {
        if (response.code === '1') {
          const data = response.data.data[0].data
          this.areaBoundaryData = data
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .button {
    float: left;
    min-width: 150px;
    max-width: 250px;
    display: block;
    margin: 1em;
    padding: 1em 2em;
    border: none;
    background: none;
    color: white;
    vertical-align: middle;
    position: relative;
    z-index: 1;
    -webkit-backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
  }
  .button--round-s {
    border-radius: 5px;
  }
  .button--border-thin {
    border: 1px solid;
  }
  button--saqui {
    border-color: #ECEFF1;
    overflow: hidden;
    color: #fff;
    background: #37474f;
    -webkit-transition: background-color 0.3s ease-in, color 0.3s ease-in;
    transition: background-color 0.3s ease-in, color 0.3s ease-in;
    .button--inverted {
      background: #fff;
      color: #37474f;
    }
    button--inverted::after {
      color: #fff;
    }
  }
  .button--saqui::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 1em 2em;
    color: #37474f;
    -webkit-transform-origin: -25% 50%;
    transform-origin: -25% 50%;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    -webkit-transition: -webkit-transform 0.3s ease-in;
    transition: transform 0.3s ease-in;
  }
</style>