标签: mapbox-gl-js

我目前正在 Mapbox 上进行可视化，该可视化主要针对给定区域，在此示例中假设为德克萨斯州。我想让这个区域在地图上得到强调，而其他所有东西都淡入背景。

到目前为止，我已成功将 Natural Earth 的 shapefile 导入 Mapbox Studio，以使德克萨斯州以外的所有地方的阴影变暗：

这很棒，但理想情况下我想隐藏德克萨斯州以外的所有 Mapbox 标签。我一直在尝试使用 Mapbox studio 中的过滤器来“过滤掉”每个图层上的所有项目，但似乎它们的图层设置不允许我根据地理空间属性（仅限数据属性）进行过滤。

有谁知道我可以隐藏德克萨斯州以外所有城市标签的方法吗？要么在 js Mapbox GL 库上以编程方式，要么最好通过 Mapbox Studio？

如何向弹出窗口添加按钮并向onClick功能添加按钮？

.setPopup(new mapboxgl.Popup({ offset: 25 })
.setHTML('<button onclick=' + { this.handlePop } + '> Button</button>'))
.addTo(map);

这是行不通的。

我正在寻找一种在我的反应本机应用程序中使用 OpenStreetMap 数据的方法。在我最近的研究中，我发现了MapLibre，它是基于 MapBox GL 旧版本的免费选项。我面临的问题是，除了@react-native-mapbox-gl/maps之外，我找不到任何插件可以在 React Native 中使用它。因此，在他们的文档中说：“我们现在也支持 Mapbox SDK 的 MapLibre 风格”，但他们提出的示例如下：

import { StyleSheet, View } from "react-native";
import MapboxGL from "@react-native-mapbox-gl/maps";

MapboxGL.setAccessToken("<YOUR_ACCESSTOKEN>");

const styles = StyleSheet.create({
  page: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  container: {
    height: 300,
    width: 300,
    backgroundColor: "tomato"
  },
  map: {
    flex: 1
  }
});

