<template>
  <div id="centerDiv" class="mapcontainer">
    <!-- 头部 -->
    <!-- <div class="header">
			<a href="/#/attract">
				<div class="logo">
					<div class="logo-image">
						<img src="industry/img/logo.png" alt="">
					</div>	
					<div class="app-name">
						临沂国家高新区
					</div>						
				</div>
			</a>	
			<div class="header-right">
				<a href="/#/attract">
					<div class="user-center">
						<div class="user-image">
							<img src="industry/img/user.png" alt="">
						</div>
						<div class="user-name">
							<p>Admin</p>
							<p>欢迎你使用！</p>
						</div>
					</div>
				</a>
				<div class="date-weather" @click="loadVillage">
					<div class="time">
						<span>{{dateHour}} : {{dateMinute}}</span>
					
					</div>
					<div class="date">
						<span style="margin-right:12px;">星期{{dateWeek}}</span>
						<span>{{dateYear}}-{{dateMonth}}-{{dateDate}}</span>
					</div>
				</div>
			</div> 
		</div> -->
    <!-- 搜索框 -->
    <div class="search-box">
        <input type="text" placeholder="搜索内容..." v-model="searchKeyWord" @keyup="showSearchResult"  @keyup.enter="searchResultClick(searchKeyWord)">

        <img src="industry/img/search.png" alt="" @click="search"/>
        <div class="searchResultList" v-show="searchKeyWord != null">
            
            <ul>
              <li v-for="(item,index) in searchResult" :key="index" @click="searchResultClick(item.XZQMC)">
                {{item.XZQMC}}
              </li>
            </ul>
        </div>
    </div>
    <!-- 工具栏 -->
    <div class="toolbox">
        <div class="tool-btn" @click="drawPoint(false)">
          <img src="industry/img/点.png" alt="">
        </div>
         <div class="tool-btn" @click="drawPolyline(false)">
          <img src="industry/img/线.png" alt="">
        </div>
         <div class="tool-btn" @click="drawPolygon(false)">
          <img src="industry/img/面.png" alt="">
        </div>
         <div class="tool-btn" @click="measureLength()">
          <img src="industry/img/距离.png" alt="">
        </div>
         <div class="tool-btn" @click="measureArea()">
          <img src="industry/img/面积.png" alt="">
        </div>
         <div class="tool-btn" @click="clearDraw()">
          <img src="industry/img/清空.png" alt="">
        </div>
         <div class="tool-btn">
          <img src="industry/img/保存.png" alt="">
        </div>
         <div class="tool-btn">
          <img src="industry/img/打印.png" alt="">
        </div>
    </div>
   <!-- 左侧菜单栏 -->
      <!-- <div class="left-menu" id="left-menu"> -->
        <!-- 图层资源按钮 -->
        <!-- <div class="menu-box" id="layer-source" @click="layerContainerChange">
          <span>图层资源</span>
          <img src="industry/img/menu-btn.png" alt="">
        </div> -->
        <!-- 图层栏 -->
        <!-- <div class="layer-container" id="layer-container">
          <div class="layer-box">
            <div class="layer-cate">
              <img src="industry/img/layer-cate.png" alt="">
              <span>行政界线</span>
            </div>
            <div class="layer-list">
              <ul>
                <li class="layerCheckbox" @click="showLayer($event,802008)">
                  <span>区边界</span>
                  <img src="industry/img/checkbox.png" alt="">
                </li>
                <li class="layerCheckbox" @click="showLayer($event,802007)">
                  <span>镇边界</span>
                  <img src="industry/img/checkbox.png" alt="">
                </li>
                <li class="layerCheckbox" @click="showLayer($event,8020041)">
                  <span>村边界</span>
                  <img src="industry/img/checkbox.png" alt="">
                </li>
                <li class="layerCheckbox" @click="showLayer($event,8020042)">
                  <span>村名称</span>
                  <img src="industry/img/checkbox.png" alt="">
                </li>
              </ul>
            </div>
          </div>
          <div class="layer-box">
            <div class="layer-cate">
              <img src="industry/img/layer-cate.png" alt="">
              <span>图层资源</span>
            </div>
            <div class="layer-list">
              <ul>
                <li class="layerCheckbox"  @click="showLayer($event,8020010)">
                  <span>土地利用现状</span>
                  <img src="industry/img/checkbox.png" alt="">
                </li>
                <li class="layerCheckbox" @click="showLayer($event,802003)">
                  <span>土地利用总体规划</span>
                  <img src="industry/img/checkbox.png" alt="">
                </li>
                <li class="layerCheckbox">
                  <span>城镇使用土地规划</span>
                  <img src="industry/img/checkbox.png" alt="">
                </li>
                <li class="layerCheckbox" @click="showLayer($event,8020011);roadClick()">
                  <span>路网规划</span>
                  <img src="industry/img/checkbox.png" alt="">
                </li>
              </ul>
            </div>
          </div>
          <div class="layer-box">
            <div class="layer-cate">
              <img src="industry/img/layer-cate.png" alt="">
              <span>数据资源</span>
            </div>
            <div class="layer-list">
              <ul>
                <li class="layerCheckbox" @click="showLayer($event,802001)">
                  <span>科技园区</span>
                  <img src="industry/img/checkbox.png" alt="">
                </li>
                <li class="layerCheckbox" @click="showLayer($event,8020099)" >
                  <span>视频监控</span>
                  <img src="industry/img/checkbox.png" alt="">
                </li>
                <li class="layerCheckbox">
                  <span>招商用地</span>
                  <img src="industry/img/checkbox.png" alt="">
                </li>
                 <li class="layerCheckbox" @click="showLayer($event,2040111)">
                  <span>批而未供地</span>
                  <img src="industry/img/checkbox.png" alt="">
                </li>
                 <li class="layerCheckbox" >
                  <span>用而未尽地</span>
                  <img src="industry/img/checkbox.png" alt="">
                </li>
                <li class="layerCheckbox" >
                  <span>供而未用地</span>
                  <img src="industry/img/checkbox.png" alt="">
                </li>
                <li class="layerCheckbox" >
                  <span>建而未投地</span>
                  <img src="industry/img/checkbox.png" alt="">
                </li>
                <li class="layerCheckbox">
                  <span>规上企业</span>
                  <img src="industry/img/checkbox.png" alt="">
                </li>
                <li class="layerCheckbox" >
                  <span>僵尸企业</span>
                  <img src="industry/img/checkbox.png" alt="">
                </li>
              </ul>
            </div>
          </div>
        </div> -->
         <!-- 快速定位按钮 -->
        <!-- <div class="menu-box" @click="addressContainerChange">
          <span>快速定位</span>
          <img src="industry/img/menu-btn.png" alt="">
        </div> -->
        <!-- 定位地址名称按钮 -->
        <!-- <div class="address-container" id="address-container">
            <div class="address-cate">
                <img src="industry/img/layer-cate.png" alt="">
                <span>行政区划</span>
            </div>
            <div class="towns" @click="LuoXiChange">
             
              <span>罗西街道</span> 
            </div>
            <div class="village-list" v-show="LuoXiShow">
                <ul>
                  <li v-for="(item,index) in LuoXiVillage" :key="index" @click="villageQueryData(item.properties.XZQMC)" >
                    <span>{{item.properties.XZQMC}}</span>
                  </li>
                </ul>
            </div>
            <div class="towns" @click="MaChangHuChange">
             
              <span>马厂湖街道</span> 
            </div>
            <div class="village-list" v-show="MaChangHuShow">
              <ul>
                <li v-for="(item,index) in MaChangHuVillage" :key="index" @click="villageQueryData(item.properties.XZQMC)" >
                  <span>{{item.properties.XZQMC}}</span>
                </li>
              </ul>
            </div>
             <div class="address-cate">
                <img src="industry/img/layer-cate.png" alt="">
                <span>科技园区</span>
            </div>
            <div class="area-list">
              <ul>
                 <li class="info-box" v-for="(item,index) in companyData" :key="index" @click="queryData(item.properties.RefName)">
                    <span>{{item.properties.RefName}}</span>
                </li>

              </ul>
            </div>
        </div> -->

      <!-- </div> -->
    
      <!-- 右侧菜单 -->
      <div class="right-menu" v-show="rightShow">
        <div class="menu-box" onclick="alert(this)">
          <span>资源列表</span>
          <img src="industry/img/menu-btn.png" alt="">
        </div>
        <div class="source-tab">
          <div class="tab-options">
              <div class="tab-btn" v-for="(item,index) in tabs" :key="index"  v-bind:class="{active : tabName === item}"  @click="rightInfo(item)" >{{item}}</div>
              <!--
              <div class="tab-btn">科技园区</div>
              <div class="tab-btn">招商用地</div>
              <div class="tab-btn">僵尸企业</div>
              -->
          </div>
          <div class="tab-container" id="tab-container">
              <div class="info-box" v-for="(item,index) in rightInfoDatas" :key="index" @click="queryData(item.properties.RefName)">
                  <p>{{item.properties.RefName}}</p>
              </div>
          </div>
        </div>
      </div>
      <!-- 加载动画 -->
      <div class="loader" v-show="layerLoad">
          <Loading></Loading>
          <span class="title">正在加载中...</span>
      </div>
      <!-- 视频监控容器 -->
      <div class="camera" v-show="cameraShow">
        <div class="camera-top">
            <div class="close-btn" @click="cameraChange">

            </div>
        </div>
        <video src="" autoplay>

        </video>
      </div>
    <!-- 地图容器 -->
    <Map :url="configUrl"  :widgetUrl="widgetUrl"  @onload="onMapload" />
    <!-- 控件控制 -->
    <!-- :widgetUrl="widgetUrl" -->
  </div>
