sgyzt-front/public/map-easy-client/map-easy-client.js

var mapConfig = window[window.EASYMAP_CONFIG['mapConfigName']];
var xzxqLayerGruop ;
function initMap(divId){
	// console.log(mapConfig)
  if ( mapConfig.option.crs === 'EPSG4326' ){
      mapConfig.option.crs = L.CRS.EPSG4326;
  }else if (mapConfig.option.crs === 'EPSG3857'){
      mapConfig.option.crs = L.CRS.EPSG3857;
  }
	var map = L.map(divId,mapConfig.option);
	// newLayerAddToMap(mapConfig.layers[0],map);
	initControl(map);
	initMapEvent(map);
	// console.log(map.pm)
	map.pm.setLang('zh');
	window.map = map;


	return map;

}
function initControl(map){

	setLayerControl(map);
	L.control.zoom({position: 'bottomright',zoomInTitle:'放大',zoomOutTitle:'缩小'}).addTo(map);
	var topright = L.control.attribution({position: 'topright',prefix:''}).addTo(map);
	var rightTopTool1 = '<div id="app-right-top" style="width: 302px;"> <div id="tool-container" class="toolscontainer"><div class="ui3-control-wrap clearfixs" id="ui3_control_wrap">';
	var citychangeopt2 = '<div class="citychangeopt ui3-city-change-wrap" id="ui3_city_change" onclick="selectCity(this)" style="width: 96px;" ><span class="adjustpadding"></span><a style="width: 72px;text-align: center;" href="#" onclick="return false" onclick="return false" class="ui3-city-change-inner ui3-control-shadow"><div id="toolCity" data-code="460000000" level="1" style="width: 56px;overflow: hidden;white-space: nowrap;"  >海南省</div><em style="margin-top: -20px;" ></em></a></div>';
	var citychangeopt2_1 = '';
	var leftfloat3 = '<div class="left float-l"><b class="tool-gap"></b>';
	var ht4_01 = '<div class="trafficopt" onclick="traffic(this,\'ht\')" style="width: 40px;"><span id="traffic_control" style="background-image: none;width: 10px;" class="last traffic"></span><i>海图</i></div><b></b>';
	var trafficopt4 = '<div class="trafficopt" onclick="traffic(this,\'bj\')" style="width: 40px;"><span id="traffic_control"  style="background-image: none;width: 10px;" class="last traffic"></span><i>标注</i></div><b></b>';
	var boxopt5 = '<div class="boxopt" onclick="boxopt(this)" style="width: 87px;" ><span id="util_control" class="boxutils boxicon"></span><i class="boxtext">工具箱</i><em class=""></em></div>';
	var detail_box6 = '<div class="detail-box" style="display: none;"><ul id="boxul" class="boxinfo"><li class="map-measure"  onclick="measure(this,\'line\')"><span class="last measure"></span><i>测距</i></li><li class="map-mark" onclick="mark(this)"> <span class="last mark"></span> <i>标记</i></li> </ul></div>';
	var endL7 = '</div></div></div></div>';
	// topright.addAttribution(rightTopTool1+citychangeopt2+leftfloat3+ht4_01+trafficopt4+boxopt5+detail_box6+endL7 + getCityListHtml() );
	xzxqLayerGruop = L.layerGroup();
	map.addLayer(xzxqLayerGruop);
  var position = L.control.attribution({position: 'bottomright',prefix:''}).addTo(map);
  position.getContainer().style="position:relative;right: 6px;bottom: 41px;background: 0;";
  position.getContainer().onclick=function(){
    map.setView(mapConfig.option.center,mapConfig.option.zoom);
  };
  position.addAttribution("<div style='width: 26px;height: 26px;overflow: hidden;background-color: #fff;text-align: center;cursor: pointer;line-height: 26px;float: left;box-shadow: 1px 2px 1px rgba(0,0,0,.15);border-radius: 4px;'>" +
    "<img src="+mapConfig.positionImgUrl+" style='position: relative;vertical-align: middle;right: 8px;' />"
    +"</div>");
	//document.getElementById('selCityHotCityId').innerHTML = getCityList();
  let sa = L.control.scale({position: 'bottomright',imperial:false}).addTo(map);
  sa.getContainer().style="top:175px;right:65px;";
}
function mark(thi){

	//boxopt(document.getElementsByClassName('boxopt')[0]);
	var box = document.getElementsByClassName('boxopt')[0];

	if( box.className.indexOf('box-click') !== -1 )
	{
		//thi.className = thi.className+' box-click';
		box.childNodes.forEach(function(e){
			if( e.className.indexOf('boxtext') !== -1 )
			{
				if( e.innerText ==='工具箱' )
				{
					box.className = box.className+' box-mark';
					e.innerText = '标记';
					map.pm.addControls({
						position: 'topright',
					});
				}
			}
		});
		document.getElementsByClassName('detail-box')[0].style.display = 'none';
	}
}
function measure(thi,type){

	boxopt(document.getElementsByClassName('boxopt')[0]);
	var map = window.map;
	//map.measure = [];
	if( map.measureLayer && map.hasLayer(map.measureLayer) )
	{
		map.removeLayer(map.measureLayer);
	}
	if( !map.measure )
	{
		map.measure = [];
	}else{
		map.measure.forEach(function(e){
			if( e.layer ){
				e.layer.closeTooltip();
			}
		});
		map.measure = [];
	}

	if( type ==='line' )
	{
		map.on('pm:create', e => {
			map.measureLayer = e.layer;
			if( e.shape === "Line")
			{
				map.pm.disableDraw('Line');
				map.off('pm:drawstart');
				if(map.measureLayer){
					map.measureLayer.off('pm:vertexadded');
				}
			}
		});

		map.on('pm:drawstart', ({ workingLayer }) => {
		  workingLayer.on('pm:vertexadded', e => {
			if( e.shape === "Line")
			{
				if(map.measure.length == 0)
				{
					var marker = L.marker(e.latlng);
					marker.bindTooltip('起点',{direction:'top',offset:[0,15]});
					//console.log(e.marker);
					map.openTooltip(marker.getTooltip(),marker.getLatLng());
					map.measure.push({layer:marker});
				}else{

					var m = parseFloat(map.distance(map.measure[map.measure.length-1].layer.getLatLng(),e.latlng).toFixed(2));
					if(map.measure[map.measure.length-1].lastDistance){
						m = m + parseFloat(map.measure[map.measure.length-1].lastDistance);
					}
					var marker = L.marker(e.latlng);
					var dw = '米',gl=0;
					if( m/1000 >= 1 )
					{
						gl = m/1000;
						marker.bindTooltip(gl.toFixed(2)+'公里',{direction:'top',offset:[0,15]});
					}else{
						marker.bindTooltip(m+'米',{direction:'top',offset:[0,15]});
					}
					map.openTooltip(marker.getTooltip(),marker.getLatLng());
					map.measure.push({layer:marker,lastDistance:m});
				}
			}

		  });
		});
		map.pm.disableDraw('Line');
		map.pm.enableDraw('Line', {});
	}

}

function boxopt(thi){

	if(thi.className.indexOf('box-mark') !== -1){
		map.pm.removeControls();
		thi.childNodes.forEach(function(e){
			if( e.className.indexOf('boxtext') !== -1 )
			{
				if( e.innerText ==='标记' )
				{
					e.innerText = '工具箱';
				}
			}
			if( e.className.indexOf(' active') === -1 )
			{
				e.className = e.className+' active';
			}else{
				e.className = e.className.replace('active' , '');
			}
		});
		thi.className = thi.className.replace('box-click' , '');
		thi.className = thi.className.replace('box-mark' , '');
		document.getElementsByClassName('detail-box')[0].style.display = 'none';
		return ;
	}
	if( thi.className.indexOf('box-click') === -1 )
	{
		thi.className = thi.className+' box-click';
		document.getElementsByClassName('detail-box')[0].style.display = 'block';
	}else{
		thi.className = thi.className.replace('box-click' , '');
		document.getElementsByClassName('detail-box')[0].style.display = 'none';
	}
	thi.childNodes.forEach(function(e){
		if( e.className.indexOf(' active') === -1 )
		{
			e.className = e.className+' active';
		}else{
			e.className = e.className.replace('active' , '');
		}
	});
}

function getCityListHtml(){
	var mapPopup1 = '<div class="map_popup " style="width: 302px; display: none; height: auto; right: 5px; top: 57px;"><div class="popup_main">';
	var title2 = '<div class="title"><p ><span style="white-space: nowrap;">当前位置：<span id="curNav"><a id="curCityInfo" data-code="460000000" pcode="" onclick="cityListClick(\'460000000\',1,\'海南省\',\'\')" level="1" >海南省</a></span></span></p></div>';
	var content3 = '<div class="content" style="height: 100%; overflow: hidden;"> <div class="sel_city blueC">';
	var selCityTop4 = '<div id="selCityTop" style="_width:100%;"><div id="selCityHotCityId" class="sel-city-hotcity">';

	var cityList5 = initCityList(getHnCityTree().data);
	//var cityList5 = '<a href="javascript:void(0)" onclick="" data-code="460100000" level="2"  name="海口市" style="margin-right:5px;*margin-right:1px;">海口市</a>'+
	//				'<a href="javascript:void(0)" data-code="460200000" level="2" name="三亚市" style="margin-right:5px;*margin-right:1px;">三亚市</a>';
	var endHtml6 = '</div></div></div></div><button onclick="closeMapPoup()" id="popup_close" title="关闭"></button></div></div>';
	return mapPopup1 + title2 + content3+selCityTop4+cityList5+endHtml6;
}
function cityListClick(dataCode , level,name,pcode){

	//var cityTree = getHnCityTree();
	var curNav = document.getElementById('curNav');
	var toolCity = document.getElementById('toolCity');
	var curCityInfo = document.getElementById('curCityInfo');//'<span data-code="'+dataCode+'" level="'+level+'" >'+name+'</span>'

	if( dataCode === curCityInfo.getAttribute('data-code') )
	{
		return ;
	}

	if(level > curCityInfo.getAttribute('level') )
	{
		var newItem = document.createElement('a');
		newItem.setAttribute('data-code',curCityInfo.getAttribute('data-code')) ;
		newItem.setAttribute('pcode',curCityInfo.getAttribute('pcode'));
		newItem.setAttribute('level',curCityInfo.getAttribute('level'));
		newItem.setAttribute('onclick',curCityInfo.getAttribute('onclick'));
		newItem.innerText = curCityInfo.innerText+">>";
		curNav.insertBefore(newItem,curNav.childNodes[curNav.childNodes.length-1]);
		curCityInfo.setAttribute('data-code' ,dataCode);
		curCityInfo.setAttribute('name' ,name);
		curCityInfo.setAttribute('level' ,level);
		curCityInfo.setAttribute('pcode' ,pcode);
		curCityInfo.setAttribute('onclick','cityListClick(\''+dataCode+'\','+level+',\''+name+'\',\''+pcode+'\')');
	}else if(level < curCityInfo.getAttribute('level') && curNav.childNodes && curNav.childNodes.length > 0 ){
		for( var i = curNav.childNodes.length -1 ; i >= 0; i-- )
		{
			if(curNav.childNodes[i] && curNav.childNodes[i].getAttribute('level') > level )
			{
				curNav.removeChild(curNav.childNodes[i]);
			}
		}
		curNav.childNodes[curNav.childNodes.length -1].setAttribute('id' ,'curCityInfo');
		curCityInfo = document.getElementById('curCityInfo');
		var selCityHotCityId = document.getElementById('selCityHotCityId');
		for( var i = 0 ; i < selCityHotCityId.childNodes.length ; i++ )
		{
			selCityHotCityId.childNodes[i].style.display = 'none';
		}

	}


	toolCity.setAttribute('data-code' ,dataCode);
	toolCity.setAttribute('name' ,name);
	toolCity.setAttribute('level' ,level);
	toolCity.setAttribute('pcode' ,pcode);
	toolCity.innerText = name;
	curCityInfo.innerText = name;

	var dataCodeCls = document.getElementsByClassName('datacode'+dataCode);
	if(dataCodeCls && dataCodeCls.length > 0 )
	{
		document.getElementsByClassName('datacode'+dataCode)[0].style.display = 'block';
		var pcodeEle = document.getElementsByClassName('datacode'+pcode);
		if( pcode && pcode !== '' && pcodeEle && pcodeEle.length > 0 && level < 5 )
		{
			document.getElementsByClassName('datacode'+pcode)[0].style.display = 'none';
		}
	}

	//加载辖区边界
	drawBoundOnMap(dataCode);

}

function drawBoundOnMap(datacode){

	var map = window.map;
	//console.log(mapConfig.xq_url.replace('{{datacode}}','1CHN'+datacode));
	var httpXml = createXMLHttpRequest();
	httpXml.open('get', mapConfig.xq_url.replace('{{datacode}}','1CHN'+datacode), true);
	httpXml.send(null);
	httpXml.onreadystatechange = function() {
        if(httpXml.readyState == 4 && httpXml.status == 200) {
          // xzxq.push(httpXml.responseText);
		  var map = window.map;
		  xzxqLayerGruop.clearLayers();
		  var data = JSON.parse(httpXml.responseText);
		  if( data && data.result && data.result.length > 0 )
		  {
		   	var result = data.result;
			var boundGeo ;
		    for (var i = 0; i < result.length; i++) {
				var tempData = result[i];
				var geometry = omnivore.wkt.parse(tempData.geometry);
				geometry.setStyle({fill:false});
				geometry.addTo(xzxqLayerGruop);
				if( !boundGeo  )
				{
					boundGeo = geometry.getBounds();
				}else{
					boundGeo.extend(geometry.getBounds());
				}
			}
			map.fitBounds(boundGeo);
		  }

        }
    };
}

function initCityList(data){

	//var tree = getHnCityTree();
	var htmlList= '';
	//var childrenList = '';
	for( var i in data )
	{
		if( i == 0 && (data[i].level === 2 || data[i].level === 3 )  )
		{
			htmlList += '<div class="datacode'+data[i].pcode+'">';
		}
		if(i == 0 && data[i].level > 3){
			htmlList += '<div  style="display:none;" class="datacode'+data[i].pcode+'">';
		}
		htmlList += '<a href="javascript:void(0)" onclick="cityListClick(\''+data[i].code+'\',\''+data[i].level+'\',\''+data[i].name+'\',\''+data[i].pcode+'\')" data-code="'+data[i].code+'" level="'+data[i].level+'"  name="'+data[i].name+'" pcode="'+data[i].pcode+'">'+data[i].name+'</a>';
		if( i == data.length -1  )
		{
			htmlList += '</div>';
		}
		//加载辖区边界
		//drawBoundOnMap(data[i].code);

	}

	for( var i in data )
	{
		if( data[i].childrens.length > 0 )
		{
			htmlList += initCityList(data[i].childrens);
			//htmlList += '<div style="display:none;" class="datacode'+data[i].code+'" >'+initCityList(data[i].childrens)+'</div>';
		}
	}
	return htmlList;

}
function selectCity(thi){

	if( thi.className.indexOf('ui3-city-change-click') === -1 )
	{
		thi.className = thi.className+' ui3-city-change-click';
		document.getElementsByClassName('map_popup')[0].style.display = 'block';
	}else{
		thi.className = thi.className.replace('ui3-city-change-click' , '');
		document.getElementsByClassName('map_popup')[0].style.display = 'none';
	}

}
function closeMapPoup(){

	document.getElementById('ui3_city_change').className = document.getElementById('ui3_city_change').className.replace('ui3-city-change-click' , '');
	document.getElementsByClassName('map_popup')[0].style.display = 'none';
}
function traffic(thi,name){
	var map = window.map;
	if(!map[name]){
		for( var i in mapConfig.overlayMaps ){

			if( name === mapConfig.overlayMaps[i].name  ){
				if(!map[name]){
					map[name] = {};
				}
				map[name].bjLayer = newLayerByType(mapConfig.overlayMaps[i]).addTo(map);
				map[name].flag = true;
			}

		}
		thi.children[0].className = thi.children[0].className+' active';
		thi.children[1].className = 'active';
	}else{
		if(map[name]&&!map[name].flag)
		{
			map[name].bjLayer.addTo(map);
			map[name].flag = true;
			thi.children[0].className = thi.children[0].className+' active';
			thi.children[1].className = 'active';
		}else{
			map[name].flag = false;
			if(map.hasLayer(map[name].bjLayer)){
				map.removeLayer(map[name].bjLayer);
			}
			thi.children[0].className = thi.children[0].className.replace('active','');
			thi.children[1].className = '';
		}

	}
}

