样式设置

对矢量元素进行样式设置,OpenLayers3 支持两种方式,一种是直接给feature设置样式,一种是给layer设置样式。系统默认优先考虑feature的样式,如果没有,则使用layer的样式,还有一种情况是layer也没有设置样式,则会采用系统默认的样式。

对于矢量地图而言,要想修改样式也只有这两种途径可选。比如之前例子中使用的GeoJSON,如果要改变线条的颜色成下面这样,可以考虑在layer上设置样式:

代码很简单:

<div id="map" style="width: 100%"></div>
<script type="text/javascript">

    //创建地图
    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: '../data/geojson/line-samples.geojson', 
            format: new ol.format.GeoJSON()
        }),
        // 设置样式,颜色为红色,线条粗细为1个像素
        style: new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'red',
                size: 1
            })
        })
    });

    map.addLayer(vectorLayer);
</script>

如果要在feature上设置样式,就必须先获取到所有加载的feature,然后依次设置,显然直接设置layer的样式,会在代码编写上更容易一些。

自带样式的矢量地图修改样式

有些矢量地图数据自带样式,比如KML格式的矢量地图,如果要修改样式,则相对比较麻烦。得分情况考虑:

  • 一种是所有矢量地图都不使用自带的样式;
  • 一种是部分矢量地图不使用自带的样式。

对于第一种情况,则相对比较简单一些,只需要把ol.format.KML的构造参数extractStyles设置为false即可,然后为layer设定自定义的样式。

对于第二种情况,则相对麻烦一些,必须要读取加载的所有feature,并进行过滤,对符合条件的feature重新设置样式。