标签: mapbox
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)} …推荐指数
解决办法
查看次数
Mapbox GeoCoder --> 如何前往附近的餐馆、酒店、购物中心等
我正在使用 Mapbox Geocoder 在我们的应用程序中搜索地点。但是，我还需要获取附近所有的地方，如餐馆、酒店等。Mapbox Geocoder 可以吗？
这是我们用于正向地理编码的代码，
let region = RectangularRegion(southWest: CLLocationCoordinate2DMake(swlat, swlng), northEast: CLLocationCoordinate2DMake(nelat, nelng))
let options = ForwardGeocodeOptions(query: input)
options.allowedRegion = region --> To restrict search
我可以用谷歌自动完成来做到这一点，
但是，我不能同时使用 Mapbox 和 Google。
推荐指数
解决办法
查看次数
如何使用自定义 HTML 按钮调用 Mapbox GL JS 绘制多边形函数？
我正在尝试使用 Mapbox GL JS 为地图构建自定义控制器，其中包括绘制多边形功能。但是，当我希望按照 Mapbox 文档包含“绘制多边形”时，它会在屏幕右上角显示一个菜单。
这就是每当我添加 https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-draw/ 中显示的 JS 时的样子
这是 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,
polygon: true,
point: true,
trash: true
}
});
// Add the draw tool to the map
map.addControl(draw);
我想构建一个自定义按钮，它具有与允许我在地图上绘制相同的功能。
我希望使用此按钮，它应该打开绘图光标，类似于我在默认菜单中单击绘图功能时
我该怎么做呢？
推荐指数
解决办法
查看次数
如何将标准 OpenStreetMap 切片服务器与 Mapbox GL JS 结合使用？
我正在尝试将 Mapbox GL 与普通的公共 OSM 切片服务器结合使用。按照如何添加栅格切片源的示例，我对一个最小示例的看法如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Minimal OSM Test</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css" rel="stylesheet" />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
border: solid 1px #000000;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = new mapboxgl.Map({
container: 'map',
style: {
version: 8,
sources: {
osm: {
type: 'raster',
tiles: ["https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"],
}
},
layers: [{ …推荐指数
解决办法
查看次数
显示集群中的累积属性
因此，我目前在 Mapbox 示例的帮助下对地图上的点网格进行聚类： 创建聚类并设置样式
Mapbox 中的示例代码计算点数并像这样显示它 - 使用变量point_count_abbreviated：
map.addLayer({
id: "cluster-count",
...
layout: {
"text-field": "{point_count_abbreviated}",
},
...
})
我的 geoJSON 源看起来像这样：
{
"type": "Feature",
"geometry": { ... },
"properties": {
"location": { ... },
"id": 111,
...
"value": {
"count": 2
}
}
}
我想做的是将所有“properties.value.count”加在一起，并在每个集群上显示总和。我已经尝试了有关 clusterProperties 的文档中的示例 ，但由于我的计数变量嵌套在值对象内，因此我很难使其工作。
所以我猜集群源定义中是这样的：
clusterProperties: {"sum": ["+", ["object", "value", ['get, 'count']]]}
并将其显示在图层中：
layout: {
"text-field": ['get', 'sum'],
},
有人可以指出我正确的方向吗？:)
推荐指数
解决办法
查看次数
如何在Marker中实现mapbox表达式？
如何在其中添加 Mapbox 表达式，mapboxgl.Marker()如下所示：
"icon-size": ['interpolate', ['linear'], ['zoom'], 10, 1, 15, 0.5]
（我从这里复制了这个表达式：/sf/answers/4272545511/）
推荐指数
解决办法
查看次数
Mapbox 更改源属性
我想用mapbox制作一个簇层，是的，我做到了：D。但我希望能够将其关闭
所以我正在制作一个来源
const source = {
type: "geojson",
data: {
"type": "FeatureCollection",
"features": []
},
cluster: true,
clusterRadius: 10
}
this.map.addSource(id, source);
现在我可以设置数据：
this.map.getSource(this.id).setData({
"type": "FeatureCollection",
"features": this.createInnerCircles()
})
之后，我将设置簇和圆的图层。现在集群正在工作
但现在：我如何cluster: true从我的源设置为 false。好吧，也许我可以扔掉源代码并制作一个新的源代码，但这很丑陋。
所以丑陋的方式是
const SOURCE = this.map.getSource(id);
SOURCE._options.cluster = false;
this.map.removeSource(id);
this.map.addSource(id, SOURCE._options);
哎呀，那不起作用，现在我得到：
Source "test" cannot be removed while layer "test-outer" is using it.
更新
我能够启用/禁用集群感谢@Steve Bennett
Source "test" cannot be removed while layer "test-outer" is using it.
推荐指数
解决办法
查看次数
Mapbox - 层中奇怪的白线
我正在嵌入一个地图集地图 - 我发现在地图中间放置一个空白行,正如您可以从附加图像中看到的那样.
有谁知道问题是什么？
我也在使用twitter-bootstrap框架.
这是我用的地图div html/css:
<div class="map"></div>
.map{
max-width:none !important;
width:100% !important;
height:250px !important;
max-height:250px;
position: relative;
margin:0 auto !important;
}
这是我的js:
var map = mapbox.map(_element);
map.addLayer(mapbox.layer().id('examples.map-uh4ustwo'));
// Create an empty markers layer
var markerLayer = mapbox.markers.layer();
// Add interaction to this marker layer. This
// binds tooltips to each marker that has title
// and description defined.
mapbox.markers.interaction(markerLayer);
map.addLayer(markerLayer);
map.zoom(3).center({ lat: _json.lat, lon: _json.lon });
// Add a single feature to the markers layer.
// You can …推荐指数
解决办法
查看次数
无法在Mapbox GL JS中使用自定义标记
我已经按照Mapbox网站上的示例和GitHub上的这条说明进行操作,但无法在我的地图上显示标记:
http://codepen.io/znak/pen/waPPRj(使用Mapbox样式和精灵) http://codepen.io/znak/pen/PqOEyV(使用自定义样式和精灵)
var center = [51.5, -0.1];
var map = new mapboxgl.Map({
container: 'map',
center: center,
zoom: 8,
style: 'https://www.mapbox.com/mapbox-gl-styles/styles/mapbox-streets-v7.json'
});
// Markers
map.on('style.load', function() {
map.addSource("markers", {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [51.48, -0.08]
},
"properties": {
"title": "Lorem",
"marker-symbol": "default_marker"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [51.52, -0.12]
},
"properties": {
"title": "Ipsum",
"marker-symbol": "secondary_marker" …推荐指数
解决办法
查看次数
基于数组的Mapbox过滤器
我有以下数组：
test = ['a', 'b', 'c']
我想过滤地图上的对象（如果它们存在于数组中）。是否可以将此过滤器与数组一起使用：
mapObj.setFilter("hover", ['all', ["in", "letter", test[0]]]);
或者，筛选数组中存在的对象的最佳方法是什么？
推荐指数
解决办法
查看次数
标签 统计
mapbox ×10
mapbox-gl-js ×7
javascript ×4
mapbox-gl ×4
css ×2
geocode ×1
html ×1
layer ×1
react-map-gl ×1
reactjs ×1
swift ×1