使用 Openlayers 3 加载 GML 图层
Load GML layer with Openlayers 3
我正在尝试将 GML
文件加载到矢量图层中并将其绘制在地图上。由于某些原因,尽管这些要素已被解析并添加到矢量图层中,但它们并未显示在地图上。
我尝试使用来自 Geoserver
的 GML
文件(对源代码进行了小幅修改)并且 openlayers 3
似乎没有问题消化它。
我是不是遗漏了什么,或者 GML
解析器不支持自定义文件?
代码:
(function() {} (
'use strict';
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.transform([0, 30], 'EPSG:4326', 'EPSG:3857'),
zoom: 2
})
});
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "/echo/xml/", true);
xmlhttp.onload = function () {
var format = new ol.format.GML2();
var xmlDoc = xmlhttp.responseXML;
// Read and parse all features in XML document
var features = format.readFeatures(xmlDoc, {
featureProjection: 'EPSG:4326',
dataProjection: 'EPSG:3857'
});
var vector = new ol.layer.Vector({
source: new ol.source.Vector({
format: format
})
});
// Add features to the layer's source
vector.getSource().addFeatures(features);
map.addLayer(vector);
};
xmlhttp.send();
));
原始 GML
文件位于 IOC stations GML。我在本地复制了一份以避免 CORS
.
一切似乎都已准备就绪,但尽管该代码加载了功能,但这些功能仍需要具有与其相关联的几何图形。这可以通过创建 ol.geom
来实现,在本例中是 ol.geom.Point
.
代码:
var vector = new ol.layer.Vector({
source: new ol.source.Vector({
format: format
})
});
/** This is new **/
for (var i = 0; i < features.length; i++) {
var coordinates = [parseFloat(features[i].get('long')), parseFloat(features[i].get('lat'))];
// Create the new geometry object
var geom = new ol.geom.Point(ol.proj.transform(coordinates, 'EPSG:4326', 'EPSG:3857'));
features[i].setGeometry(geom);
}
/****/
vector.getSource().addFeatures(features);
我正在尝试将 GML
文件加载到矢量图层中并将其绘制在地图上。由于某些原因,尽管这些要素已被解析并添加到矢量图层中,但它们并未显示在地图上。
我尝试使用来自 Geoserver
的 GML
文件(对源代码进行了小幅修改)并且 openlayers 3
似乎没有问题消化它。
我是不是遗漏了什么,或者 GML
解析器不支持自定义文件?
代码:
(function() {} (
'use strict';
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.transform([0, 30], 'EPSG:4326', 'EPSG:3857'),
zoom: 2
})
});
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "/echo/xml/", true);
xmlhttp.onload = function () {
var format = new ol.format.GML2();
var xmlDoc = xmlhttp.responseXML;
// Read and parse all features in XML document
var features = format.readFeatures(xmlDoc, {
featureProjection: 'EPSG:4326',
dataProjection: 'EPSG:3857'
});
var vector = new ol.layer.Vector({
source: new ol.source.Vector({
format: format
})
});
// Add features to the layer's source
vector.getSource().addFeatures(features);
map.addLayer(vector);
};
xmlhttp.send();
));
原始 GML
文件位于 IOC stations GML。我在本地复制了一份以避免 CORS
.
一切似乎都已准备就绪,但尽管该代码加载了功能,但这些功能仍需要具有与其相关联的几何图形。这可以通过创建 ol.geom
来实现,在本例中是 ol.geom.Point
.
代码:
var vector = new ol.layer.Vector({
source: new ol.source.Vector({
format: format
})
});
/** This is new **/
for (var i = 0; i < features.length; i++) {
var coordinates = [parseFloat(features[i].get('long')), parseFloat(features[i].get('lat'))];
// Create the new geometry object
var geom = new ol.geom.Point(ol.proj.transform(coordinates, 'EPSG:4326', 'EPSG:3857'));
features[i].setGeometry(geom);
}
/****/
vector.getSource().addFeatures(features);