标签: mapbox
Mapbox JS 标记创建点击
我目前正在将 mapbox js 与卫星图像 API 结合使用，我想知道如何在地图上显示最后一次点击（来自用户）的非常简单的标记。
理想情况下，当用户点击地图时，它会显示一个小的半透明方块，该方块对应于卫星 API 显示的放大区域。
有大量关于与预先创建的当前标记进行交互的信息，但我想在单击时动态创建一个标记，该标记仅在下一次单击之前有效。
它会像下面这样，只是半径更小。
推荐指数
解决办法
查看次数
在 react-mapbox-gl 中从 GeoJSON 绘制多边形
我正在尝试使用由uber 团队为 mapbox gl编写的反应友好的包装器 。
我想知道是否有人使用他们的 API 从 geojson 源成功渲染了多边形特征。它指出源选项属性在<Layer/>组件上可用：
sourceOptions : 合并到调用 GeoJSONSource 方法时使用的对象的选项对象
以下为mapbox API geoJsonSource，我想下面的，不知道还有什么我需要为了得到它渲染的事情：
import React, { Component } from 'react';
import ReactMapboxGl, { Layer, Feature } from "../node_modules/react-mapbox-gl/dist";
import logo from './logo.svg';
import './App.css';
let containerStyle = {
height: "100vh",
width: "100vw"
};
const accessToken = _removed for safety_
class App extends Component {
_polygonClicked = ({ feature }) => {
console.log("Polygon clicked", feature.geometry.coordinates);
};
render() {
return (
<div …推荐指数
解决办法
查看次数
带有 mapbox queryRenderedFeatures 的错误几何图形
我正在尝试使用 queryRenderedFeatures 获取多边形的几何图形 在缩放级别 12 上是可以的，但是在 15 时我得到了错误的几何图形。这是我的代码，每次鼠标悬停时，我都会得到不同的坐标。这里https://codepen.io/benderlidze/pen/qPXNJv - 将鼠标从顶部和底部悬停在多边形上。红色多边形是由 queryRenderedFeatures 返回的几何图形，它总是不同的。
map.on("mousemove", "seatRowsFill", function(e) {
map.getCanvas().style.cursor = 'pointer';
map.setFilter("seatRowsFill-hover", ["==", "rowNumber", e.features[0].properties.rowNumber]);
var relatedFeatures = map.queryRenderedFeatures(e.point, { layers: ['seatRowsFill'],"filter": ["==", "rowNumber", e.features[0].properties.rowNumber] } )
console.log(relatedFeatures["0"].geometry.coordinates["0"][2])
推荐指数
解决办法
查看次数
Mapbox 鼠标悬停圆圈以使用特征状态更改颜色
我在 Mapbox 地图上的鼠标悬停期间使标记更改颜色时遇到问题。
mapbox-gl.js 的 0.47 版本允许您使用feature-state更改动态样式的功能。
这适用于 Mapbox 示例：https ://www.mapbox.com/mapbox-gl-js/example/hover-styles/
然而，在我的例子中，当特征标记feature-state发生变化时，样式似乎永远不会被触发。
我已经设法使用该map.setFilter功能使鼠标悬停工作，但是当我添加 1000 个标记时，这变得非常低效和缓慢。
任何提示将不胜感激，非常感谢。
请看我的示例代码...
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Create a hover effect</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.47.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
/* #map { position:absolute; top:0; bottom:0; width:100%; } */
#map { width:100%; height: 500px; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiY29kYm9kIiwiYSI6IjhjbFE1aUUifQ.Gimi98Oh3Uex9WQZlb5Wkw';
var map = new mapboxgl.Map({ …推荐指数
解决办法
查看次数
如何使用流配置 mapbox-gl-js 类型？
所以我在一个反应项目中使用"mapbox-gl": "0.50.0"和// @flow。
但是，当我运行 flow 时，它会遇到很多类型错误。
我是否需要添加规则.flowconfig或如何配置它？
如果我将此添加到我的 .flowconfig
[ignore]
.*/node_modules/@mapbox/.*
.*/node_modules/mapbox-gl/.*
然后当我尝试在实际代码中导入 mapbox-gl 时出现错误
谢谢！
推荐指数
解决办法
查看次数
尝试在组件的 ts 中初始化 MapboxGeocoder 时，“MapboxGeocoder 不是构造函数”
我想将 mapbox 地理编码功能添加到我的 Web 应用程序中，但是当我尝试对其进行初始化时出现错误。
我已经尝试在 node_modules/mapbox-gl-geocoder 中的几乎每个库上搜索某些构造函数或其他东西，以查看我是否导入了错误的库但没有成功，如果尝试阅读文档但也没有。
import { MapboxGeocoder } from "mapbox-gl-geocoder";
.
.
.
this.map.addControl(new MapboxGeocoder({
accessToken: mapboxgl.accessToken
}));
推荐指数
解决办法
查看次数
Mapbox gl：鼠标悬停在图层上时更改光标指针样式
我有 10 到 15 个不同的图层，例如汽车、公共汽车、路线等。如果需要，我会在地图上动态添加这些图层，因为地图上始终不存在所有图层。
所以我在单击图层时显示信息，但我希望当我将鼠标悬停在图层上时，将鼠标指针光标样式更改为“十字准线”。
我已经在 mouseenter 事件上写了更改光标样式，但它似乎有时有效，有时即使鼠标悬停在图层上但光标样式没有改变。
第一种方式：
map.on('mouseenter', (e: any) => {
self.mapInstance.getCanvas().style.cursor = 'crosshair';
});
第二种方式：
map.on('mouseenter',(e: any) => {
var features = map.queryRenderedFeatures(e.point,{ layers: ['Car',"Bus"] });
//error let's say any layer still on exist on map
if(features.length)
map.getCanvas().style.cursor = 'crosshair';
});
我的问题：
光标样式没有改变
queryRenderedFeatures 上的错误，如层不存在
鼠标在悬停层上闪烁
如何在鼠标悬停在不同图层上时更改光标样式？
推荐指数
解决办法
查看次数
Mapbox 使用哪个投影
我有UTM坐标，EPSG: 25833。查看它说的Mapbox 文档
Mapbox 支持流行的 Web 墨卡托投影，不支持任何其他投影。Web Mercator 是一种几乎共形的投影，被绝大多数 web 地图采用，它的使用允许您将 Mapbox 的地图与同一投影中的其他图层组合在一起。
通常，此投影称为 EPSG:900913 或 EPSG:3857。有关更多信息和替代编码，请参阅 epsg.io。
所以，我可能必须将UTM坐标转换为Web Mercator. 我使用proj4js库来做到这一点。
import proj4 from 'proj4';
const epsg25833 = require('epsg-index/s/25833.json');
const epsg3857 = require('epsg-index/s/3857.json');
const mapboxCoords = proj4(epsg25833.proj4, epsg3857.proj4, [point.utm_point.coordinates[0], point.utm_point.coordinates[1]]);
如果我尝试在 上显示mapboxCoords，则Mapbox Map不会显示任何内容。但是，如果我将坐标转换为EPSG: 4326，则显示所有内容。但是，坐标可能略有偏差。
import proj4 from 'proj4';
const epsg25833 = require('epsg-index/s/25833.json');
const epsg4326 = require('epsg-index/s/4326.json');
const mapboxCoords = proj4(epsg25833.proj4, epsg4326.proj4, [point.utm_point.coordinates[0], point.utm_point.coordinates[1]]); …推荐指数
解决办法
查看次数
Mapbox 决定重叠顺序
我在地图上有一些显示为图标的功能。我想决定哪些图标应该隐藏，哪些图标在数字字段上碰撞时应该显示，我的地图上的每个要素都有（见图）。我找到了一个名为“symbol-sort-key”的 mapbox 属性，但我不知道它是否正确。符号排序键需要一个数字，但我不知道这个数字应该指什么。任何想法如何解决这个问题？
推荐指数
解决办法
查看次数
React-Mapbox-GL 在状态更新时不断刷新
我有以下使用 react-mapbox-gl 包装器的简单 React 组件。到目前为止，它很棒，但是我在尝试使用 useState 钩子更新状态时发现了一个小烦恼。
function Location(props) {
const [selectedMarker, setSelectedMarker] = useState(null);
const [markerBlock, setMarkerBlock] = useState(false)
const {payload} = useContext(MarkerContext);
const [latlong, setLatlong] = useState(null);
console.log(payload);
const Map = ReactMapboxGl({
accessToken:
'tokenHiddenforstackoverflow',
});
const getLatlng = (map, event) => {
setLatlong(event.lngLat);
}
return (
<>
<Map
style="mapbox://styles/mapbox/satellite-streets-v9"
containerStyle={{
height: '100vh',
width: '100%'
}}
onClick={getLatlng}
center={[18.432723671572944, -33.926210020024826]}
>
<ZoomControl />
</Map>
</>
);
}
export default Location;
每当我更新 LatLong 状态时，地图框背景都会变黑并且整个地图都会重新加载。不确定是编码/结构错误还是来自 Mapbox 的错误。我也尝试将其重组为更小的组件，但没有区别。
有任何想法吗？
推荐指数
解决办法
查看次数
标签 统计
mapbox ×10
mapbox-gl-js ×7
mapbox-gl ×4
javascript ×3
reactjs ×2
angular ×1
angularjs ×1
geojson ×1
maps ×1
state ×1
styling ×1
typescript ×1