<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>子图层控制</title>
<link href='../css/bootstrap.min.css' rel='stylesheet' />
<link href='../css/bootstrap-responsive.min.css' rel='stylesheet' />
<style type="text/css">
body{
margin: 0;
overflow: hidden;
background: #fff;
}
#map{
position: relative;
height: 510px;
border:1px solid #3473b7;
}
#toolbar {
position: relative;
padding-top: 5px;
padding-bottom: 10px;
}
.win_bg{background:#CCC; opacity:0.2; filter:alpha(opacity=20); position:absolute; left:0px; top:0px; width:100%; height:100%; z-index:998;}
.winTitle{background:#4192c9; height:20px; line-height:20px}
.winTitle .title_left{font-weight:bold; color:#FFF; padding-left:5px; float:left}
.winTitle .title_right{float:right; padding-right:3px;}
.winTitle .title_right a{color:#FFF; text-decoration:none; padding-right:3px;}
.winTitle .title_right a:hover{text-decoration:underline; color:#FF0000; padding-right:3px;}
.transferPreference {
border: 1px solid #D6E3F1;
height: 20px;
margin: 1px 30%;
padding: 0 12px;
}
.winContent{padding:5px; overflow-y:auto; height:550px;}
.popupWindow {
right:20px;
top:100px;
position: absolute;
width: 400px;
height: 600px;
border: 2px solid #D6E3F1;
background: #FFF;
z-index: 9999;
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="../leaflet/include-leaflet.js"></script>
<script src='../js/jquery.js'></script>
<script type="text/javascript">
var map = null;
var layer = null;
var url = null;
var tempLayerID = null,
host = document.location.toString().match(/file:\/\//)?"http://support.supermap.com.cn:8090":'http://' + document.location.host,
url =host+"/iserver/services/map-world/rest/maps/World";
getLayersInfo();
function show(){
$("#popupWin").css("display", "block");
}
function getLayersInfo() {
//获取地图状态参数必设,与服务器交互成功，得到子图层信息
//获取图层信息的方法是getLayersInfo
L.supermap
.layerInfoService(url)
.getLayersInfo(function(getLayersInfoEventArgs){
var subLayers = new Array();
if (getLayersInfoEventArgs.result) {
{
if (getLayersInfoEventArgs.result.subLayers) {
for (var j = 0; j < getLayersInfoEventArgs.result.subLayers.layers.length; j++) {
subLayers.push(getLayersInfoEventArgs.result.subLayers.layers[j]);
}
}
}
}
installPanel(subLayers);
});
}
//组装操作面板，显示子图层列表
function installPanel(subLayers) {
var layersList = "";
for (var i = 0; i < subLayers.length; i++) {
if (eval(subLayers[i].visible) == true) {
layersList += '<label class="checkbox" style="line-height: 28px; display: block"><input type="checkbox" class = "checkboxSel" id="layersList' + i + '" name="layersList" value="' + subLayers[i].name + '" checked=true title="是否可见" />' + subLayers[i].name + '</label>';
}
else {
layersList += '<label class="checkbox" style="line-height: 28px; display: block"><input type="checkbox" class = "checkboxSel" id="layersList' + i + '" name="layersList" value="' + subLayers[i].name + '" title="是否可见" />' + subLayers[i].name + '</label>';
}
}
showWindow(layersList);
$(".checkbox").click(setLayerStatus);
//样式为BootStrap框架设置
$(".checkbox").hover(function () {
$(this).addClass("label-success");
}, function () {
$(this).removeClass("label-success");
});
createTempLayer();
}
//创建临时图层来初始化当前地图显示
function createTempLayer() {
var params=new SuperMap.SetLayerStatusParameters();
layerStatusParameters = getLayerStatusList(params);
var callback=function(createTempLayerEventArgs){
console.log("hhh",createTempLayerEventArgs);
tempLayerID = createTempLayerEventArgs.result.newResourceID;
map = L.map('map', {
crs: L.CRS.EPSG4326,
center: [0, 0],
maxZoom: 18,
zoom: 1
});
layer=L.supermap.tiledMapLayer(url,{layersID:tempLayerID});
layer.addTo(map);
}
L.supermap
.layerInfoService(url)
.setLayerStatus(layerStatusParameters,callback);
}
//获取当前地图子图层状态信息
function getLayerStatusList(parameters) {
var layersList = document.getElementsByName("layersList");
for (var i = 0; i < layersList.length; i++) {
var layerStatus = new SuperMap.LayerStatus();
layerStatus.layerName = layersList[i].value;
layerStatus.isVisible = eval(layersList[i].checked);
parameters.layerStatusList.push(layerStatus);
}
//设置资源在服务端保存的时间，单位为分钟
parameters.holdTime = 30;
return parameters;
}
//子图层可见性控制
function setLayerStatus() {
var layersList = document.getElementsByName("layersList");
var str = "[0:";
for (var i = 0; i < layersList.length; i++){
if(eval(layersList[i].checked) == true)
{
if(i<layersList.length)
{
str += i.toString();
}
if(i<layersList.length-1)
{
str += ",";
}
}
}
str += "]";
//当所有图层都不可见时
if(str.length<5)
{
str = "[]";
}
layer.options.layersID = str;
//layer.redraw();
map.removeLayer(layer);
layer=null;
layer=L.supermap.tiledMapLayer(url,{layersID:str});
layer.addTo(map);
}
function showWindow(winMessage) {
if(document.getElementById("popupWin")) {
$("#popupWin").css("display", "block");
} else {
$("<div id='popupWin'></div>").addClass("popupWindow").appendTo($("#result"));
}
$("#popupWin").css("display", "none");
var str = "";
str += '<div class="winTitle" onMouseDown="startMove(this,event)" onMouseUp="stopMove(this,event)"><span class="title_left">World地图子�
leaflet子图层控制.rar
需积分: 0 153 浏览量
2019-10-30
09:31:49
上传
评论 2
收藏 1.72MB RAR 举报
leaflet子图层控制.rar （12个子文件） 
leaflet子图层控制 css 
bootstrap-responsive.min.css 16KB bootstrap.min.css 101KB js jquery.js 242KB html 
setlayerstatus.html 10KB leaflet include-leaflet.js 6KB workers TurfWorker.js 12KB iclient9-leaflet.css 326KB iclient9-leaflet.min.js 1.8MB iclient9-leaflet-es6.min.js 1000KB iclient9-leaflet-es6.js 3.54MB iclient9-leaflet.js 4.76MB iclient9-leaflet.min.css 312KB资源评论
