OpenLayer + OpenStreetMap + 自定义ShapeFile

Question

我从事地图制作。我想查看一幅法国地图，上面覆盖着个性化的图层。

我已经有了自定义的图层，格式为shapefile。

我完全不知道是否必须创建一个OpenStreetMap服务器，还是可以直接使用Web应用程序。

你能给我关于如何在我的额外图层shapefile格式下显示地图的起点吗？

我猜这项任务很复杂，但你必须从某个地方开始...

非常感谢

- Bob

Answer 1

这要看你想做什么。它是一个大Shapefile吗？

在创建OpenLayers地图时，您可以执行以下操作：

• 使用公共OpenStreetMap服务器作为背景瓦片（默认的OSM图层实现），并将您的要素层（点、多边形或其他要素）作为矢量要素层添加到OSM中。要从Shapefile中获取矢量要素，您可以执行以下操作：
• 以体面的GIS格式预加载它们到您的数据库中。这样可以在执行边界框查询时提供要素，并且如果您有1000/10000个以上的要素，则需要此操作。
• 将Shapefile转换为可被OpenLayers读取的格式（可以在浏览器中使用https://github.com/wavded/js-shapefile-to-geojson或使用ogr2ogr等工具进行预转换）
• 或者，如果您不需要与这些要素交互，您可以将您的数据与OSM数据结合，并创建自定义瓦片。这对于浏览器来说更轻量级，但非常复杂（在DB中读取所有OSM数据，使用Mapnik生成瓦片）。

- ivy

Answer 2

如果您希望在您的shapefile图层上添加OpenStreetMap（OSM），只需添加以下代码行：

var osm = new OpenLayers.Layer.OSM();
map.addLayer(osm);

虽然我不理解，但为什么您需要创建一个OpenStreetMap服务器呢？

- Sam007

Answer 3

您不需要自己创建一个OpenStreetMap服务器。

如果您想在地图上显示自定义图层，则可以使用google或openstreetmap作为底图，并在地图上显示您的图层（来自形状文件）。

- Yogesh Prajapati

Answer 4

你可以使用 gipong/shp2geojson： 首先，将shp文件转换为geojson数据 然后将你的数据添加到地图上。

   var map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    target: 'map',
    view: new ol.View({
        center: [0, 0],
        zoom: 5
    })
});

loadshp({
    url: 'demo/10tnvillage.zip',
    encoding: 'big5',
    EPSG: 3826
}, function(data) {
    var feature = new ol.format.GeoJSON().readFeatures(data, {
        featureProjection: 'EPSG:3857'
    });
    var layer = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: feature
        })
    });
    map.addLayer(layer);

    var extent = layer.getSource().getExtent();
    map.getView().fit(extent, map.getSize());
});

- sara GHOZALI