我要
提问
智能客服
首页 / 浏览问题 / 云GIS / 问题详情
如何同时实现iClient for Leaflet的多种功能
杨依菲
5EXP 2018年07月24日

想要在只定义一个url的情况下，实现多个iClient for Leaflet的功能，比如矢量瓦片和图层显隐性控制这两个功能，但是代码里面这两种map的定义方式是不一样的，矢量瓦片是这样的：

    var host = "http://127.0.0.1:8090";
    var map, selectId, selectLayerName, vectorLayer,
        url = host+"/iserver/services/map-tm100/rest/maps/vec@天地图";
    map = L.map('map', {
        center: {lon: 119.40, lat: 30.36},
		 crs: L.CRS.EPSG4326,
        maxZoom: 15,
        zoom:11
    });

图层控制的定义方式是这样的：

            var map;
            var layer;
            var url ;
            var tempLayerID ,
            host = document.location.toString().match(/file:\/\//)?"http://127.0.0.1:8090":'http://' + document.location.host,
            url =host+"/iserver/services/map-tm100/rest/maps/vec@天地图";

这两种定义方式有什么不同吗

5 个回答

您好，1.你发的这两种方式是一模一样的；2.你是不是转发的天地图？是的话你这个是栅格瓦片。
李熙y
4,524EXP 2018年07月24日
不是转发，我是添加了天地图作为我数据的底图然后发布的服务，这样也属于栅格瓦片吗？怪不得我的底图加载不出来。那既然是一模一样的，为什么我无法替换呢
杨依菲
5EXP 2018年07月24日
这种也属于栅格瓦片，你的数据是矢量数据，无法替换请给出更多报错或者其他信息，这么说的话我没法判断。
李熙y
4,524EXP 2018年07月24日

 网页上没有报错，叠加后矢量瓦片没有问题，图层显隐性框也存在，但是没有用了，点击按钮并不能实现图层显隐性切换。请问是哪里出问题了？

<!DOCTYPE html>
<html>
	<script type="text/javascript">
	        var map;
            var layer;
            var url ;
			var addLayer ;
            var tempLayerID ,
            host = document.location.toString().match(/file:\/\//)?"http://xxxxxx":'http://' + document.location.host,
            url =host+"xxxxxxxx";
		function init(){
                getLayersInfo();}
            function show(){
                $("#popupWin").css("display", "block");}
            function getLayersInfo() {
                var getLayersInfoService = new SuperMap.REST.GetLayersInfoService(url);
                getLayersInfoService.events.on({ "processCompleted": getLayersInfoCompleted});
                getLayersInfoService.processAsync();}
            var subLayers = new Array();
            function getLayersInfoCompleted(getLayersInfoEventArgs) {
                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);

                $(".checkbox").hover(function () {
                    $(this).addClass("label-success");
                }, function () {
                    $(this).removeClass("label-success");});
                createTempLayer();}
			            function createTempLayer() {
                var layerStatusParameters = new SuperMap.REST.SetLayerStatusParameters();
                layerStatusParameters = getLayerStatusList(layerStatusParameters);
                var setLayerStatusService = new SuperMap.REST.SetLayerStatusService(url);
                setLayerStatusService.events.on({ "processCompleted": createTempLayerCompleted});
                setLayerStatusService.processAsync(layerStatusParameters);}
            function getLayerStatusList(parameters) {
                var layersList = document.getElementsByName("layersList");
                for (var i = 0; i < layersList.length; i++) {
                    var layerStatus = new SuperMap.REST.LayerStatus();
                    layerStatus.layerName = layersList[i].value;
                    layerStatus.isVisible = eval(layersList[i].checked);
                    parameters.layerStatusList.push(layerStatus);}
                parameters.holdTime = 30;
                return parameters;}
            function createTempLayerCompleted(createTempLayerEventArgs) {
                tempLayerID = createTempLayerEventArgs.result.newResourceID;
                layer = new SuperMap.Layer.TiledDynamicRESTLayer("tm9", url, {transparent: true, cacheEnabled: false, redirect: true, layersID: tempLayerID}, {maxResolution: "auto", bufferImgCount: 0});
                layer.bufferImgCount = 0;
                layer.events.on({"layerInitialized": addLayer});}
				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.params.layersID = str;
					layer.redraw();}
				function setLayerStatusCompleted(setLayerStatusEventArgs) {
					layer.redraw();}
				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">天目山地图子图层</span><span class="title_right"><a href="javascript:closeWindow()" title="关闭窗口">关闭</a></span><br style="clear:right"/></div>';  
					str += '<div class="winContent" style="overflow-y:auto;height:400px;">';
					str += winMessage;
					str += '</div>';
					$("#popupWin").html(str);
					document.getElementById("popupWin").style.width = "250px";
					document.getElementById("popupWin").style.height = "432px";}
				window.closeWindow = function(){$("#popupWin").css("display", "none");}
				window.startMove = function(o,e){
					var wb;
					if(SuperMap.Browser.name === "msie" && e.button === 1) wb = true;
					else if(e.button === 0) wb = true;
					if(wb){
						var x_pos = parseInt(e.clientX-o.parentNode.offsetLeft);
						var y_pos = parseInt(e.clientY-o.parentNode.offsetTop);
						if(y_pos<= o.offsetHeight){
							document.documentElement.onmousemove = function(mEvent){
								var eEvent = (SuperMap.Browser.name === "msie")?event:mEvent;
								o.parentNode.style.left = eEvent.clientX-x_pos+"px";
								o.parentNode.style.top = eEvent.clientY-y_pos+"px";}}}}
				window.stopMove = function(o,e){document.documentElement.onmousemove = null;}
	</script>	
