fj-dc-ui/.svn/pristine/6b/6bd42bcd4b2205f3f3e5330b38c75b3a1b7efc59.svn-base

<template>
	<div id="mapContent" style="height:100%;" v-loading="loading">
		<!-- 地图容器 -->
		<div id="mapNode" style="width:100%;height:100%;"></div>
		<!-- 地图小工具 -->

		<div style="position: absolute;right: 20px;top: 106px;">
			<el-radio-group v-model="radio4" size="mini" @change="baseMapChange">
				<el-radio-button label="影像"></el-radio-button>
				<!-- <el-radio-button label="矢量" disabled></el-radio-button> -->
				<!-- <el-radio-button label="地形"></el-radio-button> -->
				<el-radio-button label="谷歌"></el-radio-button>
				<el-radio-button label="高德"></el-radio-button>
			</el-radio-group>
		</div>

	</div>
</template>
<script>
const options = {
    url: "/arcgisApi/4.7/init.js"
};
import Vue from 'vue'
import * as esriLoader from 'esri-loader'
import request from "../../utils/gw_ajax_request.js"
import {dateFormat} from "../../utils/gw_date.js"
//config
import {baseLayerOptions,baseLayerOptions_M,gaodeTileInfo} from '../../views/zongHeXinXiNew/config/lyrConfig.js'

//handler
import {baseMapChangeHandler} from '../../views/zongHeXinXiNew/js/baseMapChange.js' //底图切换

