1

我想使用 OSM 地图，我决定使用 OpenLayers。

我看过这个例子： http: //openlayers.org/dev/examples/osm.html

我能够得到如下结果：

在此处输入图像描述

但我希望我的地图看起来更像这样：

在此处输入图像描述

我指的是样式、颜色和细节，而不是控件（我知道如何添加自己的控件、标记等）。

我想做一些改变，比如：将背景设为绿色，其他灰色阴影中的建筑物带有 1px 黑色轮廓，从主要街道上移除黄色，隐藏火车铁轨和停车位等等。

如何实现？所有这些更改都必须通过样式化 OSM 地图来进行，并且不能在“后期处理”中完成（例如，可以在获取地图后将整个地图更改为灰度）。

我的示例代码（基于 OpenLayers 示例之一）：

var map;
function init() {

// The overlay layer for our marker, with a simple diamond as symbol
var overlay = new OpenLayers.Layer.Vector('Overlay', {
    styleMap: new OpenLayers.StyleMap({
        externalGraphic: 'img/marker.png',
        graphicWidth: 20, graphicHeight: 24, graphicYOffset: -24,
        title: '${tooltip}'
    })
});

// The location of our marker and popup. We usually think in geographic
// coordinates ('EPSG:4326'), but the map is projected ('EPSG:3857').
var myLocation = new OpenLayers.Geometry.Point(19.41166, 51.75047)
    .transform('EPSG:4326', 'EPSG:3857');

// We add the marker with a tooltip text to the overlay
overlay.addFeatures([
    new OpenLayers.Feature.Vector(myLocation, {tooltip: 'OpenLayers'})
]);

// A popup with some information about our location
var popup = new OpenLayers.Popup.FramedCloud("Popup", 
    myLocation.getBounds().getCenterLonLat(), null,
    '<a target="_blank" href="http://openlayers.org/">We</a> ' +
    'could be here.<br>Or elsewhere.', null,
    true // <-- true if we want a close (X) button, false otherwise
);

//alert(myLocation.getBounds().getCenterLonLat());

 var      layer = new OpenLayers.Layer.OSM();

// Finally we create the map
map = new OpenLayers.Map({
    div: "map", projection: "EPSG:3857",
    layers: [layer, overlay],
    center: myLocation.getBounds().getCenterLonLat(), zoom: 18
});
// and add the popup to it.
map.addPopup(popup);
}
4

2 回答 2

4

您的第二个示例使用与第一个不同的图块集。瓷砖来自 Mapbox - 请参阅示例的归属。如果你想使用这些图块，你必须设置一个 Mapbox-Account 并将 Tile-URLs 与 Mapbox 提供的 API-Key 一起使用。

Afaik 没有办法用 CSS 之类的东西来设置瓷砖的样式。以防万一您正在寻找类似的东西。瓦片是由服务器提供的预渲染图像。

如果您对在 Internet 上找到的任何图块集不满意，您可以随时从 OSM 数据中渲染您自己的图块，设置您自己的图块服务器并从那里开始……但这是完全不同的故事。

于 2014-07-20T14:44:54.507 回答
1

除了 Grmpfhmbl 的响应，对于更多自定义样式而不需要您自己的图块服务器，您还可以通过ol3-google-maps使用Google 的样式化地图。

于 2016-04-23T12:51:24.387 回答