</head>
<body onLoad="init()" style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
	 <div id='result' class='container'></div>
	<div id="toolbar">
		<input type="button" class="btn" value="图层控制" onClick="show()" />
    </div>
	<div id="map" style="margin:0 auto;width:80%;height: 80%"></div>
	<script type="text/javascript" src="dist/include-leaflet.js"></script>
	<script type="text/javascript">
		var  selectId, selectLayerName, vectorLayer,
		map = L.map('map', {
			center: {lon: 119.40, lat: 30.36},
			 crs: L.CRS.EPSG4326,
			maxZoom: 17,
			zoom:11
		});
		vectorLayer = L.supermap.tiledVectorLayer(url, {
			cacheEnabled: true,
			returnAttributes: true,
			attribution: ""
		}).addTo(map);
		vectorLayer.on('click', function (evt) {
			var id = evt.layer.properties.id;
			var layerName = evt.layer.layerName;
			clearHighlight();
			selectId = id;
			selectLayerName = layerName;
			var selectStyle = {
				fillColor: '#800026',
				fillOpacity: 0.5,
				stroke: true,
				fill: true,
				color: 'red',
				opacity: 1,
				weight: 2};
			vectorLayer.setFeatureStyle(id, layerName, selectStyle);
		});
		function clearHighlight() {
			if (selectId && selectLayerName) {
				vectorLayer.resetFeatureStyle(selectId, selectLayerName);
			}
			selectId = null;
			selectLayerName = null;
		}
	</script>
</body>
</html>

可以帮我看一下吗，谢谢！！！！

杨依菲
5EXP 2018年07月24日
因为图层显隐是控制地图内的要素现因，而你的天地图实际是个栅格瓦片图，所以是不能控制里边内容显隐的
李熙y
4,524EXP 2018年07月24日
抱歉，可能是我没有描述清楚。我的数据是矢量的，天地图只是作为底图。分开使用矢量瓦片和图层显隐性功能是没有问题的，可以正常控制图层显隐。但是合起来的时候就不行了。
杨依菲
5EXP 2018年07月25日

可以再解释一下吗，我试了好多次，还是不行crying

杨依菲
5EXP 2018年07月25日
1.你的矢量数据发了地图服务了吗？

2.你分开使用图层显隐性功能是没有问题的这个是怎么用的？
李熙y
4,524EXP 2018年07月25日
问题成功解决了。谢谢！
杨依菲
5EXP 2018年07月26日
这个问题是怎么解决的能告诉我吗？代码也发一下
erge2
39EXP 2018年10月11日
代码暂时找不出来、这两种定义的方式是一样的，之所以矢量瓦片功能和图层显隐性功能无法整合是因为这两个我们之前用的接口不同，一个用的是for leaflet，还有一个用的是别的，所以不能整合，当时超图工作人员建议我们用leaflet的接口做图层显隐性。
羊一飞
2EXP 2018年10月11日
等您有空，能帮忙找一下代码吗？多谢！
erge2
39EXP 2018年10月11日
iiPhone 11 Kılıf
https://www.liveinternet.ru/users/allach0mp8/post463202927// - iPhone 11 Kılıf!..
Kamitob
15EXP 2019年12月02日
iiPhone 11 Kılıf
https://www.liveinternet.ru/users/allach0mp8/post463202927// - More info...
Kamitob
15EXP 2019年12月02日
iiPhone 11 Kılıf
https://www.liveinternet.ru/users/allach0mp8/post463202927// - Click here>>>
Kamitob
15EXP 2019年12月04日
Новое <a href=https://slides.com/larsberber/>казино booi</a>
Онлайн казино <a href=https://slides.com/larsberber/>Booi</a>
Посетить сайт автора <a href=https://slides.com/larsberber/>slides</a>
Вы момете перейти по ссылке и ознакомиться самостоятельно: <a href=https://slides.com/larsberber/>]Источник</a>
Персональный сайт автора <a href=https://slides.com/larsberber/>https://slides.com/larsberber/</a>
EricApar...
5EXP 2020年06月08日

智能推荐

热门文章
查看更多>
关注我们
超图软件官网 SuperMap Online 地图慧 帮助中心 备案信息 技术资源中心
...