//度转度°分′秒″
function ToDegrees(val) {
	val = val.toString();
    if (typeof (val) == "undefined" || val == "") {
        return "";
    }
    var i = val.indexOf('.');
    var strDu = i < 0 ? val : val.substring(0, i);//获取度
    var strFen = "0";
    var strMiao = "0";
	var preMiao = "0";
	var sufMiao = "0";
    if (i > 0) {
        var strFen = "0" + val.substring(i);
        strFen = strFen * 60 + "";
        i = strFen.indexOf('.');
        if (i > 0) {
            strMiao = "0" + strFen.substring(i);
            strFen = strFen.substring(0, i);//获取分
            strMiao = strMiao * 60 + "";
            i = strMiao.indexOf('.');
            strMiao = strMiao.substring(0, i + 4);//取到小数点后面三位
            strMiao = parseFloat(strMiao).toFixed(2);//精确小数点后面两位

			var j = strMiao.indexOf(".")
			if(j>0){
				preMiao = strMiao.substring(0,j)
				sufMiao = strMiao.substring(j+1)
			}
        }	
    }
    return strDu + "°" + (strFen.length == 2 ? strFen : "0"+strFen) + "'" + (preMiao.length == 2 ? preMiao : "0"+preMiao)+"."+sufMiao+'"';
}

