Question

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

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

您能否给我一个使用我的额外图层shapefile格式进行地图显示的起点？

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

非常感谢

Answer 1

这取决于你想做什么。它是一个很大的Shapefile吗？

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

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

Answer 2

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

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

虽然我不明白，为什么你需要为？

创建一个OpenStreetMap服务器

Answer 3

你自己need not to create OpenStreetMap server

如果您想在地图上显示自定义图层，请使用google or openstreetmap作为基础图层

并在地图上显示您的图层（来自表单形状文件）。

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

OpenLayer + OpenStreetMap +自定义ShapeFile

4 个答案: