<template>
  <div class="hello">
    <el-row style="width:100%;height:70px;">
      <el-col>
        <div class="layer-info">
          <div class="back-button" @click="$router.go(-1)">
            <i class="el-icon el-icon-arrow-left"></i>
          </div>
          <div class="layer-icon">
              <img src="/images/图层.png" alt="">
          </div>
          <div class="layer-name">
            <p style="font-size:16px;font-weight:bold;">{{layerInfo.severName ? layerInfo.severName : '图层未命名'}} </p>
            <p style="font-size:13px;color:#ccc;margin-top:7px;">
              <span class="count-item"><i class="el-icon el-icon-time"></i> 创建时间：{{layerInfo.createTime}} </span>
              <span class="count-item"><i class="el-icon-s-grid"></i>数据源类型：{{layerInfo.datasourceType}}</span>
              <span class="count-item"><i class="el-icon el-icon-menu"></i>数据类型：{{layerInfo.dataType}}</span>
              <span class="count-item"><i class="el-icon el-icon-map-location"></i>空间参考：{{layerInfo.spaceType}} </span>
              <span class="count-item"><i class="el-icon el-icon-tickets"></i>图层描述：{{layerInfo.remark}}</span>
              <span style="">
                (
                <!-- <el-button type="text" size="mini" icon="el-icon-upload"  @click="onSubmit">数据导入</el-button>、 -->
                <!-- <el-button type="text" size="mini" icon="el-icon-download"  @click="onSubmit">数据导出</el-button>、 -->
                <el-button type="text" size="mini" icon="el-icon-s-grid"  @click="downloadTemplate">模板下载</el-button>
                )  
              </span>
            </p>
          </div>
          <div class="layer-operate">
            
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="5">
      <el-col :span="8">
        <div class="left-container">
            <!-- 关闭按钮 -->
            <div class="list-close-button">
              <i class="el-icon el-icon-arrow-left"></i>
            </div>
            <!-- 搜索 -->
            <div class="search-container">
              <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
                  <el-form-item>
                    <el-select v-model="listQuery.keyWord" placeholder="查询字段" style="width:100px;" :clearable="true">
                      <el-option
                        v-for="item in columnData"
                        v-show="item.value !='id'&&item.value !='geom'&&item.value !='creater_id'"
                        :key="item.value"
                        :label="layerInfo.nameRef[item.label]"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="">
                  <el-input v-model="listQuery.value" placeholder="关键字搜索" style="width:220px;"></el-input>
                  </el-form-item>
                  <el-form-item>
                  <el-button type="primary" icon="el-icon-search"  @click="getList">查询</el-button>
                  <el-button type="default" icon="el-icon-refresh-left" @click="listQuery.keyWord = null;listQuery.value = null;getList();">重置</el-button>
                  <el-button type="primary" icon="el-icon-plus"  @click="addData()">添加</el-button>
                  </el-form-item>
              </el-form>
            </div>
            <!-- 列表 -->
            <div class="list-container">
              <el-table
                  :data="tableData"
                  height=" calc( 100% - 0px)"
                  style="width: 100%;"
                  size="mini"
                  @selection-change="handleSelectionChange"
                  >

                  <el-table-column
                    v-if="item.value !='id'&&item.value !='geom'&&item.value !='creater_id' && item.value !='create_time'"
                    v-for="(item,index) in columnData"
                    :key="index"
                    show-overflow-tooltip
                    :prop="item.value"
                    :label="layerInfo.nameRef[item.label] ? layerInfo.nameRef[item.label] : item.label"
                    
                  ></el-table-column>
                
                  <el-table-column
                  fixed="right"
                  label="操作"
                  width="120">
                  <template slot-scope="scope">
                      <el-button
                      type="primary"
                      style="margin-top:6px;"
                      @click="getDetail(scope.row.id)"
                      icon="el-icon el-icon-tickets"
                      size="mini">
                      查看
                      </el-button>
                  </template>
                  </el-table-column>
              </el-table>
            </div>
            <!-- 分页 -->
            <div class="page-container">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="listQuery.pageNum"
                :page-sizes="[20,50,100, 200, 300, 400]"
                :page-size="listQuery.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
            </div>
        </div>
      </el-col>
      <el-col :span="16">
        <!-- 底图弹窗 -->
        <div class="map-about-container">

          <!-- <div class="loader-container" v-if="loader">

          </div> -->
          <!-- <div style="width:200px;height:60px;line-height:60px;text-indent:10px;">
            <i class="el-icon el-icon-menu"></i>&nbsp;地图位置
          </div> -->
          <div class="map-search-container">
            <el-input 
              prefix-icon="el-icon-search" 
              v-model="areaSearch" 
              style="width:250px;margin-right:12px;" 
              size="small" 
              clearable 
              placeholder="请输入搜索的地名" 
              @keyup.enter.native="searchArea()" 
            ></el-input>
            
            <el-button type="primary" icon="el-icon-search" size="small"  @click="searchArea()">查询</el-button>
            <div class="search-result" v-if="searchResult.length>0 && areaSearch">
              <div class="search-result-item" v-for="(item,index) in searchResult" :key="index" @click="toSearchWhere(item)">
                <span>{{item.name}}</span>
                <span style="font-size:12px;color:#ccc;margin-left:8px;">{{item.address}}</span>
                <!-- <span style="float:right;margin-top:6px;"><i class="el-icon el-icon-map-location"></i></span> -->
              </div>
             
            </div>
          </div>
          <!-- 图层按钮组 -->
          <div class="layer-container"> 
            <div class="layer-button" @click="toggleLayer('tiandituzhuji')" :style="{'background':layerShow['tiandituzhuji'] == 'visible'?'#108eff':'none','color':layerShow['tiandituzhuji'] == 'visible'?'#fff':'#108eff'}"> <i class="el-icon el-icon-circle-check"></i> 电子底图</div>
            <div class="layer-button"  @click="toggleLayer('gaoqingyingxiang')" :style="{'background':layerShow['gaoqingyingxiang'] == 'visible'?'#108eff':'none','color':layerShow['gaoqingyingxiang'] == 'visible'?'#fff':'#108eff'}"> <i class="el-icon el-icon-circle-check"></i> 高清影像</div>
            <div class="layer-button"  @click="toggleLayer('xianjie')" :style="{'background':layerShow['xianjie'] == 'visible'?'#108eff':'none','color':layerShow['xianjie'] == 'visible'?'#fff':'#108eff'}"> <i class="el-icon el-icon-circle-check"></i> 费县县界</div>
          </div>
          <div></div>
          <div class="map-container-outer" :style="{'height':isEdit || isLook ? ' calc( 100% - 357px)' : ' calc( 100% - 77px)'}">
            <div id="mapContainer" class="map-container" >

            </div>
          </div>

          <div class="form-container fadelogIn" v-if="isLook">
            <div style="border-bottom:1px solid #108eff;color:#ccc;padding-bottom:0px;margin-bottom:0px;height:40px;margin-bottom:15px;text-align:left;">
              <el-button icon="el-icon el-icon-edit" type="primary" size="mini" @click="editData()">编辑</el-button>
              <el-button icon="el-icon el-icon-delete" type="danger" size="mini" @click="deleteData()">删除</el-button>
              <div class="close-button" @click="isLook = flase">
                <i class="el-icon el-icon-arrow-down"></i>
              </div>
            </div>

            <div class="description-container">
              <el-descriptions title="" :column="3" border size="small">
                <el-descriptions-item v-for="(item,index) in columnData" :key="index" v-if="item.label !='id' && item.label !='geom' && item.label !='creater_id'" >
                  <template slot="label">
                    <i class="el-icon-collection-tag"></i>
                    {{layerInfo.nameRef[item.label]}}
                  </template>
                  <div style="max-height:22px;width:260px;overflow-x:hidden;overflow-y:auto;">
                    {{currentData[item.value]}}
                  </div>
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </div>

          <div class="form-container fadelogIn" v-if="isEdit">
              <div class="close-button" @click="cancleDraw()">
                <i class="el-icon el-icon-arrow-down"></i>
              </div>
            <div class="description-container">
                <el-form ref="form" :model="formData" :inline="true" label-position="top" label-width="100" size="small" :key="randomForm" >
                    <el-form-item v-for="(item,index) in columnData" :key="index" :label="layerInfo.nameRef[item.label]" :style="{'display': item.label !='id' && item.label !='geom' && item.label !='creater_id' ? '':'none'}">
                        <el-input v-model="formData[item.label]"  :style="{'min-width':'280px'}" ></el-input>
                    </el-form-item>

                    <br/>
                    <el-form-item size="mini" style="position:absolute;bottom:0px;width: calc( 100% - 40px);text-align:right;border-top:1px solid #108eff;padding:15px 0px;">
                        <div style="">
                            <el-button icon="el-icon el-icon-circle-close" @click="cancleDraw()">取消</el-button>
                            <el-button type="primary" :icon="'el-icon '+ loader " @click="saveData()">保存</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
            
          </div>
          <!-- 编辑弹窗 -->
          <div class="editor-container popIn" v-if="false">
            <editor @cancle="isEdit = false" :editType="editType" :columnData="columnData" :currentData="currentData" :currentViewer="currentViewer" :layerInfo="layerInfo"></editor>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios';
