supermap leaflet监听比例尺变化确定是否显示图层。


我的要素图层的数据源为超图的数据服务。
现在我的需求是在大比例尺下才显示点图层,并且点要素的图标根据该要素的某属性不同而变化。那代码应该如何实现呢
直接上JS代码

(function () {
   //baseUrl   3857底图          url:  专题图层数据服务
    var baseUrl = "http://10.154.37.40:8090/iserver/services/map-china400/rest/maps/China",
        url = "http://10.154.37.40:8090/iserver/services/data-arcgis-site/rest/data"

    var map, featureService, resultLayer;

    map = L.map('map', {
        preferCanvas: true,
        crs: L.CRS.EPSG3857,
        center: { lng: 120.202, lat: 29.261 },
        maxZoom: 18,
        zoom: 7,
        zoomControl: false,
        attributionControl: false
    });
    //缩放监听   当zoom>=10的时候再显示本图层。
    map.on('zoomend', function(e) {
        if(e.target.getZoom() >= 10) {
         map.addLayer(resultLayer);
        } else{ 
         map.removeLayer(resultLayer);
        }
    });

    // 添加底图、要素
    L.supermap.tiledMapLayer(baseUrl).addTo(map);
    featureGroup = L.featureGroup().addTo(map);
    featureService = L.supermap.featureService(url);

    initFeature();

    function initFeature() {
        var polygon = L.polygon([[10, 60], [60, 60], [60, 160], [10, 160], [10, 60]]);
        var getFeatureParams = new SuperMap.GetFeaturesByGeometryParameters({
            fromIndex: -1,
            toIndex: 30,
            datasetNames: ["ArcGISFeatureServer:zjpdm_sde_site"],
            geometry: polygon
        });

        featureService.getFeaturesByGeometry(getFeatureParams, function (serviceResult) {
		//根据传入的属性不同返回不同的图标
            function myIcon(params) {
                
                if (params == 0) {
                    return L.icon({
                        iconUrl: "0.png",
                        iconSize: [22, 22],
                    });
                } else if (params == 1) {
                    return L.icon({
                        iconUrl: "1.png",
                        iconSize: [22, 22],
                    });
                } else if (params == 2) {
                    return L.icon({
                        iconUrl: "2.png",
                        iconSize: [22, 22],
                    });
                } else if (params == 3) {
                    return L.icon({
                        iconUrl: "3.png",
                        iconSize: [22, 22],
                    });
                } else if (params == 4) {
                    return L.icon({
                        iconUrl: "4.png",
                        iconSize: [22, 22],
                    });
                } else {
                    
                };
            };

            resultLayer = L.geoJSON(serviceResult.result.features, {
                pointToLayer: function (geoJsonPoint, latlng) {
                    return L.marker(latlng, { icon: myIcon(geoJsonPoint.properties.sitetype) });
                }
            });
            //设置气泡的显示内容
            resultLayer.on("mousemove", function (e) {
                e.layer.bindPopup("名称" + ":" + e.layer.feature.properties.sitename + 
                "</br>线:" + e.layer.feature.properties.linename + 
                "</br>类别:" + e.layer.feature.properties.sitetype).openPopup();
            });

            resultLayer.on("mouseout", function (e) {
                e.layer.closePopup();
            });
        });
    };
})();


运行结果:
小比例尺下(只有底图):

大比例尺下(专题图层显示出来)

转载自:https://blog.csdn.net/weixin_43311389/article/details/85259877

You may also like...

退出移动版