openlayers加载Mapbox底图

Mapbox Studio样式或Mapbox基础地图样式
要在OpenLayers 3.x中使用Mapbox Studio样式或Mapbox基础地图样式URL，需要引用Mapbox静态Tiles API。也可以将样式URL替换为mapbox/streets-v11 。

var map = new ol.Map({layers: [new ol.layer.Tile({source: new ol.source.XYZ({url: 'https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoid2FuZ2hhaGExIiwiYSI6ImNqeHUycXF5ZDEweDQzYnBiOTcwZGoxMHAifQ.eCGuiA6erHJ7ew-Fkc7dRA'})})],target: 'map',view: new ol.View({center: [0, 0],zoom: 2})
});

Mapbox图块ID
要将Mapbox Tileset ID与OpenLayers 3.x结合使用，需要引用Mapbox Raster Tiles API。可以用mapbox.satellite自己的图素ID替换。

var map = new ol.Map({layers: [new ol.layer.Tile({source: new ol.source.XYZ({url: 'https://api.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.jpg?access_token=pk.eyJ1Ijoid2FuZ2hhaGExIiwiYSI6ImNqeHUycXF5ZDEweDQzYnBiOTcwZGoxMHAifQ.eCGuiA6erHJ7ew-Fkc7dRA'})})],target: 'map',view: new ol.View({center: [0, 0],zoom: 2})
});

（给个赞再走呗）

openlayers加载Mapbox底图相关推荐

005：vue+openlayers加载Mapbox地图示例
第005个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中加载Mapbox地图. 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果示例效果 ...
在matplotlib中加载mapbox底图（TransBigData）
TransBigData包介绍:地图底图 - TransBigData 0.1.28 文档https://transbigdata.readthedocs.io/zh_CN/latest/plot_m ...
vue + openlayers 加载高德底图
效果图 1.创建一个容器 :再给一个容器宽高 <template><div id="map"></div> </template> ...
openlayers 加载高德底图
首先路由器 import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/He ...
openlayers加载百度地图作为底图坐标偏移的解决办法
openlayers加载天地图作为底图,在网上找了公开的服务资源,要做到百度地图与天地图之间切换,同样也从网上找到百度地图的服务资源但是在地图上坐标总是有偏差,最初的代码是这样的: var proje ...
vue openlayers 加载高德地图等 gcj02 的图层偏移问题
vue openlayers 加载高德地图等 gcj02 的图层偏移问题这个问题是在使用 openlayers 地图引擎加载高德地图或者是谷歌地图都会遇到的问题,所以说呢这篇博文稍微说一下解决办法. ...
OpenLayers 加载天地图模糊的问题 OpenLayers 地图缩放模糊
openlayers 加载天地图模糊的问题,OpenLayers 地图缩放几次之后模糊 2021年12月20日纠正模糊原因: 地图加载瓦片实质上还是图片,一般来说是256&256,将一个静态 ...
GIS初学者，最新OpenLayers WMTS 天地图，OpenLayers加载天地图、调用天地图WMTS示例、tianditu、EPSG:3857、EPSG:4326
2018最新OpenLayers天地图加载可行方案,天地图WMTS调用,OpenLayers 天地图 WMTS GetCapabilities GetTile 最近要了解Web GIS方面的知识,对我 ...
OpenLayers加载不同类类型的天地图(矢量图、影像图、地形图)并实现动态切换效果
前言 OpenLayers开发库如何实现加载不同类类型的天地图(矢量图.影像图.地形图)并实现动态切换效果,如下图所示. 一.涉及技术及数据开发库:OpenLayers 6.Jquery 地图源:天 ...

openlayers加载Mapbox底图

openlayers加载Mapbox底图相关推荐

最新文章

热门文章