import {postMethodCommon} from "../../api/Api"
import Editor from './widget/Editor.vue';
import {getCenter} from './lib/getCenter'
import  {globalApi} from '../../api/urlPatterns.js'
// 图形绘制工具类
import MapboxDraw from "@mapbox/mapbox-gl-draw"


// WKT和GeoJson数据转换工具类
import WKT from 'terraformer-wkt-parser'

// 空间计算
import * as turf from '@turf/turf'

export default {
  components: { Editor },
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return {
      loader:"el-icon-folder-checked",
      isEdit:false,
      randomForm:1000,
      currentViewer:{
          "center": {
              "lng": 117.96371124001308,
              "lat": 35.28463658294851
          },
          "zoom": 9.79633224959297,
          "bounds": {
              "_sw": {
                  "lng": 117.48596448672572,
                  "lat": 35.01534466828255
              },
              "_ne": {
                  "lng": 118.44145798249633,
                  "lat": 35.55303582530652
              }
          },
          "pitch": 0,
          "bearing": 0
      },
      isLook:false,
      layerInfo:{},
      listQuery:{
        tableName:null,
        keyWord:null,
        value:null,
        pageNum:1,
        pageSize:20,
      },
      total:0,
      options:[],
      globalMap:null,
      sizeForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
      formInline: {
          user: '',
          region: ''
        },
      geojson:{},
      layerShow:{
        tiandituzhuji:"visible",
        gaoqingyingxiang:"visible",
        xianjie:"visible"
      },
      clickRandom:100,
      columnData:[],
      editType:null,
      tableData: [],
      currentData:{},
      formData:{},
      popup:null,
      areaSearch:null,//地名搜索关键字
      searchResult:[],
      multipleSelection:[],
      clickMapData:{},
      drawTool:null,
    }
  },
  watch:{
    isLook(newVal,oldVal){
      let _this = this;
      setTimeout(function(){
        _this.globalMap.resize();
      },100)
    },
    areaSearch(newVal,oldVal){
      if(newVal == null || newVal == ""){
      
        this.searchResult = [];
      }
    }
  },
  created(){
    // 初始化图层数据
    this.layerInfo = {...this.$route.query};
    this.layerInfo.nameRef = JSON.parse(this.layerInfo.nameRef);
    this.listQuery.tableName = this.layerInfo.tableRef;
    this.getList();
  },
  mounted(){
   
    this.initMap();

    window.getDetail = this.getDetail;
    window.getDetailByMap = this.getDetailByMap;
    window.editByMap = this.editByMap;
    window.edit = this.edit;
    window.deleteByContexmenu  = this.deleteByContexmenu;
  },

  methods:{
    downloadTemplate(){
      window.open("/template/数据导入模板.xlsx")
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    searchArea(){
      // 地名搜索
      axios.get("https://restapi.amap.com/v3/place/text?count=10&key=ee24b622294b5bc659fb92fe81084776&keywords="+this.areaSearch).then(res=>{
        if(res.data.info == "OK"){
          this.searchResult = [];
          res.data.pois.forEach((item,index)=>{
            if(index<10){
              this.searchResult.push(item);
            }
          })
        }
      })
    },
    toSearchWhere(item){
      this.loadSearchResultLayer(item);

      let lngLat = item.location.split(",");
      this.globalMap.flyTo({
        center: lngLat,
        zoom: 16,
        speed: 10, // 飞行速度
        curve: 1, // 飞行曲线
        easing(t) { // 飞行动画函数
          return t;
        }
      });

    },
    getList(){
      if(this.listQuery.keyWord == "id"){
        this.listQuery.value = parseInt(this.listQuery.value);
      }
      postMethodCommon("/geoserver/getLayerData",this.listQuery).then(res=>{
        if(res.data.code == 200){
          this.tableData = res.data.data.list;
          this.total = res.data.data.total
          if(this.tableData.length>0){
            this.columnData = [];
            let item = this.tableData[0];
            for(let column in item){
              let obj = {
                label:column,
                value:column
              }
              this.columnData.push(obj);
            }
          }
        }
      })
    },
    toggleLayer(layerName){
      let visibie = this.globalMap.getLayoutProperty(layerName, 'visibility');

      if(visibie == 'visible'){
        this.globalMap.setLayoutProperty(layerName,'visibility', 'none');
        this.layerShow[layerName] = "none"
      }else if(visibie == 'none'){
        this.globalMap.setLayoutProperty(layerName, 'visibility','visible');
        this.layerShow[layerName] = "visible"
      }
    },
    toThere(row){
      let _this = this;
      this.currentData = row;
      this.isLook = true;
      // setTimeout(function(){
      //   _this.globalMap.flyTo({
      //   center: [row.lng, row.lat],
      //   zoom: 16,
      //   speed: 10, // 飞行速度
      //   curve: 1, // 飞行曲线
      //   easing(t) { // 飞行动画函数
      //     return t;
      //   }
      // });
      // },100)
    },
    getDetailByMap(){
        postMethodCommon("/geoserver/getSingleDate",{tableName:this.layerInfo.tableRef,id:id}).then(res=>{
          if(res.data.code == 200){
            if(res.data.code == 200){
              this.formData = res.data.data;
              this.currentData = res.data.data;
              this.isLook = true;
              this.geojson = this.WktToGeoJson(res.data.data.geom);
              console.log("this.geojson",this.geojson);
              let center = this.getCenterPoint(this.geojson);
              if(center){
                this.mapFlyTo(center);
              }
            }
          }
        })
    },
    editByMap(){
      this.editType = "edit";
      if(this.drawTool){
        return null;
      }
      this.getData(parseInt(this.formData.id));
      this.randomForm = Math.random()*10000;
      this.popup  ? this.popup.remove() : null;
      this.isEdit = true;
    },
    editData(){
      this.editType = "edit";
      if(this.drawTool){
        return null;
      }
      this.getData(parseInt(this.currentData.id));
      this.randomForm = Math.random()*10000;
      this.popup  ? this.popup.remove() : null;
      this.isEdit = true;
    },
    initDraw(){

      let controlConfig = {}
      if(this.layerInfo.dataType == '面'){
          controlConfig = {
              point: false,
              line_string: false,
              polygon: true,
              trash: true
          }
      }else  if(this.layerInfo.dataType == '点'){
        controlConfig = {
              point: true,
              line_string: false,
              polygon: false,
              trash: true
          }
      }else  if(this.layerInfo.dataType == '线'){
        controlConfig = {
              point: false,
              line_string: true,
              polygon: false,
              trash: true
          }
      }

      this.drawTool = new MapboxDraw({
          displayControlsDefault: false,
          controls: controlConfig
      })

      this.globalMap.addControl(this.drawTool,'top-right');
      // this.geojson = this.clickMapData;
      
      if(this.layerInfo.dataType == '面'){
         this.geojson.type="Polygon";
         this.geojson.coordinates = this.geojson.coordinates[0];
      }else  if(this.layerInfo.dataType == '点'){
        this.geojson.type="Point";
        this.geojson.coordinates = this.geojson.coordinates;
      }else  if(this.layerInfo.dataType == '线'){
        this.geojson.type="LineString";
        this.geojson.coordinates = this.geojson.coordinates[0];
      }

      
      console.log(this.geojson);

      let geojson = {
          "type": "FeatureCollection",
          "features": [
              {
                  "type":"Feature",
                  "geometry":this.geojson
              }
          ]
      };

      this.globalMap.setLayoutProperty("pbfLayer","visibility","none");
      this.drawTool.set(geojson);
    },
    addData(){
      if(this.isEdit){
        this.$message({
          type:"warning",
          message:"请先关闭当前操作！"
        })
        return;
      }
      if(this.drawTool){
        return null;
      }
      this.formData = {};
      this.editType = "add"

      let controlConfig = {}
      if(this.layerInfo.dataType == '面'){
          controlConfig = {
              point: false,
              line_string: false,
              polygon: true,
              trash: true
          }
      }else  if(this.layerInfo.dataType == '点'){
        controlConfig = {
              point: true,
              line_string: false,
              polygon: false,
              trash: true
          }
      } if(this.layerInfo.dataType == '线'){
        controlConfig = {
              point: false,
              line_string: true,
              polygon: false,
              trash: true
          }
      }
      this.drawTool = new MapboxDraw({
          displayControlsDefault: false,
          controls: controlConfig,
          // defaultMode: 'draw_polygon'
      })
      this.globalMap.addControl(this.drawTool,'top-right');
      this.isEdit = true;
    },
    saveData(){

      this.loader = "el-icon-loading";
     
      if(!this.geojson){
        this.$message({
          type:"warning",
          message:"请绘制地图图斑"
        })
        return ;
      }
      // POLYGON   MULTIPOLYGON  LINESTRING  MULTILINESTRING  POINT  MULTIPOINT
      let geom = WKT.convert(this.geojson);
      
      this.formData.tableName = this.layerInfo.tableRef;
      this.formData.spaceType = this.layerInfo.spaceType;

      if(this.layerInfo.dataType == '面'){
        geom = geom.replace("POLYGON ","MULTIPOLYGON (");
        geom = geom+")"
      }else if(this.layerInfo.dataType == '点'){
        
      }else if(this.layerInfo.dataType == '线'){
        geom = geom.replace("LINESTRING ","MULTILINESTRING (");
        geom = geom+")"
      }
      this.formData.geom = geom;
      console.log(this.formData);

      if(this.editType == "edit"){
        console.log("111",this.currentData);
        console.log("222",this.formData)
        postMethodCommon("/geoserver/updateLayerData",this.formData).then(res=>{
          if(res.data.code == 200){
            let _this = this;
            this.currentData = this.formData
            setTimeout(function(){
              _this.cancleDraw();
              _this.loadPBFLayer();
              _this.getList();
              _this.$message({
                type:"success",
                message:"操作成功！"
              })
              _this.loader = "el-icon-folder-checked"
            },2000);

          }
        })
      }else if(this.editType == "add"){
        postMethodCommon("/geoserver/insertLayerData",this.formData).then(res=>{
          if(res.data.code == 200){
            let _this = this;

            setTimeout(function(){
              _this.cancleDraw();
              _this.loadPBFLayer();
              _this.getList();
             
              _this.$message({
                type:"success",
                message:"操作成功！"
              })
              _this.loader = "el-icon-folder-checked"
            },1500);
          }
        })
      }
      
      
    },
    getData(id){
      postMethodCommon("/geoserver/getSingleDate",{tableName:this.layerInfo.tableRef,id:id}).then(res=>{
        if(res.data.code == 200){
          if(res.data.code == 200){
            this.formData = res.data.data;
            console.log("geom",res.data.data.geom);
            this.geojson = this.WktToGeoJson(res.data.data.geom);
           console.log("this.geojson",this.geojson);
            this.initDraw();
          }
        }
      })
    },
    getDetail(id){
      postMethodCommon("/geoserver/getSingleDate",{tableName:this.layerInfo.tableRef,id:id}).then(res=>{
        console.log(res);
          if(res.data.code == 200){
            // this.formData = res.data.data;
            this.currentData = res.data.data;
            this.isLook = true;
            this.geojson = this.WktToGeoJson(res.data.data.geom);
            console.log("this.geojson",this.geojson);
            let center = this.getCenterPoint(this.geojson);
            if(center){
              this.mapFlyTo(center);
          }
        }
      })
    },
    getCenterPoint(geojson){
      let center = null;
      if(this.layerInfo.dataType == "面"){
        let polygon = turf.polygon(geojson.coordinates[0]);
        let centroid = turf.centroid(polygon);
        center = centroid.geometry.coordinates;
      }else if(this.layerInfo.dataType == "点"){
        center = geojson.coordinates;
      }else if(this.layerInfo.dataType == "线"){
        let point1 = turf.point(geojson.coordinates[0][0]);
        let point2 = turf.point(geojson.coordinates[0][geojson.coordinates[0].length-1]);
        let midpoint = turf.midpoint(point1, point2);
        center = midpoint.geometry.coordinates;
      }
      return center;
    },
    mapFlyTo(lngLat){
      this.globalMap.flyTo({
        center: lngLat,
        zoom: 17,
        speed: 10, // 飞行速度
        curve: 1, // 飞行曲线
        easing(t) { // 飞行动画函数
          return t;
        }
      });
    },
    deleteData(){
      let formData = {
        tableName:this.layerInfo.tableRef,
        id:this.currentData.id
      }
      postMethodCommon("/geoserver/deleteData",formData).then(res=>{
        if(res.data.code == 200){
          let _this = this;
          setTimeout(function(){
            _this.$message({
              type:"success",
              message:"删除成功"
            })
            _this.isLook = false;
            _this.getList();
          },1500)
        }
      })
    },
    deleteByContexmenu(){
      let formData = {
        tableName:this.layerInfo.tableRef,
        id:this.attributeInfo.id
      }
      postMethodCommon("/geoserver/deleteData",formData).then(res=>{
        if(res.data.code == 200){
          this.$message({
            type:"success",
            message:"删除成功"
          })
          this.popup ? this.popup.remove() : null;
          this.loadPBFLayer();
          this.getList();
        }
      })
    },
    handleSizeChange(e){
      this.listQuery.pageSize = e;
      this.getList();
    },
    handleCurrentChange(e){
      this.listQuery.pageNum = e;
      this.getList();
    },
    onSubmit(){

    },
    dealData(){
      this.geojson.features.forEach((item,index)=>{
        this.tableData.push(item.properties);
      })
    },
    
    // 创建地图
    initMap(){
      //mapbox 2.0以后的版本需要accessToken  到官网注册下载
      this.$mapboxgl.accessToken = "pk.eyJ1Ijoic2hpY2hhbzEyMyIsImEiOiJja3FobnI1aDEwNGF6Mm9vOXVhNnBzZmFhIn0.2fZKiMqCQHxVY74QShMEGQ";
      this.globalMap = new this.$mapboxgl.Map({
        container:"mapContainer",
        center:[118.0075,35.42222222],
        zoom:12,
        maxZoom:20,
        minZoom:5,
        pitch:0,
        // style:"mapbox://styles/mapbox/satellite-v9"
        style:"mapbox://styles/mapbox/streets-v11"
        // style:"mapbox://styles/mapbox/dark-v10"
        
      });

      // 地图加载完毕事件
      let _this = this;

      _this.globalMap.addControl(new this.$mapboxgl.NavigationControl(),'top-right');

      this.globalMap.on("load",function(){
       
        _this.globalMap.addSource('mapbox-dem', {
          'type': 'raster-dem',
          'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',
          'tileSize': 512,
          'maxzoom': 14
        });
        // add the DEM source as a terrain layer with exaggerated height
        _this.globalMap.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1.5 });

        _this.loadGaoQingLayer();

        _this.loadDianZiLayer();

        _this.loadXianJieLayer();

        _this.globalMap.loadImage('https://docs.mapbox.com/mapbox-gl-js/assets/custom_marker.png', function(error, image) {
          if (error) throw error;
          _this.globalMap.addImage('my-image', image);
        });
        
        _this.loadPBFLayer();

        // _this.loadLayer();

        _this.globalMap.on('contextmenu',"myIconLayer",function(e) {
          // 在此处添加事件处理程序
          this.attributeInfo = e.features[0].properties;
          console.log("attributeInfo",this.attributeInfo);
        });


        _this.globalMap.on('contextmenu',"pbfLayer", function(e) {
          // 阻止默认的右键菜单
          e.preventDefault();

          _this.attributeInfo = e.features[0].properties;
          _this.formData = {..._this.attributeInfo};
          console.log("formData",_this.formData);


          if(_this.popup){
            if(_this.popup){
              _this.popup.remove();
            }
          }

          _this.clickMapData = e.features[0];
          _this.popup = new _this.$mapboxgl.Popup({
            closeButton: false,
            closeOnClick: false
          });

          // 设置 popup 的位置和内容
          _this.popup.setLngLat(e.lngLat)
            .setHTML(`
            <div style="color:#333;padding:3px 12px;cursor:pointer;" type="primary" icon="el-icon-search" onclick="getDetail(${_this.attributeInfo.id})">查看信息</div>
            <div style="color:#333;padding:3px 12px;cursor:pointer;" type="primary" icon="el-icon-search" onclick="editByMap();">编辑信息</div>
            <div style="color:#333;padding:3px 12px;cursor:pointer;" type="primary" icon="el-icon-search" onclick="deleteByContexmenu();">删除数据</div>`)
            .addTo(_this.globalMap);
        });

        // 监听地图的 click 事件，用于关闭 popup
        _this.globalMap.on('click', function(e) {
          if(_this.popup){
            _this.popup.remove();
          }
        });

        // 设置绘图监听事件
        _this.globalMap.on('draw.create', function (e) {
            var feature = e.features[0];
            _this.geojson = feature.geometry;
            console.log("features",_this.geojson);
        })

        _this.globalMap.on('draw.update', function (e) {
            var feature = e.features[0];
            _this.geojson = feature.geometry;
        })
      })
    },
    // loadLayer(){
    //   let _this = this;
    //   this.globalMap.loadImage('https://docs.mapbox.com/mapbox-gl-js/assets/custom_marker.png', function(error, image) {
    //     if (error) throw error;
    //     _this.globalMap.addImage('my-image', image);
    //   });

    //   this.globalMap.addSource('myData', {
    //     type: 'geojson',
    //     data: this.geojson
    //   });
      
    //   this.globalMap.addLayer({
    //     id: 'editorLayer',
    //     type: 'symbol',
    //     source: 'myData',
    //     layout: {
    //       'icon-image': 'my-image', // 图标名称
    //       'icon-size': 0.8 // 图标大小
    //     }
    //   });
    // },
    /*
      
    */ 
    loadDianZiLayer(){
      this.globalMap.addLayer({
          'id': 'tiandituzhuji',
          'type': 'raster',
          'source':{
              "type": "raster",
              "tiles": ['http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=b6585bc41ee16251dbe6b1af64f375d9'],
              "tileSize": 256,
          },
          'layout':{
            'visibility':'visible'
          },
        })
    },
    loadGaoQingLayer(){
      this.globalMap.addLayer({
        'id': 'gaoqingyingxiang',
        'type': 'raster',
        'source': {
          'type': 'raster',
          'tiles': ["http://60.213.14.14:8060/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian:yingxiang&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE"],
          'tileSize': 256
        },
        'layout':{
          'visibility':'visible'
        },
        'paint': {

        }
        });
    },
    loadXianJieLayer(){
      this.globalMap.addLayer({
          id: 'xianjie',
          type: 'line',
          layout:{
            "visibility":"visible"
          },
          source: {
              type: 'geojson',
              data: 'http://175.27.168.120:8080/geoserver/feixian/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=feixian%3Axianjie&maxFeatures=50&outputFormat=application%2Fjson'
          },
          paint: {
              'line-width': 2,
              'line-color': 'orange'
          }
      });
    },
    loadSearchResultLayer(item){
      let geojson ={
          "type": "FeatureCollection",
          "features": [
              {
                  type: 'Feature',
                  geometry: {
                    "type": "Point",
                    "coordinates": item.location.split(",")
                  },
                  properties: {
                      name:item.name
                  }
              }
          ]
      };

      if(this.globalMap.getSource("searchSource")){
        this.globalMap.getSource("searchSource").setData(geojson);
      }else{
        this.globalMap.addSource("searchSource",{
          type:"geojson",
          data:geojson
        })
      }

      let _this = this;

      if(this.globalMap.hasImage("searchIcon")){
        
      }else{
        this.globalMap.loadImage(
          'https://docs.mapbox.com/mapbox-gl-js/assets/custom_marker.png',
          function(error, image) {
            if (error) throw error;
            _this.globalMap.addImage('searchIcon', image);
          }
        );
      }

      if(this.globalMap.getLayer("searchLayer")){

      }else{
        this.globalMap.addLayer({
          id: 'searchLayer',
          type: 'symbol',
          source: "searchSource",
          layout: {
            'icon-image': 'searchIcon',
            'icon-size':0.8,
            'text-field': '{name}',
            'text-offset': [0, 2],
            'text-anchor': 'top',
            'text-size':12
          },
          paint:{
            "text-color":"#fff"
          }
        })
      }
     
    },
    loadPBFLayer(){

        if(this.globalMap.getLayer("pbfLayer")){
          this.globalMap.removeLayer("pbfLayer");
        }

        if(this.globalMap.getSource("pdfSource")){
          this.globalMap.removeSource("pdfSource");
        }

        let _this = this;
       this.globalMap.addSource("pdfSource",{
          "type": "vector",
          "scheme":"tms",//new
          "tiles": [globalApi.GEOSERVER_URL+"/geoserver/gwc/service/tms/1.0.0/ksp%3A"+_this.layerInfo.tableRef+"@EPSG:900913@pbf/{z}/{x}/{y}.pbf"]
        })

       if(this.layerInfo.dataType == '面'){
          this.globalMap.addLayer({
            "id": "pbfLayer",
            "type": "fill",
            "source": "pdfSource",
            "source-layer": _this.layerInfo.tableRef,
            'layout':{
            
            },
            'paint': {
              'fill-color': '#108eff', 
              'fill-opacity': 0.5
            }
          })
       }else if(this.layerInfo.dataType == '线'){
          this.globalMap.addLayer({
            "id": "pbfLayer",
            "type": "line",
            "source": "pdfSource",
            "source-layer": _this.layerInfo.tableRef,
            'layout':{
            
            },
            paint: {
              'line-color': '#0000ff',
              'line-width': 2
            }
          })
       }else if(this.layerInfo.dataType == '点'){
               this.globalMap.addLayer({
                  id: 'pbfLayer',
                  type: 'symbol',
                  source: 'pdfSource',
                  "source-layer": _this.layerInfo.tableRef,
                  layout: {
                    'icon-image': 'my-image', // 图标名称
                    'icon-size': 0.8 // 图标大小
                  }
                });
       }
    },
    cancleDraw(){
      this.isEdit = false;
      this.formData = {};
      this.geojson = {};
      this.globalMap.setLayoutProperty("pbfLayer","visibility","visible")
      this.drawTool.deleteAll();
      this.globalMap.removeControl(this.drawTool);
      this.drawTool = null;
    },
    WktToGeoJson(wktString){
      let geojson = WKT.parse(wktString);
      return geojson;
    },
    GeoJsonToWkt(){

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello{
  width:100%;
  height: 100%;
  padding:20px;

}
.layer-info{
  width:100%;
  height:60px;
}
.layer-info .back-button{
  float:left;
  height:40px;
  line-height:60px;
  font-size:22px;
  font-weight: bold;
  margin-right:8px;
  margin-top:14px;
  cursor:pointer;
}
.layer-info .back-button:hover{
  color:#108eff;
}
.layer-info  .layer-icon{
  width:50px;
  height:50px;
  float:left;
  background:rgba(255,255,255,0.4);
  border-radius:4px;
  text-align:center;
}

.layer-info .layer-icon img{
  width:32px;
  margin-top:9px;
}
.layer-info  .layer-name{
  float:left;
  margin-left:15px;
  font-size:16px;
}
.layer-info .layer-name .count-item{
  margin-right:22px;
}
.layer-operate{
  float:right;
  height:20px;
  padding:20px 0px;
}
.left-container{
    width:100%;
    height: calc(100% - 60px);
    background:#2b466580;
    position: relative;
}

.list-close-button{
  width:20px;
  height:70px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  background:#284171;
  display:none;
  text-align:center;
  position:absolute;
  border-right:1px solid #5487e6;
  border-top:1px solid #7393ce;
  border-bottom:1px solid #7393ce;
  top:50%;
  right:-20px;
  z-index:999;
  vertical-align:-webkit-baseline-middle;
   line-height:80px;
}
.search-container{
  width: 100%;
  padding:15px;
  border-bottom:1px solid #108eff;
}

.list-container{
  width:100%;
  height: calc( 100% - 124px);
  padding:15px;
  border-bottom:1px solid #108eff;
}
::v-deep .el-table{
  background:none;
}

::v-deep .el-form-item__label{
  padding:0px;
}

::v-deep .el-form-item{
  margin-bottom:5px;
}
.page-container{
  width: 100%;
  height:40px;
  padding:15px;
}
.map-about-container{
  width:100%;
  height: calc( 100% - 60px);
  position:relative;
  background:#2b466580;
}

.loader-container{
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.6);
  position:absolute;
  top:0px;
  left:0px;
  z-index:999;
}
.editor-container{
  width:100%;
  height:100%;
  position:relative;
  background:#284171;
  position:absolute;
  top:0px;
  left:0px;
  z-index:9999;
}


.map-search-container{
  width:400px;
  height:40px;
  position:absolute;
  top:15px;
  /* right:330px; */
  left:20px;
  z-index:9999;
  /* border:1px solid #535cf6; */
  /* background:hsl(237, 90%, 65%,0.4); */
  /* box-shadow: 0px 5px 5px hsl(237, 90%, 65%,0.4); */
}
.search-result{
  width:372px;
  padding:0px 10px 20px 10px;
  min-height:120px;
  position:absolute;
  top:50px;
  left:0px;
  background:rgb(40, 65, 113,0.7);
  color:#fff;
  box-shadow: 0px 0px 5px #7688a8;
}

.search-result .search-result-item{
  width:100%;
  padding:10px;
  border-bottom:1px dashed rgba(16, 132, 241, 0.7);
  cursor:pointer;
}
.search-result .search-result-item:hover{
  color:#e9e9e9;
}
.layer-container{
  width:340px;
  height:40px;
  position:absolute;
  top:15px;
  right:0px;
  z-index:9999;
}

.layer-button{
  width:100px;
  height:30px;
  line-height:30px;
  background:#108eff;
  color:#fff;
  float:left;
  margin-right:12px;
  text-align:center;
  border:1px solid #108eff;
}
.map-container-outer{
   width: calc( 100% - 30px);
    padding:0px 0px;
    height: calc( 100% - 77px);
    background:#ffffff;
    position:absolute;
    top:60px;
    left:15px;
}
.map-container{
  width:100%;
  height:100%;
}

