标签: mapbox

如何设置视图以在Mapbox或Leaflet中查看地图上的所有标记？像Google Maps API一样bounds吗？

例如:

var latlngbounds = new google.maps.LatLngBounds();
for (var i = 0; i < latlng.length; i++) {
  latlngbounds.extend(latlng[i]);
}
map.fitBounds(latlngbounds);

什么是Leaflet和Mapbox,两者的区别或用途是什么？他们的API有哪些主要区别？

来自Mapbox词汇表Mapbox.js

Mapbox.js是一个JavaScript库,允许您将交互式地图添加到您的网站.它是Leaflet的插件,它是一个可以免费使用的开源库.

和Mapbox GL JS

Mapbox GL JS是一个使用Mapbox GL渲染交互式地图的JavaScript库.它是一个可以免费使用的开源库.您可以将Mapbox样式或使用Mapbox Studio创建的自定义样式添加到Mapbox GL JS应用程序中.

并从这个答案

Mapbox样式适用于Mapbox GL以及原生iOS和Android SDK.您不能将它们与经典的Mapbox JS一起使用.Mapbox JS支持光栅图块,你无法设置样式.他们只是图像.Mapbox GL和原生SDK(可以)使用矢量切片,并且可以设置样式.

我相信我可以用来mapbox.js代替leaflet css和js来源,但我可以这样做mapbox-gl.js吗？
两个库之间还存在哪些差异？

我正在尝试删除LeafletJS地图上的缩放控件(+/-).

我正在使用Leaflet的MapBox.js版本,但大多数操作与Leaflet相同.我像这样实现我的地图:

var map = L.mapbox.map('map');

var layer = L.mapbox.tileLayer('MAPBOX-ID', {
    format: 'jpg70',
    minZoom: 13,
    maxZoom: 15,
    reuseTiles: true, 
    unloadInvisibleTiles: true
});
map.addLayer(layer);
map.setView([40.73547,-73.987856]);

该文件说,有将从地图中删除变焦控制zoomControl可选项,但我已经得到它的工作没有运气.

如何通过此实现删除缩放控件？

谢谢!

尝试 npm install vue-mapbox mapbox-gl 并且我收到依赖树错误。

我正在使用 Vuetify 运行 Nuxt SSR，并且在运行此安装并出现此错误之前没有安装任何与 Mapbox 相关的东西。

