在OpenLayers中更改切片的外观（使用OSM贴图）

Question

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

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

我能够得到如下结果：

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

我的意思是风格，颜色和细节，不是控件（我知道如何添加自己的控件，标记等）。

我想做出如下变化：让背景变绿，建筑物在另一个灰色阴影中，1px黑色轮廓，从主要街道上移除黄色，隐藏火车轨道和停车位等。

如何实现？所有这些变化都必须通过样式化OSM地图来实现，而不能在＆＃34;后处理＆＃34; （例如，在获取地图后，可以将整个地图更改为灰度）。

我的示例代码（基于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);
}

Answer 1

您的第二个示例使用的是与第一个不同的tileset。这些图块来自Mapbox - 请参阅示例的属性。如果您想使用这些图块，则必须设置一个Mapbox帐户，并将Tile-URL与Mapbox提供的API-Key一起使用。

Afaik没有办法用CSS之类的东西来设置样式。以防你正在寻找类似的东西。图块是服务器提供的预渲染图像。

如果您对在互联网上找到的任何瓷砖组不满意，您可以随时查看长度并从OSM数据中渲染自己的瓷砖，设置您自己的瓷砖服务器并从那里开始...但是那个＆ ＃39;一个完全不同的故事。

Answer 2

除了Grmpfhmbl的回复，对于更多自定义样式而不需要您自己的磁贴服务器，您还可以Google's styled maps通过ol3-google-maps使用。{/ p>