mapbox-gl-js 相关问题

使用Mapbox GL JS弹出窗口中的链接会引发错误：不变失败：您不应该在 ]之外使用 [我正在使用带有标记的Mapbox GL JS映射在React（16）SPA上工作，我试图在每个标记弹出窗口中呈现Link，这将引发以下情况：Error: Invariant failed: You should not use <Link> outside a <Router> [这让我感到困惑，因为Map组件是App组件的子组件，该组件被BrowserRouter中的react-router-dom包裹。 Map组件： import React, { Component } from 'react'; import { initalizeMap, getCenter, getZoom, addGeolocateButton, addMarkers, getMarkers } from '../helpers/mapbox'; export default class EventsMap extends Component { state = { lng: 2.1700556, lat: 41.3869959, zoom: 11 }; onMapMove = () => this.setState({ lng: getCenter('lng', this.map), lat: getCenter('lat', this.map), zoom: getZoom(this.map), }); renderMap = () => { const { lng, lat, zoom } = this.state; this.map = initalizeMap(lng, lat, zoom, this.mapContainer); this.map.on('move', () => this.onMapMove()); addGeolocateButton(this.map); const markers = getMarkers(this.props.events); addMarkers(markers, this.map); } componentDidMount = () => this.renderMap(); render() { return ( <div className='events-map'> <div ref={(el) => this.mapContainer = el} className='mapContainer' /> </div> ); } } [mapbox.js帮助程序导入和addMarkers声明： import React from 'react'; import ReactDOM from 'react-dom'; import { Link } from 'react-router-dom'; import mapboxgl from 'mapbox-gl'; export const addMarkers = (markers, map) => { markers.features.forEach((marker) => { const el = document.createElement('div'); el.className = 'marker'; const { _id, name, place } = marker.properties; const markerDiv = document.createElement('div'); const markerContents = <div><Link to={`/events/${_id}`}><h3>{name}</h3></Link><p>{place}</p></div>; ReactDOM.render(markerContents, markerDiv); new mapboxgl.Marker(el) .setLngLat(marker.geometry.coordinates) .setPopup(new mapboxgl.Popup({ offset: 25 }) .setDOMContent(markerDiv)) .addTo(map); }) }; 使用外部网址的锚点没有问题，例如：const markerContents = <div><a href={https://google.com }><h3>{name}</h3></a><p>{place}</p></div>; 但是我需要对内部链接使用Link以避免重定向，重新加载等。Link为什么不选择Router上下文？ 我正在使用带有标记的Mapbox GL JS映射在React（16）SPA上工作，并且我试图在每个标记弹出窗口中呈现一个链接，这将引发以下错误：错误：不变失败：您不应该使用 我无法从<Link>获得react-router-dom正常工作，而只是用Map HoC包装了父withRouter组件的导出，将this.props.history传递到addMarkers，并附加了一个事件侦听器到弹出内容并推送到历史记录对象onClick以便重定向： export const addMarkers = (markers, map, history) => { markers.features.forEach((marker) => { const onClick = (e) => { const { _id } = marker.properties; history.push(`/events/${_id}`); } const el = document.createElement('div'); el.className = 'marker'; const { name, place, rank } = marker.properties; el.style.backgroundImage = `url(/markers/${rank + 1}.svg)`; const popupContainer = document.createElement('div'); const popupContents = <div><button onClick={onClick}><h3>{name}</h3></button><p>{place}</p></div>; 与我之前在上面编写的代码相比，代码有所改进，但是当带有历史记录对象的简单事件侦听器可以使用时，关键是不需要使用Link。

第一次点击时突出显示功能，然后在第二次点击时“取消突出显示”

使用样式化的Mapbox GL JS地图，并从我的geojson文件中使用多字符串行，当用户单击我需要突出显示的行之一时，这部分我正在使用：map.on（'click'，'route'， ...

minzoom似乎不适用于mapbox中的自定义图层

我使用了添加3D模型中的mapbox示例，但是当我添加minzoom：17属性时，缩小比例较低时不会隐藏图层定义，但它可以与其他填充或填充一起很好地工作...

Mapbox gl栅格图层上的幻影图块

我在Google地图上放置了一些光栅化纸质地图。 http://map.tracks4africa.de/?map=nam可以正常工作。现在，我尝试在mapbox gl地图上执行相同的操作。第一步，看起来不错。但是当我放大...

在地图框gl方向中获取地址的起点和终点

我正在使用mapbox中的mapbox gl方向，该方向在mapbox文档的示例中使用。但是，我无法获得用户输入的address的值。我需要选择的地址...

Deck.GL ScatterplotLayer不渲染圆半径

我正在尝试在地图上绘制一个圆圈（在中心将有一个标记）。但是，我的地图上什么也没有。我尝试了各种ScatterplotLayer选项并尝试切换位置，...

Mapbox是否托管mapbox-gl-opacity插件？

我正在查看mapbox-gl-opacity插件，但希望通过使用以下内嵌脚本包括来实现与mapbox-gl-compare插件的Mapbox示例类似的实现： ] >

向地图框图钉添加“闪烁”效果

我正在尝试向所有新的图钉添加“闪烁”动画，如本示例https://docs.mapbox.com/mapbox-gl-js/example/add-image-animated/想法：1 。新图钉出现在地图上2.显示闪烁...

样式未完成加载错误：Mapbox GL JS

我已经使用Mapbox GL JS建立了一个网站，以在地图上显示许多分层的路线和点，以跟踪不同团队在路线上的进度。但是，当在大量页面上进行测试时，...

从mapbox gl中的geojson获取图标网址

我有这个geojson {“ type”：“ FeatureCollection”，“ features”：[{“ type”：“ Feature”，“ geometry”：{“ type”：“ Point”，“ coordinates”：[-.. 。

Mapbox 3D动态构建地图

我正在尝试实现在搜索条件期间选择的建筑物的动态3D模型，到目前为止，我所做的代码如下。 map.on（'load'，function（）{//收听“ geocoder ....

如何解决打字稿错误-mapbox-gl和React钩子

是Typescript的新手，需要对如何解决键入错误进行一些说明。我将Mapbox容器设置为mapDiv.current，这给了我这个错误：输入'HTMLDivElement | null'不是...

使用mapbox进行坐标转换

mapbox仅支持以下格式的坐标，即数字吗？ [-58.5003038，-34.5741957]我的坐标以数字和方向1010N 09710W的格式保存在DB中，如果我...

如何使用自定义HTML按钮来调用Mapbox GL JS Draw Polygon函数？

我正在尝试使用包含Draw多边形功能的Mapbox GL JS为地图构建自定义控制器。但是，当我希望根据Mapbox文档包括Draw多边形时，它显示...

为什么较低缩放级别的矢量图块上的点与源数据不匹配？

我正在从缩放级别8到从缩放级别11创建的图块中查询原始矢量图块。然后，我将这些图块中的点要素转换为geojson。转换后的要素几何与...

有一种将屏幕坐标转换为相应的经度和纬度值的方法

我正在网页上使用mapbox-gl js。我想在地图上显示标记，但我知道它的位置，因为它是距容器顶部和容器左侧的距离。例如top：...

无法获取要在Mapbox React地图中渲染的地图标记

[尝试向我的mapbox地图渲染一些标记，但是似乎无法获得要渲染的标记。我怀疑它在.addTo方法中，但是我无法弄清楚还有什么要传递的。我已经尝试过了....

我如何提取存储在Mapbox数据集中的URL并将其添加到弹出窗口的'click'函数中？

我有一个功能代码，它从“描述”字段中提取数据并在mouseenter的弹出窗口中显示它，但是有人可以帮助我弄清楚如何提取存储在“ linkurl”和...中的URL。]] >

从Mapbox矢量图块显示自定义图标标记

我正在使用mapbox gl javascript。我有一个很大的geojson数据，其中包含点位置（纬度，经度）对以及一些属性。我想将大型geojson加载到mapbox Studio中，...

在Angular 9的Mapbox地图上添加多边形

我正在使用mapbox-gl将Mapbox地图添加到我的Angular应用中，目前为止可以使用。这种方法与此处的方法非常相似，但是我无法在该库的Angular端口中找到Polygon。这是...