标签: react-map-gl
是否可以动态添加到 kepler.gl 中的数据集
我在 kepler.gl 中工作并从数据库加载数据。如果数据库更新，我希望能够动态更新数据集。有没有办法向数据集添加一行并更新地图？
我已经尝试删除数据集（使用 removeDataset）并将其与更新的数据（addDataToMap）一起添加回来，但是当涉及到更大的数据集时，这效率不高。
提前致谢。
推荐指数
解决办法
查看次数
当侧边栏宽度改变时，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} …推荐指数
解决办法
查看次数
在 MapBox 中的两个标记之间绘制线性动画线
我在地图盒上看到了一些动画线的例子，但我还没有发现任何在两点之间创建线性线的例子。我可以在地图上创建标记，也可以在这些标记之间画一条线。但是，我想慢慢地创建从原点（开始）到目的地（结束）的那条线。这是在两个坐标之间画线的代码。我只想慢慢地（动画地）制作它，然后重复该动画。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Animate a line</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.50.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
#route {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 1s linear alternate infinite;
}
@keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken =
"pk.eyJ1IjoiaHllb25namlua2ltIiwiYSI6ImNpZXh4dXp5eDA2YjFzaGtyOGR2dnBza2oifQ.a5K673tSr0cOcYoX1rpPhg";
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: …推荐指数
解决办法
查看次数
react-map-gl 缩放地图时标记正在移动
我已经构建了一个带有渲染地图的地图组件的 React 应用程序。我尝试添加标记，但缩放时标记不断移动。是什么原因导致这种情况发生？
import MapGL, { Marker } from "react-map-gl"
import { useState } from "react";
const Map = () => {
const [viewState, setViewState] = useState({
longitude: 4.895168,
latitude: 52.370216,
zoom: 10,
})
const [marker] = useState({
longitude: 4.895168,
latitude: 52.370216,
})
return (
<div className="map">
<MapGL
{...viewState}
style={{ width: "100%", height: "100%" }}
mapStyle="mapbox://styles/mapbox/streets-v9"
onMove={(evt) => setViewState(evt.viewState)}
mapboxAccessToken="my_token"
>
<Marker
{...marker}
/>
</MapGL>
</div>
)
}
export default Map;
推荐指数
解决办法
查看次数
React-map-gl 自定义标记在缩放时不会停留在精确位置
我正在努力使用 Uber 的 React-map-gl 库加载 Mapbox 地图。我已通过 API 提供的 JSON 成功加载了带有自定义标记的地图（如您从第一张图片中看到的）。
不过，如果你看一下休斯顿附近的绿色标记，就会发现由于某种原因它位于墨西哥湾的某个地方。但是，如果我放大该区域......
您可以看到，当我放大时，标记会重新调整到正确的位置。什么会导致这样的事情呢？
import ReactMapGL, { Marker, NavigationControl, Popup } from 'react-map-gl';
import CityInfo from './city-info';
import 'mapbox-gl/dist/mapbox-gl.css';
class ExplorePage extends Component {
state = {
viewport: {
width : 400,
height : 400,
latitude : 38.789093,
longitude: -95.295881,
zoom : 3.7,
},
popupInfo: null,
};
componentDidMount() {
this.props.dispatch(explorepageActions.getFavoriteHikes());
}
_renderMarker = (marker, index) => {
return (
<Marker
anchor='bottom'
key={`marker-${index}`}
longitude={parseFloat(marker.longitude)}
latitude={parseFloat(marker.latitude)}
>
<Pin width={100} onClick={(event) => this._handleClick(event, marker)} …推荐指数
解决办法
查看次数
React Mapbox 图层未显示
我正在尝试使用 React Mapbox，但在使用 Layer 组件时遇到了一些问题。
我正在尝试遵循此演示：https : //github.com/alex3165/react-mapbox-gl/blob/master/example/src/demos/heatmap.tsx
甚至主页上的“快速启动”演示：https : //github.com/alex3165/react-mapbox-gl
我的地图正在显示，但图层没有显示！这是我的代码：
import React, { useState } from "react";
import ReactMapboxGl, { Layer, Feature, ZoomControl, Marker } from "react-mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";
const data = require("./heatmapData.json");
function LiveMap(props) {
const Map = ReactMapboxGl({
accessToken: "pk.ey",
});
const heatmapPaint = {
"heatmap-weight": {
property: "priceIndicator",
type: "exponential",
stops: [
[0, 0],
[5, 2],
],
},
// Increase the heatmap color weight weight by zoom level
// heatmap-ntensity is a multiplier …推荐指数
解决办法
查看次数
如何防止甲板 gl 图层占据整个视口？
我有一个 DeckGL 组件，我将它放在一个 div 标签中并指定了它的大小，但 DeckGL 层似乎占据了整个视口。这是我的代码片段。
const INITIAL_VIEW_STATE = {
longitude: 83.32247972488423,
latitude: 17.714023254029464,
zoom: 10,
pitch: 0,
bearing: 0
}
<div class="my-container">
<DeckGL initialViewState={INITIAL_VIEW_STATE} layer={layer} controller>
// here I'm putting a static map
</DeckGL>
</div>
如何在给定大小的特定 div 中渲染甲板 gl 组件。
推荐指数
解决办法
查看次数
将 Glyphs 与 Amazon Location Service 和 Mapbox-GL 结合使用
我将 Amazon Location Service 与 React、react-map-gl 和 Mapbox-GL 结合使用。我可以成功加载 ESRI 和 HERE 地图，这表明我的身份验证正常，但我似乎在访问字形（字体）时遇到问题。我正在尝试添加这样的集群标记功能。我可以添加点并加载基础层，但是当我尝试添加点计数时，访问字形时出现错误。它正在发送这样的请求：
https://maps.geo.eu-west-1.amazonaws.com/maps/v0/maps/ <MY_MAP>/glyphs/Noto%20Sans,Arial%20Unicode/0-255.pbf?<....SOME_AUTHENTICATION_STUFF >
这似乎与此处显示的请求格式匹配： https: //docs.aws.amazon.com/location-maps/latest/APIReference/location-maps-api.pdf
但它的回应是：{"message":"Esri glyph resource not found"}
我收到了有关 HERE 地图和不同字体的类似错误消息。我已将以下内容添加到角色的操作中，但没有成功（它加载地图但不加载字形）
尝试过这个：
"geo:GetMap*"
和这个：
"geo:GetMapStyleDescriptor",
"geo:GetMapGlyphs",
"geo:GetMapSprites",
"geo:GetMapTile"
我需要做什么才能在 Amazon Location Service 中正确设置字形？我没有配置任何东西只是希望它们能自然地工作。我是不是漏掉了一步？在网上看不到任何有关它的信息。
有没有办法可以加载系统字体而不是远程字形？
我使用的以下版本不是最新版本，因为最新版本与 Amazon Location Service 不兼容：
"mapbox-gl": "^1.13.0",
"react-map-gl": "^5.2.11",
amazon-web-services mapbox-gl-js react-map-gl amazon-location-service
推荐指数
解决办法
查看次数
错误：使用 Mapbox GL 需要 API 访问令牌
我正在使用react-gl 库来使用mapbox 来使用map-api。我也创建了一个帐户地图框，但它仍然显示图片中描述的错误。
这是我的 app.js 代码
import * as React from 'react';
import Map from 'react-map-gl';
function App() {
return (
<Map
initialViewState={{
longitude: -122.4,
latitude: 37.8,
zoom: 14
}}
mapboxApiAccessToken = {process.env.REACT_APP_MAPBOX}
style={{width: 600, height: 400}}
mapStyle="mapbox://styles/mapbox/streets-v9"
/>
);
}
export default App
这是错误：
推荐指数
解决办法
查看次数
react-map-gl：未捕获的 ReferenceError：_typeof 未定义
尝试使用react-map-gl但无法获得最简单的 lib 示例。一旦我尝试渲染地图，我就会在控制台中收到这个奇怪的错误，我无法理解：
Uncaught ReferenceError: _typeof is not defined
at mr (blob:http://localhos…6-19b5d5c80288:4993)
at blob:http://localhos…6-19b5d5c80288:6740
at new Fn (blob:http://localhos…6-19b5d5c80288:6757)
at new Jn (blob:http://localhos…6-19b5d5c80288:7040)
at blob:http://localhos…6-19b5d5c80288:8992
at blob:http://localhos…-19b5d5c80288:14153
有时会变成这样：
Uncaught ReferenceError: _typeof is not defined
at mr (0bcc60f9-25f2-4a56-8906-ebd57645a06c:4993)
at 0bcc60f9-25f2-4a56-8906-ebd57645a06c:6740
at new Fn (0bcc60f9-25f2-4a56-8906-ebd57645a06c:6757)
at new Jn (0bcc60f9-25f2-4a56-8906-ebd57645a06c:7040)
at 0bcc60f9-25f2-4a56-8906-ebd57645a06c:8992
at 0bcc60f9-25f2-4a56-8906-ebd57645a06c:14153
带有 mapbox 徽标的地图框仅呈现。
我在 Rails 6 上使用这些软件包：
"dependencies": {
"@babel/preset-react": "^7.0.0",
"@rails/actioncable": "^6.0.0-alpha",
"@rails/activestorage": "^6.0.0-alpha",
"@rails/ujs": "^6.0.0-alpha",
"@rails/webpacker": "^4.0.7",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"prop-types": "^15.7.2",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-map-gl": …推荐指数
解决办法
查看次数
标签 统计
react-map-gl ×10
reactjs ×6
mapbox ×5
mapbox-gl-js ×5
javascript ×2
mapbox-gl ×2
deck.gl ×1
kepler.gl ×1
webpack ×1