标签: mapbox-gl-js

如何实现Mapbox GL地图的平滑地图宽度过渡？

我有 CSS3 过渡来减少地图元素的宽度。当更改地图块宽度以以编程方式更新地图宽度时，我必须触发 map.resize() 。它跳到新的宽度，没有过渡（这是预期的）

有没有办法实现地图块宽度过渡的动画？除了通过 JS 更改地图块宽度并在每帧上触发调整大小之外。

另一种方法是创建将在其中渲染地图覆盖整个宽度的块，然后使用溢出缩小该块：隐藏并使用偏移量稍微平移地图中心点。但在这种情况下，我们会得到宽地图，并且图块将在后台加载（即使块的那部分是隐藏的）我想。

mapbox-gl-js

Ran*_*iev

lucky-day

5
推荐指数

0
解决办法

466
查看次数

如何更改 Mapbox-gl maki 图标颜色？

我正在使用Mapbox-gl.js (v0.38.0) 和Maki图标、Ionic3 和 angular4。我不想使用mapbox.js。我已经完成了我想要的操作，但默认情况下图标颜色为“棕色”。但我希望它的颜色为“绿色”。

我尝试了与mapbox-gl 示例类似的以下链接，

如何自定义颜色和其他图标属性

mapbox mapbox-gl mapbox-gl-js mapbox-marker

Pri*_*nce

2020 06-20

5
推荐指数

0
解决办法

2047
查看次数

将地图盒中的图块集添加到我的地图中

我是 Mapbox 的新手，最近我想创建一个网络地图。我将一个形状上传到 mapbox tilseset cloud 中，但是当我尝试将其添加到地图中时，它不显示。这是我正在使用的代码函数：

        map.on('load', function() {
        map.addLayer({
            'id' : 'Resguardos',
            'type' : 'fill',
            "source" : {
                'type' : 'vector',
                'url' : 'mapbox://fabiofz1990.9lhgml6c',
            },
            'layout' : {},
            'paint' : {
                'fill-color' : '#0044b2',
                'fill-opacity' : 1
            }
        });

    });

Run Code Online (Sandbox Code Playgroud)

谢谢

html web-applications mapbox mapbox-gl mapbox-gl-js

Fab*_*ala

2017 06-29

5
推荐指数

2
解决办法

2496
查看次数

如何忽略地图框图层上的鼠标事件

我在 Mapbox 地图上构建了一个标记，当用户将鼠标悬停在其上时，该标记如下所示：

我遇到的问题是文档图标是与背景图钉不同的层。这样用户就可以上传自定义图标。当使用mouseover和mouseleave事件在背景图钉层上创建悬停弹出窗口时，当用户将鼠标悬停在图标层上时，弹出窗口会闪烁。这是因为从技术上讲，用户正在离开后台 pin 层。

我知道有一些 javascript hack 可能会造成混乱，但我真正寻找的是一种“忽略”mapbox 图层上事件的方法。这可能吗？

编辑：这里的标记被渲染为 Mapbox 层，而不是 HTML 标记，因此是使用画布绘制的（我相信），所以使用 CSS 来忽略事件是不可能的。

javascript mapbox mapbox-gl-js

Ben*_*lph

2018 02-01

5
推荐指数

1
解决办法

1794
查看次数

使用 Mapbox GL JS 切换图层

我想在 Mapbox GL JS 中的图层之间切换。我创建了一些单选按钮，它们在一定程度上起作用，您可以从一层切换到另一层，但不能来回切换。

下面是到目前为止我用于切换图层的代码：

    var layerList = document.getElementById('toggle');
    var inputs = layerList.getElementsByTagName('input');

    function switchLayer(layer) {
        var layerId = layer.target.id;
        map.setLayoutProperty(layerId, 'visibility');
    }

    for (var i = 0; i < inputs.length; i++) {
    inputs[i].onclick = switchLayer;
    }

