openlayers 3 中的矢量层加载问题
vector layer loading issue in openlayers 3
我对 ol3 中的矢量加载有疑问。
我正在使用 不处理 js 回调的地理服务器
为了加载我的功能,我必须将它们添加到加载器的 ajax done 函数中:
var buildLoader = function(vectorSource, $vector) {
return function(extent, resolution, projection) {
extent = ol.extent.applyTransform(extent, ol.proj.getTransform("EPSG:3857", "EPSG:4326"));
var url = 'https://myurl/' + $vector.attr("url") +
'?service=WFS' +
'&version=' + $vector.attr("version") +
'&request=GetFeature' +
'&typename=' + $vector.attr("typename") +
'&srs=' + $vector.attr("projection") +
'&bbox=' + extent +
'&outputFormat=json';
$.ajax({
url: url,
dataType: 'json',
xhrFields: {
withCredentials: true
}
})
.done(function(response) {
vectorSource.addFeatures(vectorSource.readFeatures(response));
});
}
}
然后我构建了一个矢量数组以添加到我的地图上。
for (index=0; index < vectors.length; index++) {
var $vector = $(vectors[index]);
var vectorSource = new ol.source.ServerVector({
format: new ol.format.GeoJSON(),
loader: buildLoader(vectorSource, $vector),
projection: 'EPSG:3857'
});
// ... //
datas[index] = new ol.layer.Vector({
source: vectorSource,
visible: 'false',
style: iconStyle
});
}
这里的问题是loader使用的vectorSource总是[index - 1]
我发现了一个 Hack,通过在实例化之后定义加载函数:
var vectorSource = new ol.source.ServerVector({
format: new ol.format.GeoJSON(),
projection: 'EPSG:3857'
});
vectorSource.loader_ = buildLoader(vectorSource, $vector);
我觉得这很丑陋,但是 ServerVector 类型没有可用的 setLoader()。您知道是否有另一个 不 涉及使用另一个地理服务器的解决方案?
我在 buildLoader 函数中保存了对 VectorSource 对象实例的引用(而不是参数)。
vectorSource = this;
然后我在 done() 函数中使用该引用:
vectorSource.addFeatures(vectorSource.readFeatures(response));
完整来源:
var buildLoader = function($vector) {
return function(extent, resolution, projection) {
vectorSource = this;
extent = ol.extent.applyTransform(extent, ol.proj.getTransform("EPSG:3857", "EPSG:4326"));
var url = 'https://myurl/' + $vector.attr("url") +
'?service=WFS' +
'&version=' + $vector.attr("version") +
'&request=GetFeature' +
'&typename=' + $vector.attr("typename") +
'&srs=' + $vector.attr("projection") +
'&bbox=' + extent +
'&outputFormat=json';
$.ajax({
url: url,
dataType: 'json',
xhrFields: {
withCredentials: true
}
})
.done(function(response) {
vectorSource.addFeatures(vectorSource.readFeatures(response));
});
}
}
我对 ol3 中的矢量加载有疑问。
我正在使用 不处理 js 回调的地理服务器
为了加载我的功能,我必须将它们添加到加载器的 ajax done 函数中:
var buildLoader = function(vectorSource, $vector) {
return function(extent, resolution, projection) {
extent = ol.extent.applyTransform(extent, ol.proj.getTransform("EPSG:3857", "EPSG:4326"));
var url = 'https://myurl/' + $vector.attr("url") +
'?service=WFS' +
'&version=' + $vector.attr("version") +
'&request=GetFeature' +
'&typename=' + $vector.attr("typename") +
'&srs=' + $vector.attr("projection") +
'&bbox=' + extent +
'&outputFormat=json';
$.ajax({
url: url,
dataType: 'json',
xhrFields: {
withCredentials: true
}
})
.done(function(response) {
vectorSource.addFeatures(vectorSource.readFeatures(response));
});
}
}
然后我构建了一个矢量数组以添加到我的地图上。
for (index=0; index < vectors.length; index++) {
var $vector = $(vectors[index]);
var vectorSource = new ol.source.ServerVector({
format: new ol.format.GeoJSON(),
loader: buildLoader(vectorSource, $vector),
projection: 'EPSG:3857'
});
// ... //
datas[index] = new ol.layer.Vector({
source: vectorSource,
visible: 'false',
style: iconStyle
});
}
这里的问题是loader使用的vectorSource总是[index - 1]
我发现了一个 Hack,通过在实例化之后定义加载函数:
var vectorSource = new ol.source.ServerVector({
format: new ol.format.GeoJSON(),
projection: 'EPSG:3857'
});
vectorSource.loader_ = buildLoader(vectorSource, $vector);
我觉得这很丑陋,但是 ServerVector 类型没有可用的 setLoader()。您知道是否有另一个 不 涉及使用另一个地理服务器的解决方案?
我在 buildLoader 函数中保存了对 VectorSource 对象实例的引用(而不是参数)。
vectorSource = this;
然后我在 done() 函数中使用该引用:
vectorSource.addFeatures(vectorSource.readFeatures(response));
完整来源:
var buildLoader = function($vector) {
return function(extent, resolution, projection) {
vectorSource = this;
extent = ol.extent.applyTransform(extent, ol.proj.getTransform("EPSG:3857", "EPSG:4326"));
var url = 'https://myurl/' + $vector.attr("url") +
'?service=WFS' +
'&version=' + $vector.attr("version") +
'&request=GetFeature' +
'&typename=' + $vector.attr("typename") +
'&srs=' + $vector.attr("projection") +
'&bbox=' + extent +
'&outputFormat=json';
$.ajax({
url: url,
dataType: 'json',
xhrFields: {
withCredentials: true
}
})
.done(function(response) {
vectorSource.addFeatures(vectorSource.readFeatures(response));
});
}
}