更改OpenLayers（使用OSM贴图）中平铺的外观

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

我看到了一个例子：

我可以得到如下结果：

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

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

我想做一些更改，例如：将背景变成绿色，将建筑物的底色改为灰色，并用1倍的黑色轮廓，将主要街道的黄色去掉，隐藏火车轨道和停车场等

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

我的示例代码（基于其中一个OpenLayers示例）：

var映射；
函数init（）{
//覆盖层为我们的标记，以一个简单的钻石作为符号
var overlay=new OpenLayers.Layer.Vector（'overlay'{
styleMap:new OpenLayers.styleMap({
外部图形：“img/marker.png”，
图形宽度：20，图形高度：24，图形偏移：-24，
标题：“${tooltip}”
})
});
//标记和弹出窗口的位置。我们通常以地理位置思考
//坐标（'EPSG:4326'），但地图是投影的（'EPSG:3857'）。
var myLocation=新的OpenLayers.Geometry.Point（19.41166,51.75047）
.transform（'EPSG:4326'，'EPSG:3857'）；
//我们将带有工具提示文本的标记添加到覆盖中
overlay.addFeatures([
新的OpenLayers.Feature.Vector（myLocation，{tooltip:'OpenLayers'}）
]);
//一个弹出窗口，包含一些关于我们位置的信息
var popup=new OpenLayers.popup.FramedCloud（“popup”，
myLocation.getBounds（）.getCenterLonLat（），null，
' ' +
“可能在这里。
或其他地方。”，空，
true/第二个示例使用的瓷砖集与第一个示例不同。瓷砖来自Mapbox-请参阅示例的属性。如果要使用这些瓷砖，必须设置Mapbox帐户，并使用Mapbox提供的API密钥的瓷砖URL

好吧，没有办法用CSS之类的东西来设计瓷砖的样式。以防万一，你正在寻找类似的东西。瓷砖是服务器提供的预渲染图像

如果您对在internet上找到的任何平铺集不满意，您始终可以根据OSM数据确定长度并渲染您自己的平铺，设置您自己的平铺服务器并从那里开始…但这是一个完全不同的故事。
您的第二个示例使用的平铺集与第一个示例不同。这些平铺来自Mapbox-请参阅t的属性他举了一个例子。如果你想使用这些磁贴，你必须设置一个Mapbox帐户，并使用磁贴URL和Mapbox提供的API密钥

好吧，没有办法用CSS之类的东西来设计瓷砖的样式。以防万一，你正在寻找类似的东西。瓷砖是服务器提供的预渲染图像

如果您对在internet上找到的任何平铺集不满意，您可以随时根据OSM数据绘制您自己的平铺，设置您自己的平铺服务器并从那里开始…但这是一个完全不同的故事。
除了Grmpfhmbl的响应之外，对于不需要您自己的平铺服务器的更多自定义样式，您还可以使用，via。
除了Grmpfhmbl的响应之外，对于不需要您自己的磁贴服务器的更多自定义样式，您也可以使用，via。
来自OSM的磁贴以XYZ格式预渲染。我认为您无法在客户端更改它们发送的外观，因为我认为这是唯一提供的样式。您可以创建您自己的或使用提供基于OSM的磁贴服务的几家外部公司之一。来自OSM的磁贴以XYZ格式预先呈现。我认为您无法在客户端更改它们发送的内容的外观，因为我认为这是唯一提供的样式。您可以创建您自己的或请使用提供基于OSM的互动程序服务的几家外部公司之一。确实如此。我必须在自己的服务器上根据OSM数据渲染互动程序。感谢您的澄清。您不必自己渲染互动程序。您可以使用MapBox设置地图样式，然后使用这些互动程序。确实，我必须自己渲染互动程序ver，来自OSM数据。感谢您的澄清。您不必自己渲染分幅。您可以使用MapBox设置地图样式，然后使用这些分幅。
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);
}