.form-container{
  width: calc( 100% - 30px);
  height:300px;
  position:absolute;
  bottom:15px;
  left:15px;
  padding:14px 10px;
  background:#203b60;
}
.description-container{
  width:100%;
  height:220px;
  overflow: hidden;
  overflow-y:auto;
  
}
.close-button{
  width:80px;
  height:30px;
  margin:0px auto;
  position:absolute;
  top:-16px;
  left:15;
  /* transform: translate(-50%,0); */
  background: #203b60;
  text-align: center;
  color:#fff;
  font-size:18px;
  line-height:30px;
  cursor:pointer;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.close-button:hover{
  color:#108eff;
}
::v-deep .el-table__fixed-right::before, .el-table__fixed::before{
  height:0px;
}
::v-deep .el-table::before{
  height:0px;
}
::v-deep .el-form--inline{
  height:30px;
}
::v-deep .mapboxgl-ctrl{
  display:block;
}
::v-deep .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
  border-bottom:1px solid hsl(240, 100%, 37%,0.2);
}


 ::v-deep .el-input__inner {
  background-color: transparent;
  border: 0.0625rem solid #00b2ff;
  color: #fff;
  border-radius:0px;
}

::v-deep .el-button{
  border-radius:0px;
}
 ::v-deep .el-form-item__label {
  color: #00b2ff;
  /* line-height: 2.1875rem; */
}
 ::v-deep .el-button--small {
  padding: 0.625rem 2.1875rem;
}
 ::v-deep .el-form--inline .el-form-item {
  /* margin-left: 1.875rem; */
}
 ::v-deep .el-table,
