OpenLayer + OpenStreetMap + 自定义 ShapeFile答案

【问题标题】：OpenLayer + OpenStreetMap + Custom ShapeFileOpenLayer + OpenStreetMap + 自定义 ShapeFile
【发布时间】：2012-06-06 19:55:00
【问题描述】：

我从映射开始。我想查看一张法国地图，上面有一个可以个性化的图层。

我已经有了 shapefile 格式的自定义图层。我完全不知道我是否必须创建一个 OpenStreetMap 服务器，或者我是否可以直接使用 Web 应用程序。

您能给我一个使用我的额外图层 shapefile 格式映射显示的起点吗？

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

非常感谢

【问题讨论】：

标签： openlayers openstreetmap shapefile

【解决方案1】：

如果您希望在 shapefile 图层上添加 OpenStreetMap (OSM)，只需添加以下代码行，

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

虽然我没看懂，为什么要创建OpenStreetMap服务器呢？

【讨论】：

【解决方案2】：

您无需自己创建 OpenStreetMap 服务器。

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

【讨论】：

【解决方案3】：

这取决于你想做什么。是不是很大的 Shapefile？

您可以在创建 openlayers 地图时做一些事情：

使用公共的openstreetmap 服务器作为背景图块（默认的OSM 层实现），并将您的要素层（点、多边形，以及其中的任何内容）添加为OSM 中的矢量要素层。要从 shapefile 中获取矢量特征，您可以：
- 以基于 GIS 的良好格式将它们预加载到您的数据库中。这允许您在执行边界框查询时提供您的功能，如果您有超过 1000/10000 个功能，则需要这样做。
- 将 shapefile 转换为 openlayers 可读的格式（在浏览器中使用 https://github.com/wavded/js-shapefile-to-geojson 或使用 ogr2ogr 等工具进行预转换）
或者，如果您不需要与这些功能进行交互，您可以将您的数据与 OSM 数据相结合，并创建您的自定义图块。这对浏览器来说更轻量级，但相当复杂（读取数据库中的所有 OSM 数据，使用 mapnik 生成图块）

【讨论】：

【解决方案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());
});

【讨论】：