Question

我尝试使用此示例http://openlayers.org/en/master/examples/mapbox-vector-tiles.html

效果很好。

我现在已经在Mapbox studio在线设置自己的地图。

我无法在此示例中添加样式化地图，因为示例中有一个样式函数createMapboxStreetsV6Style（），我无法为我的样式获取。

我知道如何将我的样式mapbox矢量图添加到openlayers 3？

任何帮助都将不胜感激。

Answer 1

现在可以使用ol-mapbox-style。

我最近发现了一个issue，但它不应该阻止你使用这个很棒的软件包。我确信维护人员会立即解决这个问题。

Answer 2

根据您使用地图的内容，您可以替换Mapbox-GL-JS的Openlayers，因为地图将更加流畅，整体表现更好。如果您有兴趣，可以使用an example来帮助您。

否则，我会指向one of the help guides on Mapbox.com，它会遍历以下步骤来设置平铺贴图的样式并在Openlayers 3.0中使用它。

希望这有帮助

编辑：以一个更好的例子来解决这个问题：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>OpenLayers MapBox Example</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.15.1/ol.js"></script>
  <link url="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.15.1/ol.css">
</head>
<body>
    <div id="map"></div>
</body>

var map = new ol.Map({
layers: [
new ol.layer.Tile({
  source: new ol.source.XYZ({
    tileSize: [512, 512],
    url: 'https://api.mapbox.com/styles/v1/mapbox/streets-v8/tiles/{z}/{x}/{y}?access_token=Your access token here'
  })
})
],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});

最后是CSS：

body { margin:0; padding:0; }
#map { 
  position:absolute; 
  top:0; 
  bottom:0; 
  width:100%; 
}

如何将我的样式的mapbox矢量地图添加到openlayers3

2 个答案: