fj-dc-ui/.svn/pristine/f6/f6af96256a9029e0e0be1513d3ac9b228af8cced.svn-base

<!--地图主组件-->
<template>
  <div id="mapContent" style="height:100%;">
    <!-- 地图容器 -->
    <div id="mapNode1" style="width:100%;height:100%;"></div>
    <!-- 名称弹窗 -->
    <div id="popup" class="ol-popup" style="display:none;">
<!--      <a href="#" id="popup-closer" class="ol-popup-closer"></a>-->
      <div id="popup-content"></div>
    </div>
    <!-- 底图切换 -->
    <div id="baseMapContainer" style="color:#2C9EFF;box-shadow: 0 1px 6px 0 rgba(32, 33, 36, .28);position: absolute;right: 10px;top: 106px;width: 700px;display: flex;align-items: center;font-size:14px;background:white;">
      <img src="./assets/basemap.png" style="margin-left: 15px;">
      <el-select v-model="radio4" placeholder="请选择"  @change="baseMapChange">
        <el-option
          v-for="item in mapOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <span class="demonstration">日期</span>
      <el-select v-model="currentDate" @change="changeDate">
        <el-option
          v-for="(item,index) in dateOptions"
          :value="item.year+''">{{item.year}}
        </el-option>
      </el-select>
      <span class="demonstration">批次</span>
      <el-select v-model="currentBatch" @change="changeBatch">
        <el-option
          v-for="(item,index) in batchOption"
          :value="item.batch+''">{{item.label}}
        </el-option>
      </el-select>
    </div>
    <proPblmDetail v-if="proPblmVisible" :proPblmId="proPblmId" :title="proTitle" @closeDialog="closeDialog"></proPblmDetail>
  </div>
</template>