</template>

<script>
import Map from '@/components/mars3d/Map.vue'
import Loading from '@/components/Industry/Loading.vue'
//import companydata from '/geojson/industry/yqxz.json'
//import villageData from '/geojson/industry/村边界.json'
//import * as attract from '@/api/attract'
export default {
  name: 'Index',
  components: {
    Map,
    Loading
  },

  data() {
    return {
      cameraShow:false,
      //时间
      dateYear:null,
      dateMonth:null,
      dateDate:null,
      dateWeek:null,
      dateHour:null,
      dateMinute:null,
      weekDay:['日','一','二','三','四','五','六'],

      //控制村庄菜单显示隐藏
      LuoXiShow:false,
      MaChangHuShow:false,

      //搜索插叙功能
      searchKeyWord:null,

      //图层加载
      layerLoad:false,
      //当前地图对象
      currentMap:null,
      layers:[],

      //右侧信息栏是否显示
      rightShow:false,
      //右侧菜单栏tab选项卡按钮添加数组
      tabs:[],
      //右侧信息栏信息窗体
      rightInfoDatas:null,
      //当前选中tab的名称
      tabName:null,

      //定义图层
      QiYe:null,
      LanShan:null,

      configUrl: 'industry/geojson/config.json',
      widgetUrl:"industry/geojson/widget.json",

      //地图搜索定位服务
      queryMapserver:null,
      geoJsonLayer:null,
      
      //村庄定位搜索服务
      LuoXiVillage:[],
      MaChangHuVillage:[],
      companyData:[],
      villagedata:null,
      villageQueryMapserver:null,
      villageGeoJsonLayer:null,

      //地图编辑图层
      drawLayer:null,

      //地图测量对象
      measure:null,

      //模糊搜索的结果数组
      searchResult:[],

    }
  },
 mounted(){
      this.addClick();
      //浏览器初始化是设置尺寸
      this.resetSize();
      //浏览器窗体大小变化时重新设置尺寸
      window.onresize = () => {
        this.resetSize();
      }

     setInterval(()=>{
       this.showTime();
      },1000);

      //加载村庄名称
      this.loadVillage()
  },
  methods: {
    cameraChange:function(){
        this.cameraShow = !this.cameraShow;
    },
    //时间函数
    showTime:function(){
      var time = new Date();
      this.dateYear = time.getFullYear();
      this.dateMonth = time.getMonth()<10 ? '0'+(time.getMonth()+1) : time.getMonth()+1;
      this.dateDate = time.getDate()<10 ? '0'+time.getDate() : time.getDate();
      this.dateWeek = this.weekDay[time.getDay()];
      this.dateHour = time.getHours()<10 ? '0'+time.getHours() : time.getHours();
      this.dateMinute = time.getMinutes()<10 ? '0'+time.getMinutes() : time.getMinutes();
    },
    //调整左侧菜单栏尺寸
    resetSize:function(){
     document.getElementById('address-container').style.maxHeight=document.documentElement.clientHeight-184+"px";
     document.getElementById('layer-container').style.maxHeight=document.documentElement.clientHeight-184+"px";
     document.getElementById('tab-container').style.maxHeight=document.documentElement.clientHeight-152+"px";
    },
    //罗西街道村庄显示隐藏
    LuoXiChange:function(){
      this.LuoXiShow = !this.LuoXiShow;
    },
     //马厂湖街道村庄显示隐藏
    MaChangHuChange:function(){
      this.MaChangHuShow = !this.MaChangHuShow;
    },
     addressContainerChange:function(){
        document.getElementById('address-container').style.display='block';
        document.getElementById('layer-container').style.display='none';
    },
    layerContainerChange:function(){
      document.getElementById('layer-container').style.display='block';
      document.getElementById('address-container').style.display='none';
    },
    addClick:function(){
     // var layerCheckboxs = document.getElemensByClassName('layerCheckbox');
      for(var i=0;i<document.getElementsByClassName('layerCheckbox').length;i++){
        //初始化图层数组
        this.layers[i]=null;
        document.getElementsByClassName('layerCheckbox')[i].setAttribute('layerShow',false);
         document.getElementsByClassName('layerCheckbox')[i].setAttribute('layer-index',i);
      }
    },
    changeImg:function(a){
       // alert(111);
    },
    // 地图构造完成回调
    onMapload(map) {
      // 以下为演示代码
      
      this.currentMap = map;
      //为监控图层添加点击事件
     
      // 创建entity图层
      const graphicLayer = new this.mars3d.layer.GraphicLayer()
      map.addLayer(graphicLayer)
      
      // 2.在layer上绑定监听事件
      graphicLayer.on(this.mars3d.EventType.click, function (event) {
        console.log('监听layer，单击了矢量对象', event)
      })
      graphicLayer.on(this.mars3d.EventType.mouseOver, function (event) {
        console.log('监听layer，鼠标移入了矢量对象', event)
      })
      graphicLayer.on(this.mars3d.EventType.mouseOut, function (event) {
        console.log('监听layer，鼠标移出了矢量对象', event)
      })

      // 可在图层上绑定popup,对所有加到这个图层的矢量数据都生效
      graphicLayer.bindPopup('我是layer上绑定的Popup', {
        anchor: [0, -10]
      })

      // 可在图层绑定右键菜单,对所有加到这个图层的矢量数据都生效
      graphicLayer.bindContextMenu([
        {
          text: '删除对象',
          iconCls: 'fa fa-trash-o',
          callback: function (e) {
            const graphic = e.graphic
            if (graphic) {
              graphicLayer.removeGraphic(graphic)
            }
          }
        }
      ])
      console.log(this.currentMap.getLayerById(9031));
       this.currentMap.getLayerById(9031).on(this.mars3d.EventType.click,function(event){
        alert(111);
      })
      /////////////////////////////地图搜索定位功能/////////////////////////////////
      //创建地图搜索服务
      this.queryMapserver = new this.mars3d.query.QueryGeoServer({
        url: 'http://192.168.10.100:8020/geoserver/gaoxinqu/ows',
        parameters: {
          typeName: 'gaoxinqu:yqxz',
          maxFeatures: 200,
        },
        popup: 'all',
      })
      //创建村庄定位搜索服务
      this.villageQueryMapserver = new this.mars3d.query.QueryGeoServer({
        url: 'http://192.168.10.100:8020/geoserver/gaoxinqu/ows',
        parameters: {
          typeName: 'gaoxinqu:cunjie_4326',
          maxFeatures: 200,
        },
        popup: 'all',
      })     
      //创建用于显示搜索结果的geojson图层
       this.geoJsonLayer = new this.mars3d.layer.GeoJsonLayer({
         symbol: {
          styleOptions: {
            opacity: 0, 
            color: "#0000FF", 
            width: 3, 
            outlineColor: "red",
            outlineWidth: 5,
            outlineOpacity: 0.8,
            clampToGround: true ,
            label: {
              text: "{RefName}",
              opacity: 1,
              font_size: 25,
              color: "#ffffff",
              outline: true,
              outlineColor: "#000000",
              outlineWidth: 3,
              scaleByDistance: true,
              scaleByDistance_far: 2743804,
              scaleByDistance_farValue: 0.3,
              scaleByDistance_near: 10000,
              scaleByDistance_nearValue: 1,
              distanceDisplayCondition: true,
              distanceDisplayCondition_far: 2743804,
              distanceDisplayCondition_near: 0
            }
          },
        },
        popup: 'all',
      })
      this.geoJsonLayer.on(mars3d.EventType.load, function (event) {
        
      })
      
      let that=this;
      this.geoJsonLayer.bindContextMenu([
        {
          text: '删除对象',
          iconCls: 'fa fa-trash-o',
          callback: function (e) {
            that.geoJsonLayer.clear();
            that.villageGeoJsonLayer.clear();
          }
        }
      ])

      this.currentMap.addLayer(this.geoJsonLayer);

      //创建用于显示村庄定位的GEOJSONLayer
      //创建用于显示搜索结果的geojson图层
       this.villageGeoJsonLayer = new this.mars3d.layer.GeoJsonLayer({
         symbol: {
          styleOptions: {
            opacity: 0, 
            color: "#0000FF", 
            width: 3, 
             outlineColor: "red",
            outlineWidth: 5,
            outlineOpacity: 0.8,
            clampToGround: true ,
            label: {
              text: "{XZQMC}",
              opacity: 1,
              font_size: 25,
              color: "#ffffff",
              outline: true,
              outlineColor: "#000000",
              outlineWidth: 3,
              scaleByDistance: true,
              scaleByDistance_far: 2743804,
              scaleByDistance_farValue: 0.3,
              scaleByDistance_near: 10000,
              scaleByDistance_nearValue: 1,
              distanceDisplayCondition: true,
              distanceDisplayCondition_far: 2743804,
              distanceDisplayCondition_near: 0
            }
          },
        },
        popup: 'all',
      })
      this.currentMap.addLayer(this.villageGeoJsonLayer);

      
      let color=null;

 
      this.villageGeoJsonLayer.on(mars3d.EventType.mouseOver,function(event){
        
       // color=event.czmObject.polygon.material.color.getValue();
        //let color = event.czmObject.polygon.material.color.getValue().withAlpha(1);
       // console.log(color);
       // alert(color.red);
        /*
        var jsonStr = '{"alpha":"1","red":"0","green":"1","blue":""0}';
        var obj = {
          red:0,
          green:1,
          blue:0,
          alpha:1
        }
        
        var newColor =  JSON.parse(JSON.stringify(obj));
        */
       // event.czmObject.polygon.material.color.setValue();
       
        //event.czmObject.polygon.material.color.setValue(new Cesium.Color(0,0,1,0.1));
      })

      this.villageGeoJsonLayer.on(mars3d.EventType.mouseOut,function(event){
       // console.log(event.czmObject.polygon.material.color.getValue().withAlpha(0));
        //console.log(newColor);
      // event.czmObject.polygon.material.color.setValue(event.czmObject.polygon.material.color.getValue().withAlpha(0));
        //event.czmObject.polygon.material.color.setValue(color);
      })


      //地图编辑图层
      this.drawLayer = new this.mars3d.layer.GraphicLayer({
        hasEdit: true,
        isAutoEditing: true, //绘制完成后是否自动激活编辑
      })
      this.currentMap.addLayer(this.drawLayer);

      ///////////////////////////////创建并添加地图测量对象
      this.measure = new this.mars3d.thing.Measure({
        removeScreenSpaceEvent: true,
        //可设置文本样式
        label: {
          color: '#ffffff',
          font_family: '楷体',
          font_size: 20,
          background: false,
        },
      })
      
      //将地图测量对象添加到map中
      this.currentMap.addThing(this.measure)

      //创建地图遮盖图层
      
      var zhegaiLayer = new this.mars3d.layer.GeoJsonLayer({
       url:'/geojson/industry/gxqbj.json',
        mask:true,  
        symbol: {
          styleOptions: {
            fill: true,
            color: '#ffffff',
            opacity: 0.2,
            outline: true,
            outlineColor: 'red',
            outlineWidth: 3,
            outlineOpacity: 0.8,
            arcType: Cesium.ArcType.GEODESIC,
            clampToGround: true,
          },
        }
      })
      this.currentMap.addLayer(zhegaiLayer);
    
      //村庄定位
     
     // this.queryData('桂香小镇')
    },
    //////////////////////地图加载函数end//////////////////end end end end end end end end 

    //搜索框 搜索功能
    showSearchResult:function(){
       attract.SearchShpArea({'searchKey':this.searchKeyWord}).then(response => {
          this.searchResult = response.result;
          console.log(response)
      })
    },
    searchResultClick:function(resultName){
      this.villageQueryData(resultName);
      this.searchKeyWord = null;
    },

    search:function(){
      if(this.searchKeyWord != null){
        this.queryData(this.searchKeyWord);
        this.searchKeyWord=null;
      }
    },
    //查询函数
    queryData:function(queryVal) {
      this.villageGeoJsonLayer.clear();
      this.queryMapserver.query({
        column: 'RefName',
        text:queryVal,
       // graphic: drawGraphic,
        success: (result) => {
          if (result.count == 0) {
           alert('未查询到相关记录！');
            return
          } else {
          // alert('共查询到 ' + result.count + ' 条记录！');
           console.log(result.geojson);
           //this.geoJsonLayer.load(result.geojson);
          }
          this.geoJsonLayer.load({ data: result.geojson });
          this.geoJsonLayer.flyTo();
        },
        error: (error, msg) => {
         alert('服务访问错误');
         // haoutil.alert(msg, '服务访问错误')
        },
      })
    },
    //加载左侧村庄
    loadVillage:function(){
      this.companyData=companydata.features;
      //
      console.log(villageData.features);
      this.villagedata = villageData.features;
      for(var i=0;i<30;i++){
          this.MaChangHuVillage[i]=this.villagedata[i];
      }
      for(var i=0;i<20;i++){
        this.LuoXiVillage[i]=this.villagedata[i+30];
      }
    
    },
    villageQueryData:function(queryVal){
      this.geoJsonLayer.clear();
     // alert(111);
       this.villageQueryMapserver.query({
        column: 'XZQMC',
        text:queryVal,
       // graphic: drawGraphic,
        success: (result) => {
          if (result.count == 0) {
           // alert('未查询到相关记录！');
            return
          } else {
           // alert('共查询到 ' + result.count + ' 条记录！');
           console.log(result.geojson);
           //this.geoJsonLayer.load(result.geojson);
          }
          this.villageGeoJsonLayer.load({ data: result.geojson });
          this.villageGeoJsonLayer.flyTo();
        },
        error: (error, msg) => {
         alert('服务访问错误');
         // haoutil.alert(msg, '服务访问错误')
        },
      })
    },
    //清空搜索图层函数
    LayerClear:function(){
      this.villageGeoJsonLayer.clear();
      this.geoJsonLayer.clear();
    },
    //图层显示函数
     updateLayerShow:function(layer, show) {
      layer.show = show
      if (show) {
        if (!layer.isAdded) {
          this.currentMap.off(mars3d.EventType.addLayer, this._onAddLayerHandler, this)
          this.currentMap.addLayer(layer)
          this.currentMap.on(mars3d.EventType.addLayer, this._onAddLayerHandler, this)
        }
        if (!layer.options.noCenter) {
          //在对应config.json图层节点配置 noCenter:true 可以不定位
          layer.flyTo()
        }
      } 
    },
    //点击显示不同图层
    showLayer:function(event,layerId){
      //清空图层数据
    //  this.layerLoad=true;
      //判断是否是图层显示状态
      if(event.currentTarget.getAttribute('layerShow') == 'false'){
        //判断是否未设置图层
        if(this.layers[event.currentTarget.getAttribute('layer-index')]==null){
          //显示加载动画
          this.loading();
          //加载新的图层
          let layer = this.currentMap.getLayerById(layerId);
          let that = this;
          layer.on(this.mars3d.EventType.click,function(event){
            that.LayerClear();
          })
          this.layers[event.currentTarget.getAttribute('layer-index')]=layer;
          this.updateLayerShow(layer,true);
          //交通规划面添加鼠标移入移出事件
          if(event.currentTarget.getAttribute('layer-index')==7){
            console.log(this.layers[7]);
            console.log(this.mars3d.EventType.mouseOver);
            
            this.layers[7].on(this.mars3d.EventType.mouseOver,function(event){
              console.log("鼠标移入了图层");
            })
            
           /*
           this.layers[7].apply(addEventListener("mouseover",function(event){
              console.log(event);
           },false))
          */
         /*

             this.layers[7].on(this.mars3d.EventType.click,function(event){
              console.log("鼠标点击了图层");
            })
            */
          }
          //监控图层添加点击事件
          if(event.currentTarget.getAttribute('layer-index')==9){
            //alert(11);
            let that = this;
            console.log(this.layers[9]);
             this.layers[9].on(this.mars3d.EventType.click, function (event) {
                that.cameraShow=true;
                console.log('监听layer，单击了矢量对象', event)
              })
               this.layers[9].on(this.mars3d.EventType.mouseOver, function (event) {
                
                console.log('监听layer，鼠标移入了矢量对象', event)
              })
          }
          //图层加载事件
          /*
             this.layers[event.currentTarget.getAttribute('layer-index')].on(this.mars3d.EventType.load, function (event) {
               alert('数据加载完成');
               this.layerLoad=false;
             })
             */
        }else{
          this.layers[event.currentTarget.getAttribute('layer-index')].show=true;
        }
        event.currentTarget.lastElementChild.src="industry/img/check-box.png";
        event.currentTarget.setAttribute('layerShow',true);
      }else if(event.currentTarget.getAttribute('layerShow') == 'true'){
         if(event.currentTarget.getAttribute('layer-index')==0){
         this.layers[0].clear();
        }
        if(event.currentTarget.getAttribute('layer-index')==1){
         this.layers[1].clear();
        }
        if(event.currentTarget.getAttribute('layer-index')==2){
         this.layers[2].clear();
        }
         if(event.currentTarget.getAttribute('layer-index')==3){
         this.layers[3].clear();
        }

        this.layers[event.currentTarget.getAttribute('layer-index')].show=false;
        event.currentTarget.lastElementChild.src="industry/img/checkbox.png";
         event.currentTarget.setAttribute('layerShow',false);
      }
      //右侧信息栏 联动
      this.rightMenu();
      this.rightShowChange();
    },
    //右侧信息栏显示函数
    rightShowChange:function(){
        //控制右侧信息栏显示
        if(this.tabs.length == 0){
          this.rightShow=false;
          this.rightInfoDatas=null;
        }else{
          this.rightShow=true;
        }
    },
    //道路网点击高亮显示函数
    roadClick:function(){
       //道路网图层点击高亮显示
        if(this.layers[6]!=null){
          this.layers[6].on(this.mars3d.EventType.click,function(event){
            console.log(event);
          })
        }
    },
    //加载动画
    loading:function(){
      this.layerLoad=true;
      setTimeout(()=>{
        this.layerLoad=false;
      },500);
    },
    //右侧信息栏数据展示
    rightMenu:function(){
        this.tabs = new Array();
        for(var i=8;i<document.getElementsByClassName('layerCheckbox').length;i++){
            if(document.getElementsByClassName('layerCheckbox')[i].getAttribute('layerShow')=='true'){
                this.tabs.unshift(document.getElementsByClassName('layerCheckbox')[i].firstElementChild.innerHTML);
            }
        }
        //默认展示最后一个添加的图层
        this.tabName == this.tabs[0];
    },
    //右侧信息栏数据展示
    rightInfo:function(tabname){
      this.rightInfoDatas = companydata.features;
      this.tabName = tabname;
      console.log(companydata.features);
      /*
      alert(companydata.features.length);
      console.log(companydata.features);
      */
    },
    //////////////////////地图绘图编辑
    //绘制点
    drawPoint:function() {
      this.drawLayer.startDraw({
        type: 'point',
        style: {
          pixelSize: 12,
          color: '#3388ff',
          label: {
            //不需要文字时，去掉label配置即可
            text: '',
            font_size: 20,
            color: '#ffffff',
            outline: true,
            outlineColor: '#000000',
            pixelOffsetY: -20,
          },
        },
      })
    },
    //绘制线
    drawPolyline:function(clampToGround) {
      this.drawLayer.startDraw({
        type: 'polyline',
        // maxPointNum: 2,  //限定最大点数，可以绘制2个点的线，自动结束
        style: {
          color: '#55ff33',
          width: 3,
          clampToGround: clampToGround,
        },
      })
    },
    //绘制面
     drawPolygon:function(clampToGround) {
      this.drawLayer.startDraw({
        type: 'polygon',
        style: {
          color: '#29cf34',
          opacity: 0.5,
          outline: false,
          outlineWidth: 2.0,
          clampToGround: clampToGround,
        },
      })
    },
    //清除所有内容
    clearDraw:function(){
        this.drawLayer.clear();
    },
    /////////////////////地图测量
    //距离测量
    measureLength:function () {
      this.measure.distance({
        // style: {
        //   lineType: 'solid',
        //   color: '#ffff00',
        //   width: 3,
        //   clampToGround: false //是否贴地
        // }
      })
    },
    //测量面积
    measureArea:function() {
      this.measure.area({
        // unit: 'm', //支持传入指定计量单位
        // style: {
        //   lineType: 'solid',
        //   color: '#ffff00',
        //   width: 3,
        //   clampToGround: true //是否贴地
        // }
      })
    }
  }
}
</script>