var jwd = "";
function initMapEvent(map){
	map.on('mousemove',
        function(e) {
          var x = e.latlng.lat;
          var y = e.latlng.lng;
          jwd = ToDegrees(y) + "E&nbsp;&nbsp;&nbsp;" + ToDegrees(x)+"N";
		  document.getElementById('jwd').style.removeProperty("display")
		  document.getElementById('jwd').innerHTML = jwd+"&nbsp;&nbsp;&nbsp;图级："+window.map.getZoom();

        });
		map.on('zoomend',
        function(e) {
			// console.log(e)
			var target = e.target
			// var latlng = target._animateToCenter
          	// var x = latlng.lat;
          	// var y = latlng.lng;
			var zoom = target._zoom
          	// var jwd = ToDegrees(y) + "E&nbsp;&nbsp;&nbsp;" + ToDegrees(x)+"N";
		  	document.getElementById('jwd').style.removeProperty("display")
		  	document.getElementById('jwd').innerHTML = jwd+"&nbsp;&nbsp;&nbsp;图级："+zoom;

        });
	map.on('click', function(e) {
                var event = e.originalEvent;
				map.eachLayer(function(layer){
					if( layer && layer.type === 'GWVTAnno' )
					{
						var feature =  layer.getFeatureByXY(event.x,event.y);
						if(feature){
							layer.bindTooltip(feature.label).openTooltip(e.latlng);
						}
					}

				});

	});
  // map.fire map.initControlLayer

	/*map.on('pm:create', e => {
		console.log(e.layer);
		console.log(e.layer.getBounds());
		console.log(e.layer.getLatLngs()[0].toString());
		console.log(e.layer.getLatLngs()[0][0].toString());

		});		*/

}

var layerArr=[]
function clickImg(layer){

	for ( var i = 0 ; i < layerArr.length ; i++ )
	{
		document.getElementById(layerArr[i]).removeAttribute("style");
  	}
	layerArr.push(layer)
	document.getElementById(layer).style.borderStyle="solid";
	document.getElementById(layer).style.borderColor="yellow";
	layerArr = [...new Set(layerArr)];	
}

