如何在Mapbox GL JS中更改多边形工具上的悬停文本？
在Mapbox GL JS中更改多边形工具上的悬停文本，可以通过自定义图层和事件监听来实现。以下是详细的步骤和示例代码：
基础概念
Mapbox GL JS 是一个用于在网页上创建交互式地图的JavaScript库。它基于WebGL技术，提供了丰富的地图渲染和交互功能。悬停文本（Hover Text）是指当用户将鼠标悬停在地图上的某个要素（如多边形）上时显示的文本信息。
相关优势
- 高度自定义：Mapbox GL JS 允许开发者高度自定义地图的外观和交互行为。
- 性能优越：基于WebGL的渲染引擎使得地图渲染速度快，性能优越。
- 丰富的交互功能：支持各种交互事件，如悬停、点击等。
类型
Mapbox GL JS 支持多种类型的地图要素，包括点、线、多边形等。本文主要讨论多边形的悬停文本自定义。
应用场景
在地图应用中，悬停文本常用于显示地理信息的详细描述，如区域名称、人口数量等，提升用户体验。
实现步骤
- 创建地图实例：首先需要创建一个Mapbox GL JS地图实例。
- 添加多边形数据：将多边形数据添加到地图中。
- 自定义悬停文本：通过事件监听和自定义图层来实现悬停文本的自定义。
示例代码
以下是一个完整的示例代码，展示了如何在Mapbox GL JS中更改多边形工具上的悬停文本：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mapbox GL JS Hover Text Customization</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.css" rel="stylesheet" />
<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 = 'YOUR_MAPBOX_ACCESS_TOKEN';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-74.5, 40],
zoom: 9
});
map.on('load', () => {
map.addSource('polygon', {
type: 'geojson',
data: {
type: 'Feature',
geometry: {
type: 'Polygon',
coordinates: [[[-74.5, 40], [-73.5, 40], [-73.5, 41], [-74.5, 41]]]
},
properties: {
name: 'Example Polygon'
}
}
});
map.addLayer({
id: 'polygon-layer',
type: 'fill',
source: 'polygon',
paint: {
'fill-color': '#088',
'fill-opacity': 0.6
}
});
map.on('mousemove', 'polygon-layer', (e) => {
const feature = e.features[0];
map.getCanvas().style.cursor = 'pointer';
map.setFeatureState(
{ source: 'polygon', id: feature.id },
{ hover: true }
);
});
map.on('mouseleave', 'polygon-layer', () => {
map.getCanvas().style.cursor = '';
map.setFeatureState(
{ source: 'polygon' },
{ hover: false }
);
});
map.on('moveend', () => {
map.getSource('polygon').setData({
type: 'Feature',
geometry: {
type: 'Polygon',
coordinates: [[[-74.5, 40], [-73.5, 40], [-73.5, 41], [-74.5, 41]]]
},
properties: {
name: 'Example Polygon'
}
});
});
map.addLayer({
id: 'polygon-hover-text',
type: 'symbol',
source: 'polygon',
layout: {
'text-field': ['get', 'name'],
'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
'text-size': 12,
'text-offset': [0, 0.6],
'text-anchor': 'top'
},
filter: ['==', ['get', 'hover'], true]
});
});
</script>
</body>
</html>解释
- 创建地图实例：使用
mapboxgl.Map创建地图实例。 - 添加多边形数据：通过
map.addSource添加多边形数据。 - 自定义悬停文本：
- 使用
map.on('mousemove', 'polygon-layer', ...)监听鼠标悬停事件。 - 使用
map.setFeatureState设置要素的悬停状态。 - 使用
map.addLayer添加一个文本图层，通过filter属性控制悬停文本的显示。
- 使用
参考链接
通过以上步骤和示例代码，你可以在Mapbox GL JS中实现多边形工具上的悬停文本自定义。
相关·内容
使用mapbox/mapbox-gl-draw可以将多边形工具添加到Mapbox贴图。我在一个ReactJS项目中使用了它。现在，我想要更改当我悬停多边形工具按钮时显示的文本。我该怎么做呢？ ? 我在mapbox-gl- the line代码中找到了将此悬停文本分配给按钮的标题属性的代码。所以我可以派生mapbox-gl-draw，只是为了改变这一行。但我不希望不得不这么做。 这是我的代码中添加多边形控件的部分： const draw = new MapboxDraw({
displayControlsDefault: false,
controls: {
polyg
浏览 85提问于2020-10-24得票数 3
所以我的问题是，我有一个平铺集，其中的几何图形是多多边形的，当我想要显示地区名称时，它会放置多个标签，而不仅仅是一个居中的标签。有没有办法解决这个问题？ Here is a screenshot for clarification 数据来自postgis数据库，我只是将其导出到CSV并上传到mapbox。 我曾尝试将多重多边形转换为单个多边形，但最终结果相同。 我也在mapbox studio中使用了文本填充，但使用此选项时，标签的位置非常不合适。 有没有可能通过Mapbox GL JS来解决这个问题？
浏览 29提问于2020-09-01得票数 0
回答已采纳
mapbox gl中高亮显示多边形的示例使用了第二个层和一个过滤器函数。在mapbox gl js中，不能更改从geojson源绘制的单个特征/多边形的颜色吗？
请参阅
浏览 22提问于2017-02-17得票数 6
根据Svelte教程中的上下文API示例，我在Svelte-Sapper应用程序中使用Mapbox。我想使用Mapbox-Draw来绘制多边形，以根据它们的坐标来限制搜索对象的区域。我对示例代码进行了扩展，添加了绘图功能： mapbox.js： import mapbox from 'mapbox-gl';
import mapboxDraw from "@mapbox/mapbox-gl-draw";
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
mapbox.access
浏览 43提问于2021-03-22得票数 0
1回答
我正在尝试使用Mapbox GL JS创建一个导航应用程序。但是文本标签和搜索框一起太小了。在Mapbox GL JS API中的哪里可以设置tilesize和ppi来修复它？
浏览 14提问于2020-03-03得票数 0
回答已采纳
我正在使用"mapbox-gl"："^1.3.0“ 所以，在mapbox GL JS中，我想知道是否有一种方法可以在图层上绘制三角形和正方形等多边形。 但问题是，我必须在geoJson类型的坐标中执行此操作:点，而不是多边形。 {"type":"Point","coordinates":[307170.943,6679032.568]} 在使用“type”时，文档中有一个这样做的示例："Polygon“。https://docs.mapbox.com/mapbox-gl-js/example/fill-patte
浏览 146提问于2019-09-18得票数 0
1回答
我正在使用数据驱动的样式来样式化一个地图框的矢量层的choropleth地图。然而，我不是严格地从图层属性中获取数据，而是需要使用来自单独对象的统计数据(从我们的数据库中提取)。这个单独的对象包含向量层中每个多边形的一个统计值。该对象通过一个名为"GEOID“的变量将状态值映射到向量层多边形。为了将多边形与其数据结合在一起，我想使用Mapbox表达式从矢量层中的每个多边形获取大地水准面值，并将此id传递给一个单独的函数，以获得具有此大地水准面的多边形的统计值。这个是可能的吗？ vectorLayer: {
id: "fooLayer",
type:
浏览 56提问于2020-05-01得票数 0
所以我尝试使用mapbox和deck.gl来可视化数据。我希望有某种悬停效果，但onHover属性不在边界层上运行 geojson数据源：https://data.cityofnewyork.us/City-Government/Borough-Boundaries/tqmj-j8zm import boundaries from "./borough-boundaries.json";
import { Deck } from "@deck.gl/core";
import { ScatterplotLayer, GeoJsonLayer } from &
浏览 33提问于2020-01-06得票数 1
背景
传单地图
一种矢量平铺层
MapBox Studio生成矢量tiles (协议缓冲区格式)
用于瓷砖托管的MapBox.com
使用Leaflet.MapboxVectorTile插件解析和呈现MapBox向量块
发行
无法获得原始的特征几何:我想获取特征几何，所以可以放大到它，例如当用户点击它。但是这个插件(Leaflet.MapboxVectorTile)并没有明确的方法。geom值(包括BBOX)都在相对坐标(即，不是原始几何)中。
识别特性能力差(点击/悬停)：这个插件的另一个问题是它的识别算法不够健壮。作者禁用悬停-识别，因为它的结
浏览 0提问于2015-04-27得票数 1
我正在尝试建立一个使用Mapbox GL JS的地图自定义控制器，其中包括绘制多边形功能。但是，当我希望按照Mapbox文档包含绘制多边形时，它会在屏幕右上角显示一个菜单。
这是works Mapbox GL JS文档提供的JS代码
var draw = new MapboxDraw({
// Instead of showing all the draw tools, show only the line string and delete tools
displayControlsDefault: false,
controls: {
line_string: true,
浏览 37提问于2020-02-18得票数 2
2回答
我正在使用mapbox-gl-js库，试图实现一个功能，用户可以将多边形添加到mapbox地图中，并在需要时对其进行编辑。我已经能够通过添加图层将多边形添加到地图中，但我不知道如何允许用户编辑它们。有没有一种简单的方法可以将多边形添加到mapbox中并更改它们是否可编辑？
浏览 110提问于2017-08-26得票数 4
回答已采纳
我正面临着Mapbox GL JS的精度问题，当在地图上放置4个角坐标的图像叠加时，会从预期位置偏移50-250米。为了得出这个结论并找到这个错误，将图像的投影与Leaflet和QGIS进行了比较，它们都显示了图像的相同位置，但Mapbox GL JS显示了一个偏移。 我认为这可能是框架中的一个bug，需要修复。我正在使用React Mapbox GL JS，并且能够在一个普通的html文件中使用Mapbox GL JS库重新创建这个问题。所以它很可能不是由React引起的。 为了重现这个问题，尝试使用Mapbox、Leaflet和QGIS在地图上叠加图像，然后比较结果。 mapbox-gl
浏览 60提问于2020-01-04得票数 0
我正在使用Mapbox，我希望允许用户将地图的背景样式从街道更改为卫星，同时在地图背景上方显示多边形层。
我已经适应了，但是我想不出如何阻止map.setStyle在我的多边形层上设置新的样式(从而隐藏)。我希望它改变，而不隐藏多边形层。
在切换层之前：
切换图层-多边形覆盖缺失后，希望继续显示它：
这是我的全部代码：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
&l
浏览 3提问于2017-03-20得票数 8
回答已采纳
我正在尝试在React中使用没有地图的Mapbox地理编码器(参见https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder-no-map/ )。我可以成功地创建refs，但是一旦我将它用作.addTo()函数中的参数，尽管refs是一个[object HTMLDivElement]，我仍然会收到以下错误消息 Error: addTo Container must be a mapbox-gl-js map or a html element reference 代码在这里：https://codesandbox.io/s/
浏览 10提问于2020-06-16得票数 0
1回答
我已经构建了一个地图，并添加了一个突出显示特定邻居的图层，我想为该图层添加一个悬停效果。就像本例中的https://docs.mapbox.com/mapbox-gl-js/example/hover-styles 我已经使用geojson创建了自己的层，但我尝试遵循的示例使用的是外部数据源，而我使用的是我自己的数据源。我试图引用我的数据，但我认为我做得不正确。请参阅此链接与工作版本显示的图层突出显示的邻里。 这是到目前为止我拥有的https://jsfiddle.net/jrax4pvm/1/的链接 这是我的JS mapboxgl.accessToken =
'pk.eyJ1I
浏览 28提问于2019-10-07得票数 3
我使用带有mapbox-gl-draw的mapbox gl在地图上将要素渲染为多边形。我想将多边形模式更改为'STATIC'(没有多边形上的交互)，只针对与特征属性对象中的条件匹配的某些多边形。当前将静态模式传递给draw-gl组件会禁用每个多边形上的交互。
示例:具有feature.properties.isDisabled == true的多边形应该没有交互。
浏览 5提问于2021-01-29得票数 0
2回答
我有一个包含大约30,000个多边形的GeoJSON数据集，每个多边形都有一个名称和地址。我已经将此作为磁贴集上传到Mapbox。
有没有可能使用Mapbox GL JS创建一个'search by attribute‘框，用户可以开始输入，搜索框提供基于名称和地址的结果供用户选择？沿着的路线
这在Mapbox中是可能的吗？我可以对tileset运行SELECT * FROM tiles WHERE name LIKE '%venet%' or address LIKE '%venet%'之类的命令，然后将结果连接到我自己的dropdown中，
浏览 10提问于2017-02-20得票数 0
我正在做一个脚本测试，如果一个入口是在一个区域，例如围绕一个点。我对服务器使用node.js，然后在API中使用JavaScript。我用多边形(区域)、中心点和自动完成的搜索来显示地图。
但是现在我想知道，如何从后面得到地理代码(延迟和经度)？
我想用这个坐标来计算，如果这些坐标在我的多边形内，例如用以下方法之一：
这里我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Adress in/out area</
浏览 2提问于2019-09-17得票数 0
回答已采纳
我使用Mapbox GL JS，具有Mapbox Streets基础图层。我已经添加了一个带有白色边框和透明填充的多边形层，但我发现很难读取多边形层下面的底图标签。查看标签如何被白色边框覆盖：
有没有什么方法可以确保标签在多边形层的顶部，或者至少不被它遮挡？
我的代码如下所示：
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-2.839, 54.579],
zoom:
浏览 29提问于2017-03-13得票数 0
回答已采纳
我正在使用Mapbox Studio中的过滤器来设置一个包含189个多边形的geoJSON文件的样式。我能够过滤我的数据来创建图层，但它只能识别我的100个多边形。我做了一些研究，发现事实上，Studio只能处理100。我正在使用此样式集成到mapbox.js地图中(我可以这样做)，但由于过滤器问题，无法格式化其余89个多边形。我下载了这个地图的JSON。我可以手动将剩余的层添加到JSON中吗？如果是这样，我如何将本地JSON文件作为我的地图样式链接到我的mapbox.js代码中？
mapbox.js代码( mapbox Studio风格有问题)：
<!DOCTYPE html>
浏览 1提问于2016-12-04得票数 1
我想在地图上添加一个geotif图像层，我可以很容易地在mapbox演播室中做到这一点，有没有办法使用mapbox gl js库。我使用下面的代码使用mapbox gl js库添加了geojson文件：
map.addSource("quakes", {
"type": "geojson",
"data": "http://localhost:3000/Srikakulam.geojson"
});
对于tiff图像，我找不到这样的解决方案。
我有数百个tiff图像可
浏览 7提问于2016-10-19得票数 1
回答已采纳
1回答
选择所有相邻多边形算法
、、、
我正在尝试使用turf.js选择mapbox gl中的所有相邻面
turf.intersect(poly[0], item);
有时它是好的，但它看起来输入多边形数据不好，并且看起来在相邻多边形坐标之间存在一些间隙(邻近点经度/纬度不匹配，或者多个多边形)，那么有没有其他算法来获得相邻多边形？
浏览 1提问于2018-06-27得票数 1
我正在尝试构建一个功能，使用turf.js 'length‘功能来度量用户在Mapbox地图上绘制的一条线。
话虽如此，我是个编码新手-我知道的还不够危险。
最终，我希望能够同时绘制区域和线，并返回它们各自的度量(多边形区域，线字符串长度)。
有人能深入了解为什么这段代码不能工作吗？
<html>
<head>
<meta charset=utf-8 />
<title>Line Test</title>
<meta name='viewport' content='initial-scale=
浏览 3提问于2018-07-15得票数 2
如果我的问题听起来很愚蠢，我提前道歉，但我在这里已经超出了我的理解，…
我正在尝试创建一个带有自定义标记的mapbox地图，该标记在悬停时显示弹出窗口。复制了代码并添加了我的位置和描述，但我不能更改自定义标记的URL。有没有办法改变代码，使我可以保持悬停效果，但我的自定义标记？
非常感谢!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Display a popup on hover</title>
<meta name=&
浏览 34提问于2020-11-23得票数 0
嘿嘿。我想要创建一个react 输入组件MapInput，其中给我一个带有绘图控件的地图。在那里，我可以绘制多边形并得到GeoJSON，然后我可以将它发送到后端REST服务器(json- server )。
我的系统由我的react客户端程序和一个带有REST的json服务器组成.例如，我的REST中的一个区域：
{
"id": "4",
"name": "Area 4",
"description": "This is area 4.",
"geometry": {
浏览 3提问于2021-09-19得票数 1
回答已采纳
使用mapbox gl js。
我已经设置了我的所有自定义mapbox样式图层缩放设置为最大范围0，22在mapbox工作室。但是在变焦达到6-8变焦后，图层是不可见的.
似乎mapbox会自动理解没有理由再显示多边形了，因为它们太小并且隐藏起来。
确切的情况是什么，我在哪里可以读到这方面的资料？(没有在文档中找到任何东西)
浏览 6提问于2017-07-03得票数 2
回答已采纳
我正在尝试使用mapbox csp功能。显示CSP发行版有一个CDN包。我想知道如何将CSP发行版与npm一起使用。从node_module上看，mapbox-gl-csp.js包含在mapbox模块中。
然而，我很难理解如何在npm中切换到csp发行版而不是常规的mapbox-gl.js。我试图在我的tsconfig.json中添加一个路径，但它似乎不起作用，仍然使用常规的mapbox-gl.js：
"compilerOptions": {
...
"paths": {
"mapbox-gl": ["./
浏览 33提问于2020-05-29得票数 1
1回答
我正在使用Mapbox-GL-JS构建一个web应用程序，它使用mapbox studio平铺集来添加图层作为choropleths。然而，当我访问图层时，多个功能似乎正在接收相同的ID。 https://github.com/mapbox/mapbox-gl-js/issues/8284此处提到这是由于我的数据造成的，但是数据集中没有ID字段：https://www.dropbox.com/s/5ci0hosqakvdahx/townships.json?dl=0 https://jsbin.com/cuhewomepo/1/edit?html,js,output map.on("
浏览 166提问于2019-06-07得票数 2
我想要访问这个脚本：
<script src="https://js.stripe.com/v3/"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js"> </script>
这个样式表：
&l
浏览 5提问于2021-06-19得票数 0
我正在使用Mapbox GL JS。有没有什么方法可以让我的基本层看起来像Mapbox Light示例，但只显示UK？
我假设我会使用Mapbox Studio来构建我自己的基础层，但我在Studio中看不到任何按国家过滤的方法。
如果这是不可能的，有没有办法我可以显示标签只在英国，并显示其他国家作为填充多边形？(根据。)
浏览 51提问于2017-03-04得票数 10
回答已采纳
我正在尝试将一个多边形从map服务渲染到mapbox地图，作为概念的证明。
我的the服务给了我以下geojson和一些模拟数据：
{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[9.750441312789917,52.350087018909683],[9.7523081302642822,
浏览 21提问于2019-08-04得票数 1
回答已采纳
1回答
我正在学习一门课程，目前正在尝试实现mapbox.js。我直接从mapbox文档中执行了所有的说明，但是在控制台中收到了一个错误：
Uncaught ReferenceError: require is not defined
<anonymous> http://localhost:8000/js/mapbox.js:3
这是我的mapbox.js文件：
var mapboxgl = require('mapbox-gl/dist/mapbox-gl.js');
mapboxgl.accessToken =
'pk.eyJ1IjoiYnJhbmF1c
浏览 6提问于2020-10-14得票数 1
回答已采纳
我有mapbox分离的地理编码器两个带有输出的自动完成输入CSS视觉交叉问题-当我输入一些东西时，类.suggestions-wrapper被放在第二个输入(input.mapboxgl-ctrl- geocoder - input )下面，有什么方法可以让它正常工作吗？ <html>
<head>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css">
<link rel="
浏览 30提问于2019-12-30得票数 0
回答已采纳
我正在尝试向HTML / Javascript映射中的MapBox-GL-JS映射添加标记。
我试着构建了一个小示例：
<html>
<head>
<meta charset="utf-8">
<title>Test MapBox</title>
<!-- *** References for MapBox GL JS ... -->
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0
浏览 0提问于2017-05-27得票数 3
这是我的树冠：
--libs/
----@types/
------mapbox-gl/
--------index.d.ts
------geojson/
--------index.d.ts
--mapbox-gl.js
map.ts
下面是map.ts：
/**
* map.ts
*/
// @ts-ignore
// @ts-nocheck
//test
// @deno-types="./libs/@types/geojson/index.d.ts"
// @deno-types="./libs/@types/mapbox-gl/index.d.ts
浏览 5提问于2021-05-14得票数 2
我正在使用react- map -gl-draw库在地图上绘制多边形。我想找出react-map-gl- className图标的绘图。 例如，className="mapbox-gl-draw_ctrl-draw-btn mapbox-gl-draw_trash"会给我一个带有垃圾桶图标的按钮。我想知道在哪里可以找到其他图标的className。
浏览 36提问于2021-10-06得票数 0
回答已采纳
1回答
我试图从概念上理解Deck.GL是如何渲染事物的，所以我正在研究从线条到多边形再到GeoJson的样例图层。线条可以很好地工作，但有些东西阻止了我渲染，即使是DeckGL在他们的例子中最简单的多边形。 下面是一些可以工作的示例代码 import React from "react";
import DeckGL, { LineLayer } from "deck.gl";
import { StaticMap } from "react-map-gl";
const MAPBOX_ACCESS_TOKEN = process.env.REAC
浏览 34提问于2019-03-01得票数 1
回答已采纳
2回答
我正在尝试使用Mapbox来呈现包含OSM数据的mvt (Mapbox )，但是我不断地得到一些丑陋的多边形，就像它们被简化了一样(比如这个Simplification的!)。我不希望这些多边形被简化。至少我希望最好的决心离现实尽可能近。
首先，我检查了它是否可以来自OSM数据。但是OSM数据是好的。因此，我查看了平铺服务器，更准确地看了mvt编码器()。控制坐标在矢量块中编码的详细程度的范围值为4096。4096是一个非常好的价值。所以我不明白为什么我没有得到正确的多边形。
我认为这个问题来自Mapbox，它可能会执行更多的简化。
我可以在编码器中使用多大范围的值？有办法用mapbox gl
浏览 3提问于2016-11-17得票数 4
1回答
我想把一个矩形放在地图盒地图上，相对于地图容器本身来说，地图的位置是绝对正确的。
我想要这样的长方形：
我试过的是：
<html>
<head>
<meta charset="utf-8">
<title>Display a map on a webpage</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="h
浏览 17提问于2022-06-13得票数 0
回答已采纳
我正在尝试为我的公司网站制作一张我公司拥有的步道的交互式地图。
我有标记显示在所有的线索，我希望他们显示一个弹出式的某些信息位于GeoJson文件中。
这是我的HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Map</tit
浏览 12提问于2017-07-06得票数 0
假设我们有以下Map组件。这是在TypeScript中实现的，但对于普通的JavaScript也是如此。
import * as React from 'react';
import ReactMapboxGl from 'react-mapbox-gl';
const MapBox = ReactMapboxGl({
accessToken: 'pk.<redacted>'
});
export default class Map extends React.Component {
render() {
retu
浏览 17提问于2018-02-19得票数 13
我的博客上有大量的城市页面，我需要在每个城市页面上放置特定于城市的地图和额外的控制来建立一条路线。
这就是我想要创建的布局：
📷
我正在使用Mapbox库作为地图。地图和方向控件的JS文件和样式托管在Mapbox上：
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.js'></script>
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions
浏览 0提问于2018-02-03得票数 0
1回答
我需要能够在mapbox gl js中任意绘制一条线。这条线将用于选择线层下的矢量瓦片层中的某些点。如何使用mapbox gl js来做到这一点。我需要一个自定义绘制的多边形，这样我才能完全控制这些点吗？我在考虑使用project和unproject以及起始点，直线的像素宽度，直线的斜率，以及一些几何图形，来迭代所有可见的点，并获得那些在直线下面的点。但是有没有更简单的使用gl js api的方法呢？QueryRenderedFeatures使用了一个边界框，但这似乎是矩形的，并且方向是从北到南的线。我需要能够在地图上画出任何角度的线。
浏览 10提问于2016-08-20得票数 0
回答已采纳
2回答
我使用mapbox js渲染彩色(即填充)多边形，其来源是geojson特性集合。我想改变在客户端上的动态多边形颜色，根据用户的行动。适用下列限制/已尝试了以下条件：
我用的是Mapbox GL JS -而不是传单等等。
我想将所有多边形添加到一个单层(即每个mapbox层的特征集合)，因为为每个多边形添加一个新的层似乎会对性能产生灾难性的影响(我有几千个多边形，每个多边形都有几千个坐标)，
应该可以通过它们的ID来识别单个多边形；这也是我所奋斗的地方:我不知道如何在将所有多边形以特性集合的形式添加到图层之后识别它们。如果不这样做的话--如果不是通过ID，如何才能识别它们呢？
浏览 1提问于2017-12-27得票数 2
回答已采纳
我正在使用Mapbox GL JS来显示多边形层。我将允许用户从下拉列表中选择一个名称，然后突出显示并缩放到匹配的多边形。
我已经知道如何使用map.setFilter高亮显示匹配的多边形，但我不知道如何缩放到匹配多边形的边界。这是我当前的代码：
map.addLayer({
'id': 'polygon_hover',
'source': 'mysource',
'source-layer': 'mylayer',
'type': 'fill
浏览 5提问于2017-03-19得票数 11
我正尝试在我的web应用程序中使用mapbox的JS版本。当将示例lat-long更改为德里的latlong时，BUt显示错误的位置。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Display a map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=
浏览 4提问于2019-05-12得票数 0
在我的geocoder项目中尝试使用react地理编码器时会出现此错误。
我删除了FlyToInterpolator，但仍然得到了相同的错误。
有人找到解决办法了吗？
我安装了
从“react map-gl”导入MapGL；从“react gl-Geo编码器”导入地理编码器；
./node_modules/react-map-gl-geocoder/dist/index.m.js试图导入错误：'FlyToInterpolator‘不是从’react gl‘(导入为'r')导出的。
这些是我的依赖：
"mapbox": "^1.0.0-beta1
浏览 8提问于2022-03-11得票数 1
我们的应用程序是一个用Webpack构建的React/Node应用程序，在生产中呈现服务器端。在此生产场景中，mapbox包在服务器端加载有问题。我怀疑这与mapbbox-gl.js是一个已经被浏览器化的库的方式有关，并且与webpack构建的服务器端环境不太好。下面是我第一次尝试加载页面时的相关错误，我们没有在服务器端生成任何组件的html (尽管在浏览器客户端加载该组件时一切都正常)。
mapbox-gl.js中生成堆栈顶部错误的相关代码行为"module.exports=self;“。
Node app is running on port 5000
ReferenceE
浏览 7提问于2017-02-10得票数 2
回答已采纳
1回答
我试图建立一个反应应用程序与一个综合地图的mapbox。当我启动应用程序时，它会说访问令牌无效。但我在网站上使用了公文。
VM68 react_devtools_backend.js:4061 Error: **A valid Mapbox access token is required to use Mapbox GL JS. To create an account or a new access token, visit https://account.mapbox.com/**
at $t.errorCb (vendors-node_modules_mapbox-gl_dis
浏览 9提问于2022-02-08得票数 0
回答已采纳
我创建了一个mapbox地图，显示自己的瓷砖和这个工作好在桌面上。当我尝试移动(Iphone使用IOS 10.3.1) Safari时，地图显示正常，但触摸似乎不起作用(pan或放大/缩小)。如果我使用导航控件(+，-)放大或缩小，地图就会很好地显示数据。
我想知道有没有其他人遇到过类似的问题？
我使用的是“Mapbox gl js”版本0.34.0：
<script src='https://api.mapbox.com/mapbox-gl-js/v0.34.0/mapbox-gl.js'></script>
<link href="ht
浏览 1提问于2017-04-10得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