<style >
.mapcontainer {
  position: relative;
  height: 100%;
  overflow: hidden;
}
	a{
		text-decoration: none;
	}
  ul{
    list-style:none;
  }
	 .header{
		position: absolute;
		top:0px;
		left:0px;
		width:100%;
		height:70px;
		background-image:url(/industry/img/title-bg.png);
		background-size:100% 70px;
    z-index: 101;
	}
	 .header .logo{
		width:255px;
		height:70px;
		float:left;
		text-align:left;
	}
	 .header .logo .logo-image{
		width:44px;
		height:44px;
		margin-left:21px;
		margin-top:12px;
		float:left;
	}
	 .header .logo .logo-image img{
		width:44px;
		height:44px;
	}
	 .header .logo .app-name{
		width:169px;
		height:70px;
		line-height: 70px;
		margin-left:21px;
		float:left;
		color:#fff;
		font-size: 24px;
	}
	
	 .header .header-right{
		width:300px;
		height:70px;
		float:right;
	}
	 .header .header-right .user-center{
		width:148px;
		height:44px;
		margin-top:13px;
		float:left;
		border-right:1px solid rgba(0,255,255,0.22);
	}
	 .header .header-right .user-center .user-image{
		width:44px;
		height:44px;
		float:left;
	}
	 .header .header-right .user-center .user-name{
		width:88px;
		height:44px;
		float:right;
		color:#fff;
		line-height: 24px;
	}

	 .header .header-right .user-center .user-name p:first-child{
      margin:0px;
	}
	 .header .header-right .user-center .user-name p:last-child{
		font-size: 12px;
    margin:0px;
	}
	 .header .header-right .date-weather{
		width:120px;
		height:44px;
		float:right;
		margin-top:13px;
		color:#fff;
	}
	 .header .header-right .date-weather .time{
		font-size: 24px;
    text-align: center;;
    line-height: 28px;
    padding:0px;
    margin:0px;
	}
	 .header .header-right .date-weather .time img{
		position: absolute;
		right:0px;
		top:0px;
	}
	 .header .header-right .date-weather .date{
		font-size: 12px;
	}
  /* 搜索框 */
  .search-box{
    width:362px;
    height:36px;
    position:absolute;
    top:12px;
    left:225px;
    border: 1px solid #3282b5;
    background:rgba(0,0,0,0.8);
    z-index:99;
    border-radius: 3px;
    box-shadow: 1px 2px 1px rgb(0 0 0 / 15%);
  }
  .search-box .searchResultList{
    width:360px;
    height:0px;
    padding:0px;
    
    position:absolute;
    top:50px;
    left:0px;
    z-index:101;
    margin:0px;
  }
    .search-box .searchResultList ul{
      padding:0px;
      
    }
    .search-box .searchResultList ul li{
      width:100%;
      height:36px;
      line-height:36px;
      text-indent: 24px;
      cursor:pointer;
      padding:0px;
    }
      .search-box .searchResultList ul li:hover{
        background:#f6f6f6;
      }
  .search-box input{
    width:300px;
    height:48px;
    line-height: 48px;
    text-indent:24px;
    font-size: 16px;
    background:none;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #002C50;
    outline:none;
    border:0px;
  }
  .search-box  img{
    width:24px;
    height:24px;
    cursor:pointer;
    float:right;
    margin-top:12px;
    margin-right: 20px;;
  }
 /* 工具栏 */
 .toolbox{
   height:50px;
   background:rgba(0,0,0,0.8);
   position:absolute;
   top:12px;
   left:600px;
   z-index:99;
   box-shadow: 1px 2px 1px rgb(0 0 0 / 15%);
   border-radius: 3px;
   padding:0px 12px;
    border: 1px solid #3282b5;
 }
  .toolbox .tool-btn{
    width:36px;
    height:36px;
    margin:7px;
    float:left;
    text-align: center;
    cursor:pointer;
    border-radius:2px;
  }
    .toolbox .tool-btn:hover{
      background:rgba(0,44,80,0.2);
    }
    .toolbox .tool-btn img{
      width:20px;
      height:20px;
      margin-top:8px;
    }
  /* 左侧菜单栏 */
