OpenLayers学习笔记中级篇（二、对矢量地图的操作）

这一节我们主要对上一节我们加载的json格式的矢量地图数据进行一些操作。首先我们来看一下如何获取矢量地图的一些features。话不多说，直接上代码：

1、获取features：

<!doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>                  
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta content=always name=referrer>
    <title>OpenLayers 3地图加载</title>
    <link href="css/ol.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/ol.js" charset="utf-8"></script>
</head>

<body>
	<div>矢量地图Feature总数： <span id="count"></span></div>
    <div id="map" style="width: 100%"></div>
	
	
	
	<script type="text/javascript">
		var bounds = [73.62004852302096, 3.8378885148431436,
                    134.7684631352655, 53.553741455004214];

    	//创建地图
	    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()
	        })
	    });

	    // 因为是异步加载，所以要采用事件监听的方式来判定是否加载完成
	    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的，这是常犯错误
    	
    	 map.getView().fit(bounds, map.getSize());
</script>
</body>

</html>

首先来看一下代码运行后的效果：

这里我们不仅加载了中国矢量地图的json格式地图，而且获取了矢量地图中features的数量，具体使用的方法就是：vectorLayer.getSource().getFeatures().length;

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

2、我们现在可以获取features了，那么我们现在来尝试改变features，直接上代码如下图：

<!doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>                  
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta content=always name=referrer>
    <title>修改矢量地图</title>
    <link href="css/ol.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/ol.js" charset="utf-8"></script>
</head>

<body>
	<div>矢量地图Feature总数： <span id="count"></span></div>
    <div id="map" style="width: 100%"></div>
	
	
	
	<script type="text/javascript">
		var bounds = [73.62004852302096, 3.8378885148431436,
                    134.7684631352655, 53.553741455004214];

    	//创建地图
	    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的，这是常犯错误
    	
    	 map.getView().fit(bounds, map.getSize());
</script>
</body>

</html>

先来运行代码看一下效果：