标签: mapbox

在 MapBox Android 中检测运动的完全结束

我希望在 MapBox 的 Android SDK 中检测地图运动的完全结束。我所说的完全结束是指不再有用户交互（触摸）和相机移动（触摸移动或快速惯性）。

由于 SDK 中没有此类回调，因此我在 , 上组合了两个侦听器MapView，OnTouchListener如下OnMapChangedListener所示（在 Kotlin 中，但非常清楚）：

mapView.setOnTouchListener { _, event ->
    when (event.actionMasked) {
        MotionEvent.ACTION_DOWN -> {
            listener?.onMapDragBegin()
        }
        MotionEvent.ACTION_UP -> {
            listener?.onMapDragEnd()
        }
    }
    false
}

mapView.addOnMapChangedListener { c ->
    when (c) {
        MapView.REGION_WILL_CHANGE, MapView.REGION_WILL_CHANGE_ANIMATED -> {
            listener?.onMapMovementBegin()
        }
        MapView.REGION_DID_CHANGE, MapView.REGION_DID_CHANGE_ANIMATED -> {
            listener?.onMapMovementEnd()
        }
    }
}

Run Code Online (Sandbox Code Playgroud)

侦听器等待两个事件结束。除了一个微小的细节之外，这种方法工作得很好：当用户停止触摸屏幕时，两个结束事件都会被发送，并且只有在地图REGION_WILL_CHANGE_ANIMATED更改之后才会被调用。所以有时候我不知道地图是否还在移动。在日志中看起来像这样：

19:23:42.431: Map touch started
19:23:42.537: Map region change started
19:23:42.538: Map region change ended
...
19:23:42.570: …

Run Code Online (Sandbox Code Playgroud)

android mapbox

Juk*_*rpa

lucky-day

5
推荐指数

1
解决办法

2300
查看次数

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

我是 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
查看次数

基于本地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
查看次数

Android Mapbox SDK v10：归因位置；用户界面设置

如何调整中的徽标和归属com.mapbox.mapboxsdk.maps.MapView？在较旧的 SDK v9 中，可以通过 XML 属性（或通过以编程方式更改 UiSettings）简单地设置 UiSettings。

mapbox:mapbox_uiAttributionMarginBottom="8dp"
mapbox:mapbox_uiAttributionMarginLeft="32dp"

Run Code Online (Sandbox Code Playgroud)

知道如何在 Mapbox SDK v10 上实现相同的效果吗？

android mapbox mapbox-android

Fra*_*cis

2021 09-22

5
推荐指数

1
解决办法

741
查看次数

禁用mapbox中的一指缩放功能

我一直在寻找禁用 Mapbox 中的单指缩放手势。

借助此功能，您可以通过双击并拖动用一根手指进行缩放。第二次点击时，按住手指并向上或向下拖动以放大或缩小。

简要解释 https://docs.mapbox.com/mapbox-gl-js/api/handlers/#touchzoomrotatehandler#enable

问题是您可以使用以下调用按照上面的链接禁用此功能。

map.touchZoomRotate.disable();

Run Code Online (Sandbox Code Playgroud)

但如果我禁用该功能，两指缩放功能也会消失。有什么办法可以单独禁用单指手势吗？谢谢！！！

mapbox mapbox-gl-js

jot*_*jot

lucky-day

5
推荐指数

1
解决办法

415
查看次数

如何在改变浏览器宽度时使mapbox调整大小

如何调整下面的代码，以便在调整浏览器/屏幕大小时调整地图大小？（第一次在没有高级开发人员帮助的情况下使用 Mapbox）。

根据我自己的研究，有一些代码库可以在地图容器上添加事件侦听器并侦听该事件侦听器以调整大小，然后我可以以编程方式调用 map.resize() 。但是，我想知道最佳实践是什么，因为这种方式感觉有点老套。

代码