.left-menu{
  width:210px;
 height:100%;
  position:absolute;
  top:0px;
  left:0px;
  z-index:99;
  background:#002c50;
  box-sizing:border-box;
  padding-top:70px;
}
.left-menu .menu-box{
  width:210px;
  height:42px;
  background:#5898C7;
  border-bottom:1px solid #fff;
  
}
.left-menu .menu-box{
  line-height: 42px;
  font-size: 18px;
  color:#fff;
  text-indent: 20px;
  cursor:pointer;
}
.left-menu .menu-box img{
		float:right;
		width:19px;
		height: 17px;
		margin-top:12px;
		margin-right:13px;
	}
  .left-menu .address-container{
    width:210px;
    max-height:790px;
    overflow-y: scroll;
    overflow-x:hidden;
    display:none;
  }
.left-menu .address-container .address-cate{
     width:210px;
     height:42px;
     line-height: 42px;
     font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #DCEEFE;
}
.left-menu .address-container .address-cate img{
    width:18px;
    height:18px;
    margin-left:17px;
    margin-right:11px;
  }
.left-menu .address-container .towns{
  width:210px;
  height:42px;
  line-height: 42px;
  color:#fff;
  text-indent:42px;
  cursor:pointer;
}
.left-menu .address-container .towns img{
  width:16px;
  height:16px;
  margin-right:6px;
}
.left-menu .address-container .village-list{
  width:210px;

}
.left-menu .address-container .village-list ul{
  list-style:none;
}
.left-menu .address-container .village-list ul li{
  width:210px;
  height:42px;
  line-height: 42px;
  text-indent: 24px;;
  color:#fff;
  cursor:pointer;
}
.left-menu .address-container .area-list{
  width:210px;
}
.left-menu .address-container .area-list ul li{
  width:210px;
  height:42px;
  line-height: 42px;
  color:#fff;
  cursor:pointer;
}
.left-menu .address-container::-webkit-scrollbar
{
	width: 10px;
	height: 10px;
}
.left-menu .address-container::-webkit-scrollbar-track
{
	border-radius: 10px;
}
.left-menu .address-container::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-color:rgba(0,0,0,0.4);
}
.left-menu .layer-container{
    width:210px;
    max-height:760px;
    overflow-y:scroll;
    overflow-x:hidden;
  }