.el-table__expanded-cell {
  background: transparent !important;
}
/* “表格内背景颜色“ */
 ::v-deep.el-table th,
 ::v-deep.el-table tr,
 ::v-deep.el-table td {
  background-color: transparent !important;
}
/*  按钮样式修改 */
 ::v-deep .el-button--success {
  background: #266a94;
  color: #00f261;
  border: 0;
}
 ::v-deep .el-button--info {
  background: #482c27;
  color: #8ac2da;
  border: 0;
}
 ::v-deep.el-button--primary {
  background: #266a94;
  color: #8ac2da;
  border: 0;
}
 ::v-deep.el-button--primary {
  background: #578ef0;
  color: #fff;
  border: 0;
}
/*修改element-ui的table 在鼠标悬停hover时的高亮颜色*/
 ::v-deep.el-table tbody tr:hover > td {
  background-color: black !important;
}
/* 第一个 dialog修改  */
 ::v-deep.dialog_one .el-dialog {
  background: #266a94 !important;
  border: 1px solid #10a2e1;
}
 ::v-deep.dialog_one .el-dialog__title {
  color: #00b2ff;
  font-size: 2rem;
}
 ::v-deep.dialog_one .el-dialog__header {
  text-align: center;
}
/* 第二个 dialog 修改 */
 ::v-deep.dialog_two .el-dialog {
  background: rgba(37, 61, 75, 0.7) !important;
  border: 1px solid #797979;
}
 ::v-deep.dialog_two .el-dialog__body {
  padding: 10px 0;
}
 ::v-deep.dialog_two .el-dialog__header {
  padding: 0;
}


