openlayers修改样式_在OpenLayers中更改切片的外观（使用OSM贴图）

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

我能够得到如下结果：

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

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

我想做出如下变化：让背景变绿，建筑物在另一个灰色阴影中，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,

'We ' +

'could be here.
Or elsewhere.', null,

true //

);

//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);

}