38 error code ERESOLVE
39 error ERESOLVE unable to resolve dependency tree
40 error
41 error While resolving: [1mexample[22m@[1m1.0.0[22m
41 error Found: [1mmapbox-gl[22m@[1m1.13.0[22m[2m[22m
41 error [2mnode_modules/mapbox-gl[22m
41 error   [1mmapbox-gl[22m@"[1m^1.13.0[22m" from the root project
41 error
41 error Could not resolve dependency:
41 error [35mpeer[39m [1mmapbox-gl[22m@"[1m^0.53.0[22m" from [1mvue-mapbox[22m@[1m0.4.1[22m[2m[22m
41 error [2mnode_modules/vue-mapbox[22m
41 error   [1mvue-mapbox[22m@"[1m*[22m" from the root project
41 error
41 error Fix the upstream dependency conflict, or …

有许多在线资源提供JavaScript API来访问他们的服务.为了更清楚,我将基于MapBox的示例提出问题,但这适用于各种域中的许多其他服务.

当有人想在Web应用程序中使用此类服务​​时(例如来自MapBox的地图图像),他们通常需要注册/注册并获取访问令牌才能访问该服务.

现在,如果我将从服务器端使用API​​ - 没有问题:我知道我的令牌安全地存储在服务器上的某个地方,并且仅在我的服务器和服务提供商之间的通信时"暴露".但是,在JavaScript API的情况下(例如,如果我使用Leaflet从MapBox渲染地图),我应该在JavaScript中将访问令牌暴露给用户的Web浏览器 - 因此它非常容易找到某人的访问令牌.在我的例子中,只需使用Leaflet访问任何网站并在Firefox中打开"开发工具",就可以在一分钟细致地阅读他们的JavaScript代码时显示他们使用的令牌.

然而,对于我来说,这个令牌应被视为非常安全的数据 - 基于此令牌提供的身份验证来跟踪服务使用情况.如果您根据其使用情况支付服务费用就变得非常关键,但即使您没有(例如,如果您使用免费/入门/非付费计划) - 服务使用有限,我想确定只有我使用它.

显然,有一些策略,例如服务提供商的IP /域过滤,但似乎并非所有服务提供商都支持这种策略 - 例如,MapBox似乎没有(或者我没有找到它).或者,最终,我可以通过我的网络服务器代理服务,但这非常重.

考虑到所有这些 - 有没有办法保护JavaScript API使用的访问令牌访问外部服务,前提是JavaScript是在用户的浏览器中执行的？

我正在使用Mapbox GL JS v0.14.2并且我通过文档搜索了高低,并且很少有人清楚这一点.

如果您使用标准的JS API,那么使用他们提供的示例"非常适合使用贴图"(https://www.mapbox.com/mapbox.js/example/v1.0.0/fit-map-to - 标记/); 但是使用GL api时的设置是完全不同的.该GL API有getBounds()(https://www.mapbox.com/mapbox-gl-js/api/#Map.getBounds),而是因为你没有命名图层,像标准JS API,所以我挣扎找出如何使用getBounds().

我发现这个(Mapbox GL JS API Set Bounds)但肯定不是正确的答案？

这是我的大部分设置; 排除JSON设置和其他选项.

mapboxgl.accessToken = '<myaccesstoken>';

var markers = <?php echo $programme_json; ?>;

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/richgc/cikyo5bse00nqb0lxebkfn2bm',
    center: [-1.470085, 53.381129],
    zoom: 15
});

map.on('style.load', function() {
    map.addSource('markers', {
        'type': 'geojson',
        'data': markers
    });

    map.addLayer({
        "id": "markers",
        "interactive": true,
        "type": "symbol",
        "source": "markers",
        "layout": {
            "icon-image": "venue-map-icon-blue",
            'icon-size': 0.5, …

是否可以将文本添加到自定义图标标记？我想避免在图像编辑器中编辑图标只是为了添加文本.

我创建了自定义图标标记,如下所示:

var airfieldIcon = L.icon({
        iconUrl: 'images/airfield.png',
        iconSize: [48,48]
});

var airfield = L.geoJson (airfield, {
    pointToLayer: function(feature,latlng){
        return L.marker(latlng, {
            icon: airfieldIcon
        })
    }
}).addTo(map);

如何将"Banff Airfield"文本添加为​​此图标的标签？使用图像编辑器是最简单,最有效的方法吗？如果是这样,我会采用这种方法,但想知道是否有更好的方法.谢谢!

我试图整合OpenStreetMap到一个反应原生的项目.但是我找不到任何库或任何与他们github帐户中的本地反应相关的东西(下面给出的链接).

https://github.com/openstreetmap

我能找到与这些主题相关的唯一内容是以下链接,其中没有正确的答案.

https://www.reddit.com/r/reactnative/comments/5fi6bg/how_to_add_openstreetmap_to_a_react_native_project/

但是,一个人都表示,mapbox使用openstreet map他们的source.The mapbox建议将其集成到一个好办法react-native项目(如下链接).

https://github.com/mapbox/react-native-mapbox-gl

有没有一种方法可以集成openstreet map到一个react-native项目中,或者他们还没有为它创建适当的支持.

我正在寻找一种解决方案,允许使用OpenStreetMap数据在iOS中渲染基于2D顶视图矢量的地图,而不是使用来自服务器的预渲染切片.与iOS6 +中的Apple和Google Maps类似.

我对这个问题进行了广泛的研究,但没有找到太多的信息.
有许多iOS应用程序可以执行此操作,但没有关于它们如何实现它的信息.其中几个应用程序是:

• 由skobbler创建的ForeverMap 2
• 伽利略离线地图
• OffMaps 2

前两个应用程序的工作方式类似于Apple和Google Maps.每当缩放变化时,地图都会实时绘制.
最后一个似乎使用了略有不同的方法.它以特定缩放级别呈现矢量数据并创建切片,然后将切片用作从切片服务器下载的普通切片.因此渲染引擎实际上可以是Route-Me库的tile源,但是不是下载tile而是动态渲染它们.

第一种方法是优选的.

[问]我猜一旦OpenGL ES渲染器到位,就可以在方法之间切换.我的意思是你可以使用渲染器作为Route-Me的源来创建磁贴,或者你可以将它用作实时抽屉,类似于游戏.我对吗？

我找到的最接近的解决方案是OpenStreetPad.但是,它使用的是Core Graphics而不是OpenGL ES,因此渲染不是硬件加速的.

Mapbox表示他们正在研究矢量图块,他们可能会提供一个iOS渲染解决方案,但是它可能会使用Mapnik,因此我不确定它的效率如何.自2013年中期以来,没有ETA.

[问]您是否了解其他任何图书馆,论文,指南,示例或其他有关如何处理此问题的有用信息？基本上如何处理OSM数据以及如何实际使用OpenGL ES/GLKit在设备上绘制数据.也许一些做过它的人可以分享一些东西？