::v-deep .el-table__cell{
  background:none;
  padding:0px;
  font-size:14px;
  color:#ccc;
}

::v-deep .cell{
  padding:0px;
  height:40px;
  line-height:40px;
  /* background:hsl(212, 43%, 49%,0.5); */
  text-align:center;
  font-size:12px;
}

::v-deep .number{
  background:none;
  color:#fff;
}

::v-deep .btn-next{
  background:none;
  color:#fff;
}

::v-deep .btn-prev{
  background:none;
  color:#fff;
}

::v-deep .el-pagination__total{
  color:#fff;
}

::v-deep .el-pagination__jump{
  color:#fff;
}

::v-deep .el-pagination button:disabled{
  background:none;
}
::v-deep .disabled{
  background:none;
}

::v-deep .el-descriptions__body{
  background:none;
  color:#ccc;
}

::v-deep .el-descriptions-row{
  background:none;
  color:#eee;
}


::v-deep .el-descriptions-item__label{
  background:hsl(212, 43%, 49%,0.5);
  color:#eee;
  font-weight: bold;
}

::v-deep .el-descriptions .is-bordered .el-descriptions-item__cell{
  border-color:hsl(212, 43%, 49%,1);
}

::v-deep .mapboxgl-ctrl-logo{
  display:none;
}