.left-menu .layer-container::-webkit-scrollbar
{
	width: 10px;
	height: 10px;

}
.left-menu .layer-container::-webkit-scrollbar-track
{

	border-radius: 10px;

}
.left-menu .layer-container::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	
	background-color:rgba(0,0,0,0.4);
}

  .left-menu .layer-container .layer-box{
    width:210px;
   
  }
   .left-menu .layer-container .layer-box .layer-cate{
     width:210px;
     height:42px;
     line-height: 42px;
     font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #DCEEFE;
   }
    .left-menu .layer-container .layer-box .layer-cate img{
      width:18px;
      height:18px;
      margin-left:17px;
      margin-right:11px;
    }
   .left-menu .layer-container .layer-box .layer-list{
     width:210px;
   }
    .left-menu .layer-container .layer-box  .layer-list ul li{
      width:150px;
      height:42px;
       font-size: 14px;
     color:#fff;
     line-height: 42px;
      cursor:pointer;
    }
    .left-menu .layer-container .layer-box .layer-list ul li img{
      float:right;
      width:17px;

      margin-top:12px;
    }
/* 右侧菜单栏 */
.right-menu{
  width:210px;
  height:1010px;
  position:absolute;
  top:70px;
  right:0px;
  background:#002C50;
  z-index:99;
}
.right-menu .menu-box{
  width:210px;
  height:42px;
  background:#5898C7;
  border-bottom:1px solid #fff;
  
}
.right-menu .menu-box{
  line-height: 42px;
  font-size: 18px;
  color:#fff;
  text-indent: 20px;
  cursor:pointer;
}
.right-menu .menu-box img{
		float:right;
		width:19px;
		height: 17px;
		margin-top:12px;
		margin-right:13px;
	}
