作者：kxj

前言

最近有客户希望直接在地图展示中通过点击地图展示属性，不需要提前加载矢量图层或者marker来实现点击展示属性，下面我们一起来看看如何实现吧。

前期准备

以示例服务china为例：
1.地图服务： http://localhost:8090/iserver/services/map-China100/rest/maps/China_4326
2.数据服务： http://localhost:8090/iserver/services/data-China100/rest/data

成果展示

代码实现过程

1.地图展示

map = L.map('map', {
        preferCanvas: true,
        crs: L.CRS.EPSG4326,
        center: [38.48,114.05],
        maxZoom: 18,
        zoom: 5
    });
    
    new L.supermap.TiledMapLayer(baseUrl).addTo(map);

2.设置地图点击事件，获取点击坐标进行几何查询

      map.on("click", function (evt) {
        var x = evt.latlng.lng;
        var y = evt.latlng.lat;
        if (x < -180.0 || x > 180.0 || y < -90 || y > 90) {
            return;
        }
        point = new L.circleMarker([y, x]);
        var geometryParam = new L.supermap.GetFeaturesByGeometryParameters({
            datasetNames: ["China:China_Province_pg_1"],
            geometry:point,
            spatialQueryMode: "INTERSECT"
        });
        new L.supermap
            .FeatureService(url)
            .getFeaturesByGeometry(geometryParam, function (serviceResult) {
                
            });
    });
    

3.几何查询结果高亮展示并展示属性信息

                if(resultLayer!=undefined){
                  resultLayer.remove();
                };
                resultLayer = L.geoJSON(serviceResult.result.features).addTo(map);
                resultLayer.bindPopup("省份：" + serviceResult.result.features.features[0].properties.NAME).openPopup(point.getLatLng());

完整代码

 var map, marker, featureGroup, resultLayer, featureService,
        baseUrl =  "http://172.16.14.217:8090/iserver/services/map-China100/rest/maps/China_4326",
        url = "http://172.16.14.217:8090/iserver/services/data-China100/rest/data";
    map = L.map('map', {
        preferCanvas: true,
        crs: L.CRS.EPSG4326,
        center: [38.48,114.05],
        maxZoom: 18,
        zoom: 5
    });
    
    new L.supermap.TiledMapLayer(baseUrl).addTo(map);


      map.on("click", function (evt) {
        var x = evt.latlng.lng;
        var y = evt.latlng.lat;
        if (x < -180.0 || x > 180.0 || y < -90 || y > 90) {
            return;
        }
        point = new L.circleMarker([y, x]);
      
        var geometryParam = new L.supermap.GetFeaturesByGeometryParameters({
            datasetNames: ["China:China_Province_pg_1"],
            geometry:point,
            spatialQueryMode: "INTERSECT"
        });
        new L.supermap
            .FeatureService(url)
            .getFeaturesByGeometry(geometryParam, function (serviceResult) {
                 if(resultLayer!=undefined){
                  resultLayer.remove();
                };
                resultLayer = L.geoJSON(serviceResult.result.features).addTo(map);
                resultLayer.bindPopup("省份：" + serviceResult.result.features.features[0].properties.NAME).openPopup(point.getLatLng());
            });
    });

注意

1.结果展示通过L.geoJSON来进行展示，leaflet 绘制数据默认为 4326，如果数据原始坐标系为其他坐标系例如3857，服务器返回数据坐标系则为 3857，因此在加载到地图前，先进行坐标系转换：

var result = L.supermap.Util.transform(serviceResult.result.recordsets[0].features, L.CRS.EPSG3857, L.CRS.EPSG4326);

2.几何查询也可以对地图服务进行几何查询，地图服务几何查询示例可以参考官网示例：[地图服务几何查询](https://iclient.supermap.io/examples/leaflet/editor.html#01_mapQ