Run Code Online (Sandbox Code Playgroud)

这是其余的代码（简化）和 jsbin 的链接https://jsbin.com/cigekutiho/edit?html,output

   <!DOCTYPE html>
   <html>
   <head>
   <meta charset=utf-8 />
   <title>Test</title>
   <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
   <link rel="stylesheet" type="text/css" href="css/style.css" />
   <script src='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.js'> 
   </script>
   <link href='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.css' rel='stylesheet' />
   <script src='https://api.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script>
   <link href='https://api.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet'/>
   <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.2.0/mapbox-gl-geocoder.min.js'></script>
   <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.2.0/mapbox-gl-geocoder.css' type='text/css' />
   <link href='https://www.mapbox.com/base/latest/base.css' …

Run Code Online (Sandbox Code Playgroud)

data-visualization cartography mapbox mapbox-gl-js

use*_*080

lucky-day

5
推荐指数

1
解决办法

1万
查看次数

如何考虑俯仰和方位来获取mapbox-gl地图视口边缘坐标？

我无法理解如何获取用户更改俯仰和方位后的地图视口坐标

这是我的代码的示例 - https://jsfiddle.net/5uwdfhdp/6/ 我使用.getBounds()方法，但它似乎工作错误。

在用户旋转地图之前单击地图后，我得到一个正确的矩形，之后 - 一些荒谬的事情。

我可能使用了错误的坐标，但在我看来，mapbox 方法无法按预期工作。

javascript mapbox-gl-js

Ran*_*iev

2018 12-09

5
推荐指数

1
解决办法

6258
查看次数

带有符号层的 MapBox GL 自定义标记

我正在尝试在 MapBox GL JS 中聚集自定义标记，但我不知道如何将自定义标记图像从 url 获取到符号层？它要么不起作用，要么根本不显示任何标记。它是如何完成的？我需要知道如何使用带有符号层的 url 中的自定义图像。非常感谢。