export default class App extends Component {
  render() {
    return (
      <View style={styles.page}>
        <View style={styles.container}>
          <MapboxGL.MapView style={styles.map} />
        </View>
      </View> …

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

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

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

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

map.touchZoomRotate.disable();

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

使用Vue 3 + typescript + vite。

已经用Vite + Vue 3 +typescript搭建了项目。使用谷歌地图时遇到麻烦，因为它需要付费。然后尝试了 Mapbox，地图部分工作正常，但在添加 MapboxGeocoder 时显示错误。

出现此错误

TypeError: EventEmitter is not a constructor
    at new MapboxGeocoder (index.js:74)
    at temp.vue:30
    at callWithErrorHandling (runtime-core.esm-bundler.js:6668)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:6677)
    at Array.hook.__weh.hook.__weh (runtime-core.esm-bundler.js:1931)
    at flushPostFlushCbs (runtime-core.esm-bundler.js:6869)
    at render2 (runtime-core.esm-bundler.js:4807)
    at mount (runtime-core.esm-bundler.js:3140)
    at Object.app.mount (runtime-dom.esm-bundler.js:1572)
    at main.ts:16

如何解决这个错误。需要帮忙。

代码块

<script setup lang="ts">
import mapboxgl from "mapbox-gl";
import MapboxGeocoder from "@mapbox/mapbox-gl-geocoder";
import "@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css";

onMounted(() => {
  try {
    mapboxgl.accessToken =
      "TOKEN";

    const map = new mapboxgl.Map({
      container: "map", …

这个问题类似于以下问题：

1. 在 Cypress 中测试拖动 Leaflet 地图
2. Cypress 和 Google 地图拖动移动元素，而不是地图

我希望能够模拟用户单击并拖动以将Mapbox GL JS地图平移一定距离。虽然这看起来是正确的方法，但使用cypress 触发器功能似乎不起作用。对于 Leaflet 链接，使用了一个单独的插件来操作 html 画布。使用 Mapbox 进行平移是否有类似的解决方法？

我在这里创建了一个独立的存储库，其中还有一个针对标记操作的测试： https: //github.com/brianbancroft/example-mapbox-cypress-e2e

这是测试本身：

  it("drags ", () => {
    const map = cy.get("#map");
    map.should("exist");

    const canvas = cy.get(".mapboxgl-canvas");

    map
      .trigger("mouseenter", 700, 250)
      .trigger("mousedown", 700, 250, {
        bubbles: true,
        waitForAnimations: true,
        // which: 1,
        // pageX: 700,
        // pageY: 250,
      })
      // .wait(100)
      .trigger("mousemove", {
        bubbles: true,
        waitForAnimations: true,
        pageX: 550,
        pageY: 250,
        which: 1,
      })
      .wait(100) …

我有这样的代码：

import React, { Component } from 'react'\nimport MapboxGL from '@react-native-mapbox-gl/maps'\n\nMapboxGL.setAccessToken( 'xxxx' )\n\nexport default class DebugMap extends Component {\n\n  render() {\n    return <View style={{ flex: 1}}>\n        \n      <MapboxGL.MapView\n          ref={(c) => (this.map = c)}\n          onPress={v => this.map.moveTo( 40, 10 )}\n          style={{flex: 1}}>\n\n          <MapboxGL.Camera\n            zoomLevel={10}\n            centerCoordinate={[50, 20]}\n          />\n        </MapboxGL.MapView>\n\n    </View>\n  }\n}\n

地图通常显示为以 为中心50, 20，但如果我按下它，则会引发错误：

TypeError: _this3.map.moveTo is not a function. (In '_this3.map.moveTo(48, 11)', '_this3.map.moveTo' is undefined)\n

我缺少什么？

更新：

如果我console.info( 'load map', this.map ) …

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

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

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

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

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

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

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

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

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

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

我很难使用 Mapbox GL 设置功能 ID。

我读到generateId:true您可以在源中使用自动生成 ID ：

是否为geojson特征生成id。启用后，feature.id 属性将根据其在 features 数组中的索引自动分配，覆盖任何以前的值。

除了我想在其他地方使用我的数据而不仅仅是mapbox地图（旁边的标记列表）；所以我想手动设置它们，因为我希望能够从我的列表中定位地图上的功能。所以，我不想generateId:true在这里使用。

在文档中，他们的数据集示例如下

  {
    "type": "FeatureCollection",
    "features": [
      {
        "type": "Feature",
        "properties": {
          "id": "marker-iv1qi3x10",//an ID here
          "title": "Burnham Park",
          "description": "A lakefront park on Chicago's south side.",
          "marker-size": "medium",
          "marker-color": "#1087bf",
          "marker-symbol": "marker-blue"
        },
        "geometry": {
          "coordinates": [
            -87.603735,
            41.829985
          ],
          "type": "Point"
        },
        "id": "0de616c939ce2f31676ff0294c78321b"//another ID here
      }
    ]
  }

因此，它们在要素对象中拥有一个 ID "id": "0de616c939ce2f31676ff0294c78321b"，在该要素的属性中拥有另一个 ID "id": "marker-iv1qi3x10"。

generateId我猜想，mapbox …

我有一个带有图标的点图层，我想仅从特定的缩放级别（9）显示除图标之外的标签。我想避免创建专用的标签层。查看表达式文档，Stet和Zoom应该给我想要的结果，但它不起作用。

按照这个答案，我尝试根据缩放级别更改文本的大小，但无论缩放如何，文本将始终具有默认大小（此处 7）我是否遗漏了某些内容还是一个错误？我正在使用 Maplibre

layout: {
          "icon-image": "border_crossing",
          "icon-size": 0.5,
          "icon-allow-overlap": true,
          'text-field': ['get', 'loc_type'],
          'text-variable-anchor': ['top'],
          'text-radial-offset': 0.5,
          'text-justify': 'auto',
          "text-size": [ "step", 
              ["zoom"], 
              0,0,
              9,15,
              7
            ]
        }