features

2020-04-18  本文已影响0人  扶不起的蝌蚪

获取features--vectorLayer.getSource().getFeatures()

加载json格式的地图数据时是异步加载,所以要采用事件监听的方式来判定是否加载完成,所以有时我们如果没有使用监听的方式来判断是否加载完成就直接调用getFeatures方法会报错。

var map = new ol.Map({
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            view: new ol.View({ 
                center: [-72.980624870461128, 48.161307640513321],
                zoom: 8,
                projection: 'EPSG:4326'
            }),
            target: 'map'
        });
 
        var vectorLayer = new ol.layer.Vector({
            source: new ol.source.Vector({
                url: 'img/china.json', // 地图来源
                format: new ol.format.GeoJSON()
            }),
            // 设置样式,颜色为红色,线条粗细为1个像素
            style: new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'red',
                    size: 1
                })
            })
        // 因为是异步加载,所以要采用事件监听的方式来判定是否加载完成
        var listenerKey = vectorLayer.getSource().on('change', function(){
            if (vectorLayer.getSource().getState() === 'ready') {    // 判定是否加载完成
                document.getElementById('count').innerHTML = vectorLayer.getSource().getFeatures().length;
            }
        });
 
        map.addLayer(vectorLayer);
        // 如果在此处调用vectorLayer.getSource().getFeatures()是完全有可能获取不到任何Feature的,这是常犯错误

点击feature显示点击物的信息


上一篇下一篇

猜你喜欢

热点阅读