export default {
    components:{

    },
	props:['gdX','gdY'],
	computed:{
		userId: function () {
            return localStorage.getItem("userid") ?localStorage.getItem("userid") : "1098101939614724096";
        },
	},
	data(){
		return {
			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,
			activeName:'到这去',
			currentAdCode:'',
			leftLayersAddedList:[],//左侧图层已经添加列表   为一张图查询做支撑
			showSearchOneMapToolTip:false,//一张图查询开关
			showSearchOneMap:false,//一张图空间查询结果
			mapPointObj:null,
			bufferDistance1:10,//缓冲距离
			showRealTimeData:false,//水利一张图实时数据查询列表
		}
	},
	watch:{

	},
	mounted(){
		this.initOptions = baseLayerOptions_M;
		this.tileInfo = gaodeTileInfo;
		this.initMap();
	},
	methods:{
		initMap(){//初始化地图
			var _self = this;
			esriLoader.loadModules(["esri/Map","esri/views/MapView","esri/geometry/SpatialReference",
				"esri/geometry/Extent","esri/layers/MapImageLayer","esri/Basemap","esri/layers/tdtLayer",
				'esri/layers/WebTileLayer','esri/layers/support/TileInfo',
				"esri/geometry/Point","esri/config","dojo/domReady!"],options).then( (
				[Map,MapView,SpatialReference,Extent,MapImageLayer,Basemap,tdtLayer,WebTileLayer, TileInfo,
				Point,esriConfig,]) => {

				_self.mapObject = new Map({});

				for(var i=0;i<_self.initOptions.length;i++){//加载底图服务
					if(_self.initOptions[i].id == "id_gaode"){
						var tileInfo1 = new TileInfo(this.tileInfo);
						var gaodelayer = WebTileLayer(_self.initOptions[i].urlTemplate, {
							tileInfo:tileInfo1,
							id:_self.initOptions[i].id,
							visible:_self.initOptions[i].visible
						})
						_self.mapObject.add(gaodelayer);
					}else if(_self.initOptions[i].id == "id_google"){
						var lyr = new WebTileLayer({
							urlTemplate:_self.initOptions[i].urlTemplate,
							id:_self.initOptions[i].id,
							subDomains:_self.initOptions[i].subDomains,
							visible:_self.initOptions[i].visible
						});
						_self.mapObject.add(lyr);
					}else{
						var lyr = new WebTileLayer({
							urlTemplate:_self.initOptions[i].urlTemplate,
							id:_self.initOptions[i].id,
							subDomains:_self.initOptions[i].subDomains,
							visible:_self.initOptions[i].visible
						});
						_self.mapObject.add(lyr);
					}
				}
				_self.viewObject = new MapView({
					container: "mapNode",
					map: _self.mapObject,
					viewingMode: "global",
					constraints:{
						rotationEnabled: false
					}
				});
				_self.viewObject.ui.move([ "zoom" ], "bottom-right");
				_self.viewObject.when(function(){
					var ext = new Extent({
						xmax: 15979347.376847023,
						xmin: 7628754.910750309,
						ymax: 6006251.7894124305,
						ymin: 2518277.3147041956,
						spatialReference: new SpatialReference({wkid:102100})
					});
					_self.viewObject.extent = ext;
					_self.fullExtent = ext;
					_self.loading = false;
					_self.locationHandler(_self.gdX,_self.gdY)
				},function(error){
					console.log("The view's resources failed to load: ", error);
				});
			}).catch(err => {
				console.error(err);
			});
        },
        locationHandler(x,y,imgUrl){
            var _self = this;
            _self.viewObject.graphics.removeAll();
            esriLoader.loadModules(["esri/Graphic","esri/layers/GraphicsLayer",
                "esri/geometry/Point","esri/geometry/SpatialReference"],options).then(
            ([Graphic,GraphicsLayer,Point,SpatialReference])=>{
                var pt = new Point(x,y,new SpatialReference(4326));
                if(!imgUrl){
                  var symbol = {
                    type: "picture-marker",
                    url: '/src/static/location.png',
                    width: "36px",
                    height: "36px"
                  };
                  var gra = new Graphic({
                    geometry:pt,
                    symbol:symbol,
                    attributes:{}
                  });
                  _self.viewObject.graphics.add(gra);
                }else{
                  var symbol = {
                    type: "picture-marker",
                    url: imgUrl,
                    width: "12px",
                    height: "12px"
                  };
                  var gra = new Graphic({
                    geometry:pt,
                    symbol:symbol,
                    attributes:{}
                  });
                  _self.viewObject.graphics.add(gra);
                }
                _self.viewObject.goTo({
                    target:pt,
                    zoom:12
                }).then((info)=>{

                })
            });
        },
        baseMapChange(val){//底图切换
			this.viewObject.popup.close();
			baseMapChangeHandler(this.mapObject,val);
		},
	}
}
</script>
<style>
@import url('/arcgisApi/4.7/esri/css/main.css');
/*屏蔽esri标注*/
.esri-ui .esri-attribution{
    display: none;
}
#mapContent .esri-ui .esri-popup{
	z-index: 11111;
}
#mapContent .esri-ui-top-left esri-ui-corner{
    padding-left: 14%;
}
#mapContent .esri-view-width-xlarge .esri-popup__main-container{
    width: 310px;
    border-radius: 5px;
    /* background-color: #e2e7f1e6; */
	background-color: #ffffffe6;
    max-height: 300px;
}
#mapContent .esri-popup__button--dock{
    display: none;
}
#mapContent .esri-popup__feature-buttons, .esri-popup__feature-buttons [role="button"]{
    display: none;
}
#mapContent .esri-popup__content{
    font-size: 14px;
    line-height: 25px;
    overflow-y: hidden;
}
#mapContent .esri-popup__position-container{
    border-radius: 13px;
}
#mapContent .esri-popup__header{
    /* background-color: #a2cae8; */
	background-color:#2a67df59;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    height: 32px;
}
#mapContent .esri-popup--aligned-top-center .esri-popup__pointer-direction{
    background-color: #e2e7f1bf;
}
#mapContent .esri-popup--aligned-bottom-center .esri-popup__pointer-direction{
    background-color: #e2e7f1bf;
}
#mapContent .esri-widget table tr td, .esri-widget table tr th{
    padding: 0px;
	width: 50%;
}
#mapContent tr:nth-child(odd){
	background-color: rgba(76,76,76,0.1);
}
#mapContent .esri-popup__header {
    position: relative;
    font-size: 12px;
    align-items: center;
    justify-content: space-between;
    display: flex;
    flex: 0 0 auto;
}
.esri-basemap-gallery__item-thumbnail{
    height: 60px;
    width: 80px;
}
</style>