标签: mapbox

我正在尝试在地图上方添加一个按钮，以显示用户的当前位置。

基本上我想复制内置按钮的功能，但制作一个更明显的按钮。

这是我的代码：

<script>
  var map = L.mapbox.map('map', 'plisvb.hopljoko');
  L.control.locate({
    drawCircle: true, // controls whether a circle is drawn that shows the uncertainty about the location
    setView: true, // automatically sets the map view to the user's location, enabled if `follow` is true
    keepCurrentZoomLevel: false, // keep the current map zoom level when displaying the user's location. (if `false`, use maxZoom)
    icon: 'icon-location', // `icon-locate` or `icon-direction`
    iconLoading: 'icon-spinner  animate-spin', // class for loading icon
    circlePadding: [0, 0], // padding …

我有一张地图，我在上面使用 geoJSON 加载标记。

当地图加载时，我运行一个函数buildVisibleSys，该函数负责在地图上构建当前可见系统的列表。

该函数如下所示：

buildVisibleSys = function() {
  var bounds, visibleSys;
  visibleSys = [];
  bounds = map.getBounds();
  return systemLocations.eachLayer(function(marker) {
    var link;
    link = onScreenEl.appendChild(document.createElement('a'));
    link.href = '#';
    link.id = "marker" + marker._leaflet_id;
    link.innerHTML = marker.options.title;
    link.onclick = function() {
      marker.openPopup();
      map.panTo(marker.getLatLng());
    };
  });
};
map.on('load', buildVisibleSys);

在此函数中，对于每一层，我都会获取一些数据并使用每个标记的名称构建一个 html 块。与 var 关联的每个名称都link附加了一个 onclick 事件，该事件将使地图以相应的标记为中心。除了marker.openPopup()我在该onclick活动中也接到的电话之外，这一切都有效。

知道我在这里缺少什么吗？

我还在这里提供了代码的演示： http ://jsfiddle.net/lmartins/z8wBW/

更新：更令我困惑的是，使用鼠标悬停时，相同的方法可以正常工作，也就是说，在上面的函数中，以下代码确实打开弹出窗口：

   link.onmouseover = function(ev) {
      marker.openPopup();
      marker._icon.classList.add('is-active');
    };

有没有人成功实现或找到一个插件，允许 MapBox API 在考虑地球曲线的同时在地图上的两点之间绘制最短的直线？谷歌地图已经有这个，请参阅此链接：

https://developers.google.com/maps/documentation/javascript/examples/geometry-headings?hl=nl

尝试拖动标记。我不知道在墨卡托地图上以这种方式计算路线的官方术语是什么，我将尽快编辑这个问题的标题。

我正在使用在地图上生成的输入字段。我想将输入字段的占位符文本从“搜索”更改为“搜索位置”。

输入字段没有类或 id，但其父字段有。我尝试使用下面的 jQuery 初始化后进行更改，但无济于事。

$('.leaflet-control-mapbox-geocoder-form input').attr("placeholder","Search for Location");

下面是一个可见输入字段的小提琴。我很高兴继续使用 jQuery 或通过纯 JS。

http://jsfiddle.net/teraw600/

我想知道如何计算使用 Mapbox 中的此代码创建的多边形的中心： https: //www.mapbox.com/mapbox.js/example/v1.0.0/show-polygon-area/ 我想创建多边形后，在其中心放置一个标记。提前致谢。

我可以在 Google 地图中使用

polyline.map = nil 

和

mapView.clear() 

但我找不到任何相关的方法。

太长了；如何将弹出窗口添加到地图框“线”类型图层？

我有一个加载地图盒地图并向其添加线条层的函数。

我的目标是在单击该行时添加一个弹出窗口。我按照示例添加了一个点击事件。但这给了我一个错误。关于我做错了什么的任何指示吗？

   function renderLineLayer(layerName,data) {
        map.on('load', function() {
            map.addLayer({
                "id": layerName,
                "type": "line",
                "source": {
                    "type": "geojson",
                    "data": data

                },
                "layout": {
                    "line-join": "round",
                    "line-cap": "round",
                    "visibility":"visible"
                },
                "paint": {
                    "line-color": "blue",
                    "line-width": 8
                }
            });

            console.log(map.getLayer(layerName));        

            map.on('click', layerName, function (e) {
                console.log('click');                
                new mapboxgl.Popup()
                  .setLngLat(e.lngLat)
                  .setHTML(e.features[0].properties.name)
                  .addTo(map);

            });
        });

    }

我得到的错误是。

TypeError: listeners[i].call is not a function[Learn More]  mapbox-gl-dev.js:29779:13

我可以将 ArcGIS Server REST 服务 API 消费到 MapBox GL API 中吗？请任何人告诉我是否可以将 ArcGIS Rest 服务消费到 MapBox GIS 中。谢谢！！

我正在努力创建一个悬停效果，我认为应该非常简单，并且也是使用 Mapbox gl js 的开发人员的常见用例。

我有一张有 2 层的地图。第 1 层是符号图层，使用图标来标记地图上的点。第 2 层是符号层，在第 1 层的图标顶部显示分数（文本）。

这是描述该问题的视频

我使用过滤alahttps://www.mapbox.com/mapbox-gl-js/example/hover-styles/来监听鼠标事件并在适当的时候隐藏和显示第2层。

在我的代码中，我正在监听第 1 层上的mouseenter事件mouseleave。我的问题是，当第 2 层通过过滤器的更改显示时，它会导致第 1 层触发 mouseleave 事件，因为第 2 层位于第 1 层之上。鼠标在第 2 层上移动mouseenter，mouseleave当鼠标事件穿过第 2 层的文本行向下到达第 1 层时，第 1 层的事件会不断触发。这会导致第 2 层在显示和隐藏时闪烁。

我尝试过的事情：

• 我尝试使用“之前”参数https://www.mapbox.com/mapbox-gl-js/example/geojson-layer-in-stack/

• 我尝试创建一个位于第 1 层和第 2 层之上的新层（第 3 层），其中包含与第 1 层大小相同的透明图标，并侦听第 3 层上的鼠标事件。

• 我尝试通过 setStyle （而不是使用过滤器）切换第 2 层的可见性。

• 我尝试将第 2 层内容作为第 1 层的文本字段，并寻找一种在悬停时显示地图框图层的文本字段的方法（无法弄清楚......这可能吗？）

当通过过滤或样式更改修改图层时，Mapbox gl js 似乎会重新绘制图层顺序。重画似乎总是将受影响的图层放在顶部！？

任何指示或建议将不胜感激。相当难住！

谢谢阅读！

我目前正在研究一段代码，它使用 MapBox GL JS 并有一个看起来像这样的 addSource() 函数

this.mapAdapter.map.addSource(`${this.asset.uuid}-data`, {
        type: 'geojson',
        data: this.getMapboxGeometry(),
      })

另一个 addLayer() 函数看起来像这样

this.mapAdapter.map.addLayer({
        id: `${this.asset.uuid}-polygon`,
        type: 'fill',
        source: `${this.asset.uuid}-data`,
        filter: ['==', '$type', 'Polygon'],
        }

我想知道源和层之间的区别是什么。我似乎找不到合适的明确定义。

特征采集的代码如下

 type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      properties: {},
      geometry: {
        type: 'Polygon',
      ...}

图层是否以某种方式与要素集合相关？

图块集是来源的另一个名称还是完全不同？