我可以看到,通过监视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>
更新了版本v3.20.1的openlayers - 没有帮助。 例子来自: http://openlayers.org/en/latest/examples/vector-wfs-getfeature.html 和: http://openlayers.org/en/latest/examples/vector-wfs.html 也没有澄清。