首页 / 浏览问题 / 云GIS / 问题详情
图层上点击弹窗
91EXP 2017年04月05日

我在底图上有个点符号,上面还盖着一个半透明的等值面图。我想点击这个点弹出该店相关的信息,通过手动添加矢量图层的方式可以实现,我想知道这种TiledDynamicRESTLayer怎么实现该功能。

关闭重复的问题: urfgrid怎么取不到数据

2 个回答

您好!如果是 TiledDynamicRESTLayer 的话有两种方式:

1、可以用utfgrid来实现

可以参考范例:http://support.supermap.com.cn:8090/iserver/iClient/forJavaScript/examples/examples.html#utfGridLayer

2、通过几何查询,然后响应弹窗事件

663EXP 2017年04月05日
什么是utfgrid?
我的点是背景图层中的众多数据集中的一个,这个怎么搞呢?
UTFGrid本质上是基于JSON的ASCII 码’字符画’与属性数据的结合,所以它不能被可视化渲染。当需要实时查询地图上某些地物属性并且地物数量很大时,同时不希望实时的与服务器交互以获取属性信息,可以通过UTFGrid图层及时返回属性信息;所以你的这个需求可以用utfgrid来做
这个没事,将你代码里面的layerName设置成你需要操作的那个子图层名就可以了,那个图层就包含数据集信息

请问我的代码有什么问题吗?

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src="./assets/libs/sm/libs/SuperMap.Include.js"></script>
  <script type="text/javascript">
    <!--
    //声明变量map、layer、url
    var map, layer, layerImage, vectorLayer, themeLayer, utfgrid,utfgrid2,
      url = ["http://localhost:8090/iserver/services/map-baidu/rest/maps/normal",
        "http://localhost:8090/iserver/services/map-reservoir2/rest/maps/lc@image",
        "http://localhost:8090/iserver/services/map-OSM/rest/maps/normal",
        "http://localhost:8090/iserver/services/map-reservoir2/rest/maps/WatchPoint@data",
		"http://localhost:8090/iserver/services/map-LinCangDiTu/rest/maps/Level17@testB",
		"http://localhost:8090/iserver/services/map-reservoir/rest/maps/isoMap"
      ];
    //创建地图控件
    function init() {
      map = new SuperMap.Map("map", {
        controls: [
          new SuperMap.Control.ScaleLine(),
          //new SuperMap.Control.Zoom(),
          new SuperMap.Control.LayerSwitcher(),
          new SuperMap.Control.Navigation({ //添加导航控件到map
            dragPanOptions: {
              enableKinetic: true //拖拽动画
            }
          })
        ],
        allOverlays: true
      });
      //初始化复杂缩放控件类
      panzoombar = new SuperMap.Control.PanZoomBar();
      // 是否固定缩放级别为[0,16]之间的整数,默认为false
      panzoombar.forceFixedZoomLevel = true;
      //是否显示滑动条,默认值为false
      panzoombar.showSlider = true;
      /*点击箭头移动地图时,所移动的距离占总距离(上下移动的总距离为高度,左右移动的总距离为宽度)
      的百分比,默认为null。 例如:如果slideRatio 设为0.5, 则垂直上移地图半个地图高度.*/
      panzoombar.slideRatio = 0.5;
      //设置缩放条滑块的高度,默认为120
      panzoombar.sliderBarHeight = 180;
      //设置缩放条滑块的宽度,默认为13
      panzoombar.sliderBarWidth = 17;
      map.addControl(panzoombar);


      //创建分块动态REST图层,该图层显示iserver 8C 服务发布的地图,
      //其中"world"为图层名称,url图层的服务地址,{transparent: true}设置到url的可选参数
      layer = new SuperMap.Layer.TiledDynamicRESTLayer("地图", url[4], {
        cacheEnabled: true, transparent: true
      }, {
        maxResolution: "auto"
      });


	utfgrid = new SuperMap.Layer.UTFGrid("雨量站", url[4],
	{
		layerName: "雨量站@testB",
		utfTileSize: 256,
		pixcell: 8,
		isUseCache: true
		},
		{
		utfgridResolution: 8
	});

	utfgrid2 = new SuperMap.Layer.UTFGrid("雨量水位站", url[4],
	{
		layerName: "雨量水位站@testB",
		utfTileSize: 256,
		pixcell: 8,
		isUseCache: true
		},
		{
		utfgridResolution: 8
	});


    layer.events.on({
        "layerInitialized": addLayer
      });

	control = new SuperMap.Control.UTFGrid({
		layers: [utfgrid, utfgrid2],
		callback: callback,
		//handlerMode: "click"
	});
	map.addControl(control);

	function callback(infoLookup, loc, pixel) {
		console.log("infoLookup", infoLookup);
		console.log("loc", loc);
		console.log("pixel", pixel);
		if (infoLookup) {
			var info;
			for (var idx in infoLookup) {
				info = infoLookup[idx];
				if (info && info.data) {
					console.log("infoLookup", infoLookup);
					console.log("loc", loc);
					console.log("pixel", pixel);
				}
			}
		}
	}

      vectorLayer = new SuperMap.Layer.Vector("Vector Layer");

      var callbacks = {
        click: onSelected
      };
      try {
      var selectFeature = new SuperMap.Control.SelectFeature(vectorLayer, {
        callbacks: callbacks
      });
      map.addControl(selectFeature);
      selectFeature.activate();
      } catch(ex) {
        console.log(ex);
      }

    }

	function addThemeLayer() {
		map.addLayer(themeLayer);
		themeLayer.setOpacity(0.4);
	}
    var infowin;

    function onSelected(currentFeature) {
      closeInfoWin();
      var popup = new SuperMap.Popup.FramedCloud("popwin",
        new SuperMap.LonLat(currentFeature.geometry.x, currentFeature.geometry.y),
        null,
        "名称:" + currentFeature.data.NAME + "<br><a href='#'>详细信息</a>",
        null,
        true);
      infowin = popup;
      map.addPopup(popup);
    }

    function closeInfoWin() {
      if (infowin) {
        try {
          infowin.hide();
          infowin.destroy();
        } catch (e) {}
      }
    }

    function callbackFunction(e) {
      console.log(e);

    }

    var inited = false;

    function addLayerImage() {
      map.addLayer(layerImage);
    }

    function addLayer() {
	  map.addLayers([layer, utfgrid, utfgrid2]);
	  themeLayer = new SuperMap.Layer.TiledDynamicRESTLayer("等值专题图", url[5], {
        cacheEnabled: true, transparent: true
      }, {
		  useCanvas: true, 
        maxResolution: "auto"
      });
      themeLayer.events.on({
        "layerInitialized": addThemeLayer
      });

      //出图,map.setCenter函数显示地图
      try {
        //var lonLat1 = new SuperMap.LonLat(100.08831, 23.88535);
		var lonLat1 = new SuperMap.LonLat(11046444.664073, 2790516.8346258);
        console.log("lonLat1", lonLat1);

		map.setCenter(lonLat1, 2);

      } catch (ex) {
        console.log("exception ", ex);
      }
    }

   
    }


    //-->
  </script>
</head>

<body onload="init()">
  <div id="map" style="position:absolute;left:0px;right:0px;width:100%;height:100%;">
  </div>
</body>

</html>

91EXP 2017年04月06日
代码里面设置一下map的projection和maxExtent这两个参数
...