如何使用 Openlayers 3 将 shapefile 添加到 Bing 地图

Question

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

因此，我们非常感谢您对此事的任何帮助 :)

Answer 1

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

您正在谈论 shapefile，但鉴于您在 OpenLayers 2 中使用了 OpenLayers.Layer.GML 并且还使用 geoserver 和 gml 标记了这篇文章，我假设您已将 shapefile 上传到 GeoServer 并使用 WFS访问数据。

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

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
  }))
});

在上面的 sn-p 中，您必须将 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
    })
  })
});