/* 弹窗动画 */

.popIn {
    -webkit-animation: fadeleftIn .4s;
    animation: fadeleftIn .4s;
    -webkit-animation-name: popIn;
    animation-name: popIn;
}
@-webkit-keyframes popIn {
    0% {
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0.5, 0.5, 0.5);
        opacity: 0;
    }
    50% {
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        opacity: 1;
    }
}
@keyframes popIn {
    0% {
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0.5, 0.5, 0.5);
        opacity: 0;
    }
    50% {
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        opacity: 1;
    }
}

/*  */
.fadelogIn {
    -webkit-animation: fadelogIn .4s;
    animation: fadelogIn .4s;
}
@keyframes fadelogIn {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}
@-webkit-keyframes fadelogIn {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
    }
    100% {
        -webkit-transform: none;
    }
}

::v-deep .el-checkbox{
  margin-top:14px;
}

::v-deep  .el-table--scrollable-y .el-table__body-wrapper{
  overflow-x:auto;
  overflow-y:auto;
}

::v-deep .el-table--scrollable-x .el-table__body-wrapper{
  
}

::v-deep .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar {
  display: block !important;
  z-index:99999999999999;
}
/* 滑道样式 */
::v-deep .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar{
  width:0px;
  height:10px;
  background:#304156;
  border-radius: 6px;
  z-index:99999999999999;
}
/* 定义滑块的样式 */
::v-deep .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb{
  border-radius: 0px;
  -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
  background-color:rgba(0,0,0,0.3);
  z-index:99999999999999;
}
/* 定义滑块鼠标移入时的样式 */
::v-deep .el-table--scrollable-x .el-table__body-wrapper .el-table__body-wrapper .is-scrolling-left::-webkit-scrollbar-thumb:hover{
  border-radius: 10px;
  -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
  background-color:rgba(0,0,0,0.4);
  z-index:99999999999999;
}

::v-deep .el-pagination__jump{
  margin-left:0px;
}


::v-deep  .el-pagination .el-select {
  width:80px;
}

::v-deep .el-pager li{
  width:10px!important;
}

::v-deep .el-pager .number{
  padding:0px;
  width:10px!important;
}

::v-deep .el-pagination .el-input__inner{
  width:80px;
}

::v-deep .mapboxgl-ctrl{
  /* display:none; */
}
::v-deep .mapboxgl-ctrl-attrib-inner{
  display:none;
}

::v-deep .el-form-item__content .is-disabled .el-input__inner{
  background-color:none!important;
}

::v-deep .mapboxgl-map canvas {
  position: absolute;
  top: 0;
  left: 0;
}

::v-deep .el-pager li{
  min-width:25px !important;
}
</style>