const applyToArray = (func, array) => func.apply(Math, array)
const getBoundsForPoints = (points) => {
  console.log('Points:', points)
  // Calculate corner values of bounds
  const pointsLong = points.map(point => point.geometry.coordinates[0])
  const pointsLat = points.map(point => point.geometry.coordinates[1])
  const cornersLongLat = [
    [applyToArray(Math.min, pointsLong), applyToArray(Math.min, pointsLat)],
    [applyToArray(Math.max, pointsLong), applyToArray(Math.max, pointsLat)]
  ]
  // Use WebMercatorViewport to get center longitude/latitude and zoom
  const viewport = new WebMercatorViewport({ width: 600, height: 600 })
    // @ts-ignore
    .fitBounds(cornersLongLat, { padding: {top:20, bottom: 90, …

Run Code Online (Sandbox Code Playgroud)

mapbox reactjs

Ben*_*ngy

2021 12-15

5
推荐指数

1
解决办法

2908
查看次数

使用纯背景时，“使用“文本字段”需要样式“字形”属性”

根据这个答案，我使用的是纯背景，而不是使用 MapBox 样式

var map = new mapboxgl.Map({
    container: 'map',
    style: {
      version: 8,
      sources: {},
      layers: [
        {
          id: 'background',
          type: 'background',
          paint: {'background-color': 'white'}
        }
      ]
    }
});

Run Code Online (Sandbox Code Playgroud)

我添加了一个GeoJSON点图层并尝试对其进行标记：

'layout': {
  'text-field': ['get', 'name'],
  'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
},

Run Code Online (Sandbox Code Playgroud)

如果我对地图使用标准 MapBox 样式，则图层会被正确标记。但如果我使用前面提到的空白底图，该图层会返回错误：

使用“文本字段”需要样式“字形”属性

搜索此错误消息表明我需要添加一个glyphs选项：

"glyphs":"mapbox://fonts/mapbox/{fontstack}/{range}.pbf"或者"glyphs":"https://fonts.openmaptiles.org/{fontstack}/{range}.pbf"

但是，这些选项都不能阻止错误消息，并且不会标记图层。

glyphs使用空底图时参数的正确语法是什么？

mapbox mapbox-gl-js

Ste*_*ead

2022 03-11

5
推荐指数

1
解决办法

2911
查看次数

如何解决使用 Mapbox GL JS 需要有效的 Mapbox 访问令牌的问题？

这是我的代码，结果是没有。

import React, {Component} from 'react';
import ReactMapBox from 'react-map-gl';
import 'mapbox-gl/dist/mapbox-gl.css';

class MapExample1 extends Component {
    state = {
        viewport: {
            width: "100vw",
            height: "100vh",
            latitude: 42.430472,
            longitude: -123.334102,
            zoom: 16
        }
    };
    render() {
        console.log("Entering console.log in MapExample1.js ");
        return (
            <ReactMapBox
                {...this.state.viewport}
                onViewportChange={(viewport => this.setState(viewport))}
                mapboxApiAccessToken=
                 'pk.eyJ1Ijoicm95Y2VtYXJ0aW4iLCJhIjoiY2wzODk0bmp3MDc4YjNpbnphNzRzODR1YSJ9.peCCwkWoX_RHseUf2WI1Xw'
            />
        );
    }
}

export default MapExample1;

Run Code Online (Sandbox Code Playgroud)

但在控制台检查中产生的错误是[错误：需要有效的地图框访问令牌才能使用地图框GL JS。]。

mapbox react-mapbox-gl

Roy*_*yce

2022 05-17

5
推荐指数

1
解决办法

5419
查看次数

当侧边栏宽度改变时，react-map-gl 不会调整大小

嘿伙计们，基本上我的网站目前看起来像这样。我的目标是当用户单击右上角的箭头时折叠左侧边栏，单击时将smallMapSidebar状态变为true。

但是，当侧边栏的宽度发生变化时，地图不会覆盖新空间，看起来像这样

这是我的地图组件的当前代码。

import React, { useState, useEffect, useRef } from "react";
// map imports
import Map from "react-map-gl";
import MapboxGl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";
// styling imports
import "../../styles/map/MapComponent.css";
// added the following 6 lines.
import mapboxgl from "mapbox-gl";

const TOKEN = "map-token";

function MapComponent({ smallMapSidebar }) {
  const mapRef = useRef(null);

  const resizeMap = MapboxGl.Map.prototype;

  useEffect(() => {
    // console.log(resizeMap);
    if (smallMapSidebar === true) {
      mapRef.current.resize();
      // console.log(mapRef.current);
    }
  }, [smallMapSidebar, resizeMap]);

  return (
    <div className="map-container">
      <Map
        ref={mapRef} …

Run Code Online (Sandbox Code Playgroud)

mapbox reactjs react-map-gl

Gad*_*mer

lucky-day

5
推荐指数

1
解决办法

466
查看次数