如何将我的风格地图框矢量地图添加到 openlayers3答案

【问题标题】：How to add my styled mapbox vector maps to openlayers3如何将我的风格地图框矢量地图添加到 openlayers3
【发布时间】：2016-04-10 08:15:06
【问题描述】：

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

而且效果很好。

我现在已经在 Mapbox 在线工作室中设计了自己的地图。

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

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

任何帮助将不胜感激。

【问题讨论】：

函数在这里找到：github.com/openlayers/ol3/blob/master/examples/resources/…

标签： mapbox openlayers-3

【解决方案1】：

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

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

【讨论】：

目前这是一个仅链接的答案，您可以添加一些详细信息吗？可能是代码示例？
@YuryFedorov 我链接的页面有详细的代码示例和演示应用程序。正如自述文件所述：“要查看实际运行的库，请导航到 example/index.html”

【解决方案2】：

根据您使用地图的目的，您可以将 Openlayers 替换为 Mapbox-GL-JS，因为地图会更加流畅且整体性能更好。如果您有兴趣，这里是an example，可以帮助您入门。

否则，我会将您指向one of the help guides on Mapbox.com，该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%; 
}

【讨论】：