如何使用Openlayers 3将shapefile添加到Bing地图 [英] How to add shapefiles to a Bing Map using Openlayers 3

问题描述

我正在将Openlayers3与Bing Maps一起使用来构建我的应用程序.我有一个点shapefile，想在地图上显示它.我可以使用OpenLayers.Layer.GML()构造体使用Openlayers2做到这一点，但是在尝试与Openlayers 3相同时遇到了困难.我尝试搜索此内容和openlayer

I am using Openlayers3 with Bing Maps to build my application. I have a point shapefile and would like to show it on the map. I could do it using Openlayers2 using the OpenLayers.Layer.GML() construct but am facing difficulty while trying to the same with Openlayers 3. I tried searching for this and the openlayer example gives me an error: 'Cannot read property 'ogc' of undefined'. My shapefile is on GeoServer in my own system.

因此，非常感谢您对此问题的任何帮助:)

So any help regarding this matter is highly appreciated :)

推荐答案

您链接的示例来自OpenLayers 3的一个非常老的beta版本.您可以从最新发行版中找到示例

The example you linked is from a very old beta version of OpenLayers 3. You can find the examples from the last release here.

您正在谈论shapefile，但是鉴于您在OpenLayers 2中使用了OpenLayers.Layer.GML，并用geoserver和gml标记了此帖子，我假设您已将shapefile上传到GeoServer并使用WFS访问数据.

You are talking about shapefiles, but given the fact that you used OpenLayers.Layer.GML in OpenLayers 2 and have tagged this post with geoserver and gml as well, I assume you have uploaded your shapefile to GeoServer and use WFS to access the data.

因此要看的相关示例为 http://openlayers .org/en/v3.3.0/examples/vector-wfs.html .该示例使用JSONP作为传输.在您的情况下，使用本地GeoServer，矢量源定义会更简单一些，如下所示:

So the relevant example to look at will be http://openlayers.org/en/v3.3.0/examples/vector-wfs.html. That example uses JSONP as transport. In your case, with a local GeoServer, your vector source definiton would be a bit simpler and could look like this:

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.

In the above snippet, you will have to replace osm:water_areas with your workspace and layer (feature type) name.

要在矢量层中使用该源，如果不希望使用默认的蓝色填充，还可以添加一些样式.下面的一个以2个像素宽的蓝色轮廓呈现了这些功能:

To use that source in a vector layer, you can also add some style if you don't want the default blueish fill. The one below renders the features with just a blue outline that is 2 pixels wide:

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将shapefile添加到Bing地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！