Skip to content

Latest commit

 

History

History
96 lines (78 loc) · 2.9 KB

05-10.md

File metadata and controls

96 lines (78 loc) · 2.9 KB
Raw

样式设置

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

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

<script type="text/javascript" src="../src/ol3.13.1/ol.js" charset="utf-8"></script>
<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()
	}),
	style: new ol.style.Style({
		stroke: new ol.style.Stroke({
			color: 'red',
			size: 1
		})
	})
});

map.addLayer(vectorLayer);
</script>

代码很简单：

<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重新设置样式。