openlayers3以WFS格式加载矢量数据,但不显示它

时间:2017-02-08 03:57:24

标签: maps openlayers-3

我可以看到,通过监视FF / Chrom(ium)中的缓存/网络选项卡来加载WFS数据,但是地图上没有显示特色向量。 我甚至试图禁用下面的OSM层,因此,我只能看到矢量图层,但没有任何内容可见。 拖动地图区域放大/缩小时,我看到,正在加载新数据,但地图上没有任何内容。 我做错了什么? Openlayers版本:v3.19.1

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">

	<title>The Book of OpenLayers3 - Code samples</title>
	<link rel="stylesheet" href="progr/nm/ol.css" type="text/css">
	<script src="progr/nm/jquery-3.1.1.min.js" type="text/javascript"></script>
	<script src="progr/nm/ol.js" type="text/javascript"></script>
	<style type="text/css">
.map {
	width: calc(100% - 9px);
	height: 500px;
	box-shadow: 4px 4px 20px black;
	border: 3px solid blue;
	float: left;
}
.tree {
	width: auto;
	border: 3px solid red;
	background: yellow;
	float: left;
}
	</style>
</head>
<body>

<dev id='mapAjax' class='map col-sm-6'></dev>

<script>
var layerSrc = {
	srvVec: new ol.source.Vector({
		loader: function(extent, resolution, projection){
			$.ajax(
				'http://demo.opengeo.org/geoserver/wfs?service=WFS&request=GetFeature&version=1.1.0&typename=osm:water_areas&srsname=EPSG:3857&bbox='+extent.join(',')
			).then(function(response){
				var format = new ol.format.WFS({
					featureNS: 'http://openstreetmap.org',
					featureType: 'water_areas'
				});
				layerSrc['srvVec'].addFeatures(format.readFeatures(
					response,
					{featureProjection: 'EPSG:3857'}
				));
			});
		},
		strategy: ol.loadingstrategy.tile(new ol.tilegrid.createXYZ({maxZoom: 19}))
//		strategy: ol.loadingstrategy.bbox
	})
};

var layers = {
	OSM: new ol.layer.Tile({source: new ol.source.OSM()}),
	vec: new ol.layer.Vector({
		source: layerSrc['srvVec'],
		style: new ol.style.Style({
			stroke: new ol.style.Stroke({
				color: 'green',
				width: 2
			})
		})
	})
};

var view = new ol.View({
	center: ol.proj.transform([-75.923853, 45.428736], 'EPSG:4326', 'EPSG:3857'),
	maxZoom: 19,
	zoom: 11
});

var maps = {
	mapAjax: new ol.Map({
		target: 'mapAjax',
		renderer: 'canvas',
//		layers: [layers['OSM'], layers['vec']],
		layers: [layers['vec']],
		view: view
	})
};
</script>

</body>
</html>

P.S:

更新了版本v3.20.1的openlayers - 没有帮助。 例子来自: http://openlayers.org/en/latest/examples/vector-wfs-getfeature.html 和: http://openlayers.org/en/latest/examples/vector-wfs.html 也没有澄清。

0 个答案:

没有答案