mapbox-gl 相关问题

使用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。

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

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

无法设置vuemapbox贴图的初始范围

我正在vuejs应用程序中使用mapbox-gl和vue-mapbox [https://soal.github.io/vue-mapbox/api/#props]来显示地图。我想用包含大陆...

TypeError：无法读取.addTo（this.map）中未定义的属性'map'

我正在我的角度应用程序中使用mapbox。我正在尝试在地图上放置标记。我遵循了mapbox示例，并将其更改为angular geojson.features.forEach（function（marker）{// / ...

Mapbox 3D动态构建地图

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

Mapbox GeoJSON Line with Angular

我正在尝试使用Mapbox，Ionic Framework和Angular来构建一个简单的地图，我想像下面的示例一样向地图添加一条GeoJSON线：https://docs.mapbox.com/mapbox-gl-js/example / geojson -...

Mapbox：可见时，所有图层均不可见

[遵循此Mapbox示例（显示和隐藏图层：https：//docs.mapbox.com/mapbox-gl-js/example/toggle-layers/），我已经能够在地图上的多个图层之间进行切换。但是我想...

使用映射框表达式获取要素ID

我正在使用数据驱动的样式来为Choropleth映射设置Mapbox矢量层的样式。但是，除了从层属性中严格获取数据外，我还需要使用来自...

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

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

将mbgl-offline db转换为mbtiles

通过MapboxGL上的插值平滑旋转图标

我正在尝试使用MapboxGL的数据驱动样式和插值表达式来改变其地图标记的旋转动画。这是层配置的相关部分：{...

Mapbox-gl托管S3-addsource

我正在这个项目中，我想通过无服务器解决方案将相对动态的数据（每15分钟更新一次）添加到mapbox-gl。我遵循了关于创建无服务器...

仅使用获取API从地图箱中获取建筑物多边形点

我尝试从要素中获取建筑物的几何坐标多边形，但是如果没有javascript方法queryRenderedFeatures或SourceFeatures，我似乎无法找到一种方法来实现此目的。这个...

如何获取Mapbox中图层的类型

我正在使用Mapbox GL构建交互式地图应用。我一直在创建的地图现在可以扩展到多个图层，并且我创建了用于管理它们的边栏。我将它们分组为一个下拉列表，按钮为...

如何将数据集直接导入我的javascript代码

我想知道是否可以将数据集直接导入到我的代码（javascript）中，因为我想为用户按下某个功能时显示给定数据集的条件。

Mapbox GL Native不会构建ubuntu18

[我正在尝试使用cmake构建Mapbox GL Native，所以我从GitHub克隆了存储库：$ git clone https://github.com/mapbox/mapbox-mapl-nl.git $ cd mapbox-gl-native $ mkdir build && ...

任何外部来源的Mapbox图标？

我想从任何公开的在线来源向地图框地图添加png图标。我正在尝试从mapbox.com使用此示例，该示例使用了wikimedia的png：https：//docs.mapbox.com / ...

IOS MapBox聚类点，其中标签来自自定义点字段的总和

如何基于点字段创建聚类标题？例如。我在属性中有一个带有值的点-“计数”，从这些点创建聚类时，我想查看聚类...

如何在Mapbox GL JS中使用标准的OpenStreetMap切片服务器？

我正在尝试将Mapbox GL与普通的公共OSM切片服务器结合使用。在如何添加栅格图块源的示例之后，我以一个最小示例为例：..

Mapbox无法显示设备位置

我有一个带有Mapbox的片段，我想在上面显示设备位置。类SampleMapFragment：Fragment（），PermissionsListener {私人lateinit var绑定：FragmentExploreBinding ...