function setLayerControl(map){

	var layerHtml = '',currentLayerHtml;
	var baseMaps = {},overlayMaps={};
	var firstMap = "sl"
	for( var i in mapConfig.layers )
	{
		var layer = mapConfig.layers[i];
		baseMaps["<div class='layer-control-label' ><img id=\""+layer.mapType+"\" src='"+layer.imgUrl+"'  onclick=\"clickImg('"+layer.mapType+"')\"/> <span  onclick=\"clickImg('"+layer.mapType+"')\">"+layer.name+"</span></div>"] = newLayerGroup(layer);
		if(i === "0"){
			firstMap = layer.mapType
		}
	}
	/*for( var i in mapConfig.overlayMaps )
	{
		var layer = mapConfig.overlayMaps[i];
		overlayMaps[layer.name] = newLayerGroup(layer);
	}*/
	var layerControl = L.control.layers(baseMaps, overlayMaps,{position:'bottomright'}).addTo(map);
	layerControlContailner= layerControl.getContainer();
	//layerControlContailner.style.height = '36px';
	layerControlContailner.style['background-color'] = 'rgba(255,255,255,.8)';
	layerControlContailner.style['transition-property'] = 'width,background-color';
	layerControlContailner.style['transition-duration'] = '.4s';
	layerControlContailner.children[0].width='50px';
	layerControlContailner.children[0].height='62px';
	layerControlContailner.children[1].children[0].style.display = '-webkit-inline-box';
	setControlImg(map)
  map.addLayer(layerControl._layers[0].layer);
  var inRedioDOM = document.getElementsByName('leaflet-base-layers');
  for ( var i = 0 ; i < inRedioDOM.length ; i++ )
	{
    inRedioDOM[i].style.display = 'none';
  }
  	clickImg(firstMap)
}
function setControlImg(map){
	map.on('baselayerchange',function(res){
		// console.log(res.layer.setZIndex)
		var src = $(res.name).find('img').attr('src')
		// console.log($('.leaflet-control-layers-toggle'))
		$('.leaflet-control-layers-toggle').css({
			'background-image':'url('+src+')'
		})
	})
	$('.leaflet-control-layers-toggle').css({
		'background-image':'url('+mapConfig.layers[0].imgUrl+')'
	})
}
function newLayerAddToMap(layerConfig,map){
	map.addLayer(newLayerGroup(layerConfig));

}
function newLayerGroup(layerConfig){
	var layerGroup = L.layerGroup();
	// layerGroup.setZIndex(10)
	layerGroup.addLayer(newLayerByType(layerConfig));
	if(layerConfig.subLayer && layerConfig.subLayer.length > 0 ){

		for( var s in layerConfig.subLayer )
		{
			layerGroup.addLayer(newLayerByType(layerConfig.subLayer[s]));
		}
	}
	return layerGroup;
}
function newLayerByType(layerConfig){

	var layer;
	if(layerConfig.type === 'wmts')
	{
		layer = new L.tileLayer.wmts( layerConfig.url, layerConfig.option );
	}else if(layerConfig.type === 'wms')
	{
		layer = new L.tileLayer.wms(layerConfig.url, layerConfig.option);
	}else if(layerConfig.type ==='GXYZ'){

		layer = new L.GXYZ(layerConfig.url,layerConfig.option);
	}else if(layerConfig.type ==='GWVTAnno'){
		layer = new L.GWVTAnno(layerConfig.option);
        var dataSource = new Custom.URLDataSource();
            dataSource.url = layerConfig.url;
            layer.addDataSource(dataSource);
	}else if(layerConfig.type ==='gd'){
    layer = L.tileLayer(
      layerConfig.url,
      layerConfig.option
    )
  }
	layer.type = layerConfig.type;
	return layer ;

}
function doXHR(url,callback){
	var httpXml = createXMLHttpRequest();
	httpXml.open('get', url, true);
	httpXml.send(null);
	httpXml.onreadystatechange = function() {
        if(httpXml.readyState == 4 && httpXml.status == 200) {
		  var data = JSON.parse(httpXml.responseText);
		  if(callback){
			  callback(data);
		  }
        }
    };
}
function createXMLHttpRequest() {
        var xmlHttp;
        try{
            xmlHttp = new XMLHttpRequest();
        } catch (e) {
            // 适用于IE6
            try {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                // 适用于IE5.5，以及IE更早版本
                try{
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e){}
            }
        }
        return xmlHttp;
    }