<script>
    import "ol/ol.css";
    import { getAdData,getCurrentAdData} from "../../api/duChaAPI.js";
    import {
        getYear,
        getBatch,
    } from "../../api/homeMainView.js";
    import {mapConfig} from './config/mapConfig.js'
    import {initProGraphic,pointMoveHandler,pointClickHandler} from '../zongHeXinXiOl/js/initProLayer.js'
    import {baseMapChangeHandler} from './js/baseMapChange.js' //底图切换
    import proPblmDetail from "../../views/home/proPblmDetail"
    import {xzqChange} from './js/xzqChange.js' //切换行政区
    export default {
        components: {
            proPblmDetail
        },
        data() {
            return {
                proPblmVisible:false,
                proPblmId:"",
                proTitle:"",
                dateOptions:[],
                currentDate:(new Date()).getFullYear()+'',
                batchOption:[],
                currentBatch:"",
                loading:true,
                radio4:'图层',//底图切换radiobutton
                mapObject:null,
                viewObject:null,
                fullExtent:'',
                initOptions:null,//各图层option
                popupDelay:'',//延时弹出
                currentRsCode:'1111111',
                currentStatus:'',
                currentLocation:'',
                zoomnext:'',
                currentExtent:'',
                timeInterval_people:'',//定时刷新人员
                currentChangeGraphicLayerId:'',//当前graphic类型变化的图层id
                currentChangeGraphicId:'',
                tileInfo:'',//高德切片信息
                biaojiFlag:false,
                showBiaojiTable:false,
                currentAdCode:'',
                leftLayersAddedList:[],//左侧图层已经添加列表   为一张图查询做支撑
                showSearchOneMapToolTip:false,//一张图查询开关
                showSearchOneMap:false,//一张图空间查询结果
                mapPointObj:null,
                bufferDistance1:10,//缓冲距离
                showRealTimeData:false,//水利一张图实时数据查询列表
                currentZoom:0,//当前底图level
                mapOptions:[
                    // {
                    // 	value: '影像',
                    // 	label: '影像'
                    // }, {
                    // 	value: '谷歌',
                    // 	label: '谷歌'
                    // }, {
                    // 	value: '高德',
                    // 	label: '高德'
                    // }
                ],
                menu_overlay:null,
                longLat:[],
                center:[],//地图  全国范围的center
                zoom:0,
            };
        },
        computed: {
            userId: function () {
                return localStorage.getItem("userid") ?localStorage.getItem("userid") : "1098101939614724096";
            }
        },
        watch: {},
        //生命周期 - 创建完成（可以访问当前this实例）
        created() {
          this.initYear();
          this.initBatch();
        },
        //生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {
            var _self = this;

            if(mapConfig.provinceBaseLayer[localStorage.getItem('currentRlcode')]!=null){
                this.initOptions = mapConfig.provinceBaseLayer[localStorage.getItem('currentRlcode')].layer;
                this.center = mapConfig.provinceBaseLayer[localStorage.getItem('currentRlcode')].mapExtent.center;
                this.zoom = mapConfig.provinceBaseLayer[localStorage.getItem('currentRlcode')].mapExtent.zoom;
            }else{
                this.initOptions = (mapConfig.wkid == '3857' || mapConfig.wkid =='102100')?mapConfig.baseLayerOptions_ol_M:mapConfig.baseLayerOptions_ol;
                var mapArr = (mapConfig.wkid == '3857' || mapConfig.wkid =='102100')?[this.initOptions[0],this.initOptions[1]]:[this.initOptions[0],this.initOptions[1],this.initOptions[2]];
                this.initOptions = mapArr;
                this.center = (mapConfig.wkid == '3857' || mapConfig.wkid =='102100')?mapConfig.mapExtent_M.center:mapConfig.mapExtent.center;
                this.zoom = (mapConfig.wkid == '3857' || mapConfig.wkid =='102100')?mapConfig.mapExtent_M.zoom:mapConfig.mapExtent.zoom;
            }
            this.initOptions.forEach(item=>{
                _self.mapOptions.push({
                    value:item.id,
                    label:item.name
                })
            })
            this.initMap();
        },
        beforeCreate() {}, //生命周期 - 创建之前
        beforeMount() {}, //生命周期 - 挂载之前
        beforeUpdate() {}, //生命周期 - 更新之前
        updated() {}, //生命周期 - 更新之后
        beforeDestroy() {}, //生命周期 - 销毁之前
        destroyed() {}, //生命周期 - 销毁完成
        activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
        methods: {
            getAdData:function(){
                var adCode = localStorage.getItem('areacode') ? localStorage.getItem('areacode'): '000000000000';
                var _self = this;
                getAdData(adCode).then((response)=>{
                    _self.nextLevelXzq = response.data;
                       if(_self.nextLevelXzq.length){
                          let item = _self.nextLevelXzq[0];
                           if(item.adCode!=localStorage.getItem('currentRlcode')){
                               getCurrentAdData(localStorage.getItem('currentRlcode')).then((response)=>{
                                   if(response.data){
                                       xzqChange(this,_self.mapObject,response.data,this.fullExtent);
                                   }
                               });
                           }else{
                               xzqChange(this,_self.mapObject,item,this.fullExtent);
                           }
                       }

                });
            },
            closeDialog(){
                this.proPblmVisible = false;
                this.proPblmId = "";
            },
            changeDate(val){
                var _self = this;
                initProGraphic(_self);
            },
            changeBatch(val){
                var _self = this;
                initProGraphic(_self);
            },
            initYear(){
                var _self = this;
                _self.dateOptions = [];
                getYear().then((res) => {
                    if(res!=null && res.data.length>0){
                        _self.dateOptions = res.data;
                    }
                });
            },
            initBatch(){
                var _self = this;
                _self.batchOption = [];
                getBatch().then((res) => {
                    if(res!=null && res.data.length>0){
                        _self.batchOption = res.data;
                        for(var i = 0;i<_self.batchOption.length;i++){
                            _self.batchOption[i].label = _self.batchOption[i].batch+'';
                        }
                        _self.batchOption.push({label:'全部',batch:''});
                    }
                });
            },
            initMap(){//初始化地图
                var _self = this;
                var ol = _self.$ol;
                var resolutions =null;
                var matrixIds = null;
                var projection = null;
                var projectionExtent = null;
                var tileGrid = null;
                var origin = null;
                var fullExtent = [];
                var view = new ol.View({
                    center:_self.center,
                    zoom:_self.zoom,
                    maxZoom:18,
                    minZoom:0
                });
                if(localStorage.getItem('currentRlcode')=="430000000000"){
                    resolutions = mapConfig.resolutions;
                    matrixIds = mapConfig.matrixIds;
                    projection = ol.proj.get("EPSG:4326");
                    projectionExtent = projection.getExtent();
                    // 水利一张图   湖南底图
                    tileGrid = new ol.tilegrid.TileGrid({
                        origin: ol.extent.getTopLeft(projectionExtent), //原点（左上角）
                        resolutions: resolutions, //分辨率数组
                        matrixIds: matrixIds //矩阵标识列表，与地图级数保持一致
                    });
                }
                if(localStorage.getItem('currentRlcode')=="330000000000"){
                    resolutions = mapConfig.resolutions_zhejiang;
                    projection = ol.proj.get('EPSG:4490');
                    origin = [-180.0, 90.0];
                    fullExtent = [
                        118.02252237300922,
                        27.029697618000057,
                        123.2499368190001,
                        31.182560451903395
                    ];
                    tileGrid = new ol.tilegrid.TileGrid({
                        tileSize: 256,
                        origin: origin,
                        resolutions: resolutions
                    });
                    view = new ol.View({
                        center:_self.center,
                        resolutions: resolutions,
                        zoom:_self.zoom,
                        projection: projection,
                        extent: fullExtent
                    });
                }
                var layers = [];
                _self.initOptions.forEach((item)=>{//所有底图
                    if(item.type == 'supermap'){
                        var lyr = new ol.layer.Tile({
                            id:item.id,
                            source: new ol.source.XYZ({
                                projection:'EPSG:4326',
                                tileGrid: tileGrid,
                                tileUrlFunction: function (tileCoord) {
                                    var z = tileCoord[0];
                                    var x = tileCoord[1];
                                    var y = -tileCoord[2]-1;
                                    return item.urlTemplate+"&FORMAT=image/png&tilecol="+x+"&tilerow="+y+"&tilematrix="+z;
                                },
                                wrapX: true,
                            }),
                            name: item.name,
                            visible:item.visible
                        });
                        layers.push(lyr)
                    }else if(item.type == 'tdtLayer'){
                        var lyr = new ol.layer.Tile({
                            id:item.id,
                            source: new ol.source.XYZ({
                                projection:(mapConfig.wkid == '3857' || mapConfig.wkid =='102100')? 'EPSG:3857': 'EPSG:4326',
                                crossOrigin: 'anonymous',
                                url: item.urlTemplate
                            }),
                            name: item.name,
                            visible:item.visible
                        });
                        layers.push(lyr)
                    }else if(item.type == 'mapServer'){
                        var lyr =  new ol.layer.Image({
                            source: new ol.source.ImageArcGISRest({
                                ratio: 1,
                                params: {},
                                url: item.urlTemplate
                            }),
                            id:item.id,
                            name: item.name,
                            visible:item.visible
                        })
                        layers.push(lyr);
                    }else if(item.type == 'wp'){
                        var lyr =  new ol.layer.Tile({
                            source: new ol.source.XYZ({
                                tileGrid: tileGrid,
                                projection: projection,
                                url:item.urlTemplate
                            }),
                            id:item.id,
                            name: item.name,
                            visible:item.visible
                        })
                        layers.push(lyr);
                    }else if(item.type == "xjbt"){
                        var resolutions = new Array(17);
                        var matrixIds = new Array(17);
                        for (var z = 0; z < 17; ++z) {
                            resolutions[z] = 156543.033928041 / Math.pow(2, z);
                            matrixIds[z] = z;
                        }
                        var layer = new ol.layer.Tile({
                            source: new ol.source.WMTS({
                                url: item.urlTemplate,
                                layer: 'AD_R_20210419',
                                matrixSet: 'GoogleMapsCompatible_AD_R_20210419',
                                format: 'image/png',
                                tileGrid: new ol.tilegrid.WMTS({
                                    origin: [-2.0037508342787E7,2.0037508342787E7],
                                    extent:[-2.0037508342789244E7, -2.0037508342789203E7 ,2.0037508342789244E7, 2.003750834278921E7],
                                    resolutions: resolutions,
                                    matrixIds: matrixIds
                                })
                            })
                        })
                        layers.push(layer);
                    }
                })
                this.$nextTick(() => {

                });
                _self.mapObject = new ol.Map({
                    layers:layers,
                    view:view,
                    target:'mapNode1'
                });
                _self.mapObject.on('click',_self.mapClickHandle);//点击事件
                _self.mapObject.on('pointermove',_self.pointMoveHandle);//地图移动事件
                initProGraphic(_self);
                _self.getAdData();
            },
            //地图点击事件
            mapClickHandle(e){
                var _self = this;
                var features = _self.mapObject.getFeaturesAtPixel(e.pixel);
                if(features){
                    if(features[0].getProperties().layerId){
                        pointClickHandler(_self,features[0].getProperties());
                    }
                }
            },
            //鼠标移动事件
            pointMoveHandle(e){
                var _self = this;
                var overlay = _self.mapObject.getOverlayById('overlayId');
                if(overlay){
                    if(document.getElementById('popup')){
                        document.getElementById('popup').style.display = 'none'
                    }
                }
                var features = _self.mapObject.getFeaturesAtPixel(e.pixel);
                if(features){
                    if(features[0].getProperties().layerId){
                        pointMoveHandler(_self,features[0].getProperties(),e);
                    }
                }
            },
            // 底图切换处理方法
            baseMapChange(val){//底图切换
                baseMapChangeHandler(this.mapObject,val);
            }
        },
    }
</script>
<style>
  /*@import url(); 引入公共css类*/
  .ol-popup {
    position: absolute;
    background-color: white;
    -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -49px;
    min-width: 80px;
    text-align: center;
    z-index: 100;
  }
  .ol-popup:after, .ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }
  .ol-popup:after {
    border-top-color: white;
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
  }
  .ol-popup:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
  }
  .ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
  }
  .ol-popup-closer:after {
    content: "✖";
  }
  #baseMapContainer .el-input__inner{
    color:#2C9EFF;
    font-size: 14px;
    border: 0px !important;
  }
  #mapContent .el-select .el-input .el-select__caret{
    color:#2C9EFF;
  }
  .rightMenuClass{
    left: 3px;
    position: absolute;
    background-color: #ffffffad;
    width: 90px;
    border: 1px solid #8c8b8b;
    box-shadow: 0 2px 15px 2px rgba(0, 0, 0, 0.6);
    border-radius: 13px;
    padding: 10px;
    border-top-left-radius: 0px;
  }
  .rightMenuClass p{
    padding: 3px 3px;
    margin: 0px 2px;
    line-height: 17px;
    width: 84px;
    color: rgb(101, 101, 101);
    cursor: pointer;
    /* border-bottom: 1px solid #bbb; */
  }
</style>