map.addSource('parcelpoints', {
        type: 'geojson',        
        data: geojson,
        cluster: true,
        clusterMaxZoom: 14, // Max zoom to cluster points on
        clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
    });

    map.addLayer({
        id: 'clusters',
        type: 'circle',
        source: 'parcelpoints',
        filter: ['has', 'point_count'],
        paint: {
            // Use step expressions (https://www.mapbox.com/mapbox-gl-js/style-spec/#expressions-step)
            // with three steps to implement three types of circles:
            //   * Blue, 20px circles when point count is less than 100
            // …

Run Code Online (Sandbox Code Playgroud)

mapbox-gl-js mapbox-marker

blg*_*lg2

lucky-day

5
推荐指数

1
解决办法

7197
查看次数

基于本地geojson文件的mapbox 3D挤压

我在网上看到过这个例子，它进行数据驱动的建筑挤压，但根本不提供代码。

我非常想实现同样的目标。我有一个 geojson 文件，其中包含某种属性，我想将其映射到建筑物的高度。你知道这怎么可能吗？

我已经考虑了推荐的替代方案：对已经根据我的数据生成的圆进行 3D 挤压。未提供此博客文章中的代码，因此我起诉了此帖子中的代码。

代码如下：

<html>
<head>
    <meta charset='utf-8' />
    <title>Display buildings in 3D</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.css' rel='stylesheet' />
    <script src='https://npmcdn.com/@turf/turf/turf.min.js'></script> 
    <style>
        body {
          margin: 0;
          padding: 0;
        }

        #map {
          position: absolute;
          top: 0;
          bottom: 0;
          width: 100%;
        }
    </style>
</head>
<body>

<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoicXVlMzIxNiIsImEiOiJjaWhxZmMxMDUwMDBzdXhsdWh0ZDkyMzVqIn0.sz3lHuX9erctIPE2ya6eCw';

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v9',
  center: [8.538961, 47.372476],
  zoom: 16,
  pitch: 40, …

Run Code Online (Sandbox Code Playgroud)

javascript maps mapbox turfjs mapbox-gl-js

LBe*_*Bes

lucky-day

5
推荐指数

1
解决办法

2822
查看次数

Mapbox GL JS 画布在 Bootstrap 模式中无法正确显示

根据Mapbox GL JS 快速入门指南，使用 Mapbox CDN 在网站上实现地图应该很简单。不幸的是，如果地图位于 Bootstrap 模态内部，则情况并非如此，该模态没有预定义宽度，该属性仅在模态打开后设置。

结果是加载默认宽度为 400px 的 Mapbox 画布，这可能与模态宽度不同并造成糟糕的用户体验。

此外，如果打开模式，然后调整浏览器窗口的大小，地图会自动按预期适合整个水平空间，这似乎是对调整大小事件的 JavaScript 响应。

下面是相关代码。

HTML 文件

<div id='map'></div>

Run Code Online (Sandbox Code Playgroud)

CSS文件

#map {
  height: 300px;
}

Run Code Online (Sandbox Code Playgroud)

JS文件

mapboxgl.accessToken = '...';
var map = new mapboxgl.Map({
    container: 'map',
    center: [..., ...],
    zoom: 10,
    style: 'mapbox://styles/mapbox/streets-v11'
});

Run Code Online (Sandbox Code Playgroud)

我尝试在 Bootstrap 3.4.0 模式中加载 Mapbox，就像我以前在使用 Google 地图或 Bing 地图时所做的那样，但在这两种情况下都嵌入在 iframe 中。因此，我期待看到 Mapbox 能够像 Google 地图和 Bing 地图一样填充整个模式。

相反，Mapbox 界面（左下角徽标和右下角信息按钮）正确定位在模式内部的边界处，但包含地图的画布定位不正确。

最后，为 #map CSS 属性设置预定义宽度并不是解决方案。如果宽度设置为固定宽度（以像素为单位），则可能无法在所有窗口尺寸上正确显示，而添加固定百分比宽度（例如 100%）则无法解决问题。

javascript twitter-bootstrap mapbox bootstrap-modal mapbox-gl-js

Gab*_*nes

2019 02-14

5
推荐指数

1
解决办法

4674
查看次数

如何使用mapbox在同一坐标上设置多个标记？

我使用 Mapbox GL 来引用位于非洲的视频游戏公司。所有这些公司都放置在地图上： https: //africangamingnetworks.com/

当我有多个具有相同坐标的标记时，例如喀麦隆雅温得的两家公司，mapbox 仅显示第一个标记，因为它们具有相同的纬度和经度。

我怎样才能显示具有相同坐标的所有标记？

提前致谢。

<%@ include file="/init.jsp"%>
<div class="shadow row">
    <div class=" col-12 rounded-sm " id='map'
        style='height: 800px;'></div>

</div>


<script>
    mapboxgl.accessToken = 'pk.eyJ1Ijoia29zdGVkIiMWQzbXA3M2ZxYmd5MnkifQ.faOl-gGzibR9yMpZ-i7FTQ';
    var map = new mapboxgl.Map({
        container : 'map',
        style : 'mapbox://styles/mapbox/streets-v11',
        zoom : 2
    // starting zoom
    });

    // Add zoom and rotation controls to the map.
    map.addControl(new mapboxgl.NavigationControl());

    var studioListComplete = [];

    <c:forEach var="studio" items="${studioList}">

    studioListComplete
            .push({
                "type" : "Feature",
                "properties" : {
                    "description" : "<strong>${studio.studioName} (${studio.country})</strong> <br/><br/>" + 
                                    "${studio.studioDescription}<br/><br/>"+ …

Run Code Online (Sandbox Code Playgroud)

mapbox mapbox-gl mapbox-gl-js

Ted*_*oko

lucky-day

5
推荐指数

1
解决办法

6246
查看次数