如何使用 Openlayers 3 将形状文件添加到 Bing 地图

Question

我正在使用带有 Bing 地图的 Openlayers3 来构建我的应用程序。我有一个点 shapefile 并想在地图上显示它。我可以使用 OpenLayers.Layer.GML() 构造使用 Openlayers2 来做到这一点，但在尝试与 Openlayers 3 相同时遇到困难。我尝试搜索这个，openlayer example 给了我一个错误：'无法读取属性 'ogc' 未定义'。我的 shapefile 在我自己系统的 GeoServer 上。

非常感谢任何有关此事的帮助:)

Answer 1

您链接的示例来自非常旧的 OpenLayers 3 测试版。您可以找到上一版本 here 中的示例。

你说的是 shapefile，但考虑到你在 OpenLayers 2 中使用了 OpenLayers.Layer.GML 并用 geoserver 和 gml 标记了这个 post，我假设您已将 shapefile 上传到 GeoServer 并使用 WFS 访问数据。

因此要查看的相关示例将是 http://openlayers.org/en/v3.3.0/examples/vector-wfs.html。该示例使用 JSONP 作为传输。在您的情况下，使用本地地理服务器，您的矢量源定义会更简单一些，看起来像这样：

var vectorSource = new ol.source.ServerVector({
  format: new ol.format.GeoJSON(),
  loader: function(extent, resolution, projection) {
    var url = 'geoserver/wfs?service=WFS&version=1.1.0&' +
        'request=GetFeature&typename=osm:water_areas&outputFormat=json' +
        '&srsname=EPSG:3857&bbox=' + extent.join(',') + ',EPSG:3857';
    $.ajax(url).then(function(response) {
      vectorSource.addFeatures(vectorSource.readFeatures(response));
    });
  },
  strategy: ol.loadingstrategy.createTile(new ol.tilegrid.XYZ({
    maxZoom: 19
  }))
});

在上面的代码片段中，您必须将 osm:water_areas 替换为您的工作空间和图层（要素类型）名称。

要在矢量图层中使用该源，如果您不想要默认的蓝色填充，您还可以添加一些样式。下图仅使用 2 像素宽的蓝色轮廓渲染特征：

var vector = new ol.layer.Vector({
  source: vectorSource,
  style: new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'rgba(0, 0, 255, 1.0)',
      width: 2
    })
  })
});

如何使用 Openlayers 3 将形状文件添加到 Bing 地图

How to add shapefiles to a Bing Map using Openlayers 3

shapefile

geoserver

openlayers-3

gml-geographic-markup-lan