.right-menu  .source-tab{
  width:210px;
}
.right-menu .source-tab .tab-options{
  width:30px;
  padding:10px;
  float:left;
}
.right-menu .source-tab .tab-options .tab-btn{
  width:28px;
  padding:8px 0px; 
  border:1px dotted #fff;
  font-size:14px;
  line-height:18px;
  margin:6px 0px;
  border-radius: 3px;
  color:#fff;
  text-align: center;;
  cursor:pointer;
}
.right-menu .source-tab .tab-options .active{
  background:#fff;
  color:#002C50;
}
.right-menu .source-tab .tab-container{
  width:160px;
  max-height:900px;
  overflow-y:scroll;
  position:absolute;
  top:52px;
  right:0px;
}

.right-menu .source-tab .tab-container::-webkit-scrollbar
{
	width: 10px;
	height: 10px;
}
.right-menu .source-tab .tab-container::-webkit-scrollbar-track
{
	border-radius: 10px;
}
.right-menu .source-tab .tab-container::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-color:rgba(0,0,0,0.4);
}


.right-menu .source-tab .tab-container .info-box{
  width: 142px;
  height: 91px;
  padding:3px;
  border:1px  dashed #fff;
  border-radius: 2px;
  margin:6px 0px;
  cursor:pointer;
  color:#f5f5f5;
}
/* 加载动画组件 */
.loader{
  width:170px;
  height:60px;
  position:absolute;
  top:50%;
  left:50%;
  background: rgba(0,0,0,0.5);
 	border-radius: 6px;
 	border:1px solid #aaa;
  line-height: 36px;
  margin-left:-85px;
  margin-top:-30px;
  z-index: 99;
  line-height: 36px;
  font-size: 14px;
}
.loader .title{
  float:right;
  width:100px;
  height:58px;
  line-height: 58px;
  text-indent:0px;
  color:#fff;
}

.camera{
    width:1440px;
    padding:12px;
    padding-bottom:60px;
    background:rgba(0,0,0,0.8);
    position:absolute;
    top:50%;
    left:50%;
    z-index:101;
    margin-left:-720px;
    margin-top:-280px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.22);
}
.camera .camera-top{
    width:100%;
    text-align: right;
    height:30px;
}
.camera .camera-top .close-btn{
    width:24px;
    height:24px;
    float:right;
    margin-top:6px;
    margin-right:6px;
    background-image: url(/industry/img/close.png);
    background-size: 24px 24px;
    cursor: pointer;
}
.camera .camera-top .close-btn:hover{
     background-image: url(/industry/img/close-a.png);
}
.camera .camera-top img{
    width:24px;
    height:24px;
    margin-top:6px;
    margin-right:6px;
}
.camera video{
    width:100%;
    margin-top:24px;

}
</style>
