勾选图层点击标签显示详细信息

开发工具与关键技术：Visual Studio2015
作者：邹铭霞
撰写时间：2019年3月27日

    var HospitalLayer；
    //创建要素选择（鼠标单击）控件
    var select = new SuperMap.Control.SelectFeature([HospitalLayer, vectorLayerSanitation, vectorLayerDrugstore, ],{ onSelect: onFeatureSelect, onUnselect: onUnselect, repeat: true });
    //医院分布图层
    HospitalLayer = new SuperMap.Layer.Vector("医院分布图层", { visibility: false });
    // visibility: false：自动加载的时候是否勾选图层
    //异步加载图层
    function addLayer() {
         map.addLayers([layer, HospitalLayer]);
         //显示地图范围
         map.setCenter(new SuperMap.LonLat(113.34, 23.08), 1);
    }
    //医院查询
    function selectHospital() {
         var queryParam, queryBySQLParams, queryBySQLService;
         // 初始化查询参数
         queryParam = new SuperMap.REST.FilterParameter({
         name: "P15医疗服务_point_1_1@data#1",
         attributeFilter: "NAME like '%医院%' and NAME not like '%物%' and NAME not like '%店%'" 
		//attributeFilter：缓冲区查询属性过滤条件，相当于 SQL 语句中的 WHERE 子  		句，该字段的用法为 attributeFilter = "过滤条件"
		//用户在设置该字段时，仅需要输入“条件表达式”即可，若不设置该属性则返回与缓冲区相交的所有矢量要素
		}),
		// 初始化sql查询参数
		queryBySQLParams = new SuperMap.REST.QueryBySQLParameters({
     		queryParams: [queryParam]
    }),
    // SQL查询服务
    queryBySQLService = new SuperMap.REST.QueryBySQLService(url, {
    	   eventListeners: {
    			    "processCompleted": processCompletedHospital,//成功触发processCompleted事件
    			    "processFailed": processFailed//失败触发processFailed事件
    	     }
    });
    	queryBySQLService.processAsync(queryBySQLParams);
    }
    function processCompletedHospital(queryEventArgs) {
        var i, j, feature,
        result = queryEventArgs.result,
        features = [];
        if (result && result.recordsets) {
           for (i = 0; i < result.recordsets.length; i++) {
              if (result.recordsets[i].features) {
                for (j = 0; j < result.recordsets[i].features.length; j++) {
                    var x = result.recordsets[i].features[j].geometry.x;
                    var y = result.recordsets[i].features[j].geometry.y;
                    var point = new SuperMap.Geometry.Point(x, y);
                    var pointVector = new SuperMap.Feature.Vector(point);
                    pointVector.style = styleHospital;
               pointVector.attributes = result.recordsets[i].features[j].attributes
                    features.push(pointVector);
                            }
                        }
                    }
                }
                HospitalLayer.addFeatures(features);
            }
   
       //要素被选中时调用此函数
       function onFeatureSelect(feature) {
          if (feature.popup) {
             feature.popup.show();
             return;
         } 
         map.removeAllPopup();
         //地址详细信息的弹出框
		 var contentHTML = "<div style='font-size:.8em; opacity: 0.8; overflow-y:hidden;text-align:center'>" + "<span style='font-weight: bold; font-size: 18px; font-family: '宋体';'>详细信息</span><br>";
		 contentHTML += "名称：" + feature.attributes["NAME"] + "<br>";
		 contentHTML += "<i class='xCoordinate' style='display:none'>" + feature.geometry.x + "</i><i class='yCoordinate' style='display:none'>" + feature.geometry.y + "</i><br>"
		 contentHTML += "地址：" + feature.attributes["ADDRESS"] + "<br>";
	     contentHTML += "<button class='layer-btn layer-btn-xs''rimAnalysisClick()'>周边分析</button>";
		 var popup = new SuperMap.Popup.FramedCloud("chicken",
                feature.geometry.getBounds().getCenterLonLat(),
                null,
                contentHTML,
                null,
                true,
                null,
                true);
	    feature.popup = popup;
	    map.addPopup(popup);
	    };
	    function processFailed(e) {
	         alert(e.error.errorMsg);
	    }
	    //清除详细信息弹窗
	    function onUnselect(feature) {
	        map.removePopup(feature.popup);
	        feature.popup.destroy();
	        feature.popup = null;
	    }

效果截图:
打开图层管理器，勾选图层，然后就会查询出对应的数据，显示在地图上

点击地图上图标，就会显示出该图标的详细信息