我正在尝试在 MapBox GL JS 中聚集自定义标记，但我不知道如何将自定义标记图像从 url 获取到符号层？它要么不起作用，要么根本不显示任何标记。它是如何完成的？我需要知道如何使用带有符号层的 url 中的自定义图像。非常感谢。
map.addSource('parcelpoints', {
type: 'geojson',
data: geojson,
cluster: true,
clusterMaxZoom: 14, // Max zoom to cluster points on
clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
});
map.addLayer({
id: 'clusters',
type: 'circle',
source: 'parcelpoints',
filter: ['has', 'point_count'],
paint: {
// Use step expressions (https://www.mapbox.com/mapbox-gl-js/style-spec/#expressions-step)
// with three steps to implement three types of circles:
// * Blue, 20px circles when point count is less than 100
// …我正在开发我的第一个角度网络应用程序，我想介绍一些类似于Google地图的内容。由于新的计费政策，我不想使用最后一个，因此我尝试了MapBox。
在学习完本教程之后，我设法创建了所需的地图。问题是，我不知道如何在角度组件上显示它。
我为地图生成了该文件，并且可以与浏览器完美结合，并且可以将其直接粘贴到我的角度项目的index.html上。但是，当我尝试在组件上使用它时，我不知道该怎么做。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Points on a map</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%;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'myToken'; // replace this with your access token
var map = new mapboxgl.Map({
container: 'map',
style: 'my style URL', // replace this with your style URL
center: [-2.8662684, 43.2806562], …我在网上看到过这个例子，它进行数据驱动的建筑挤压，但根本不提供代码。
我非常想实现同样的目标。我有一个 geojson 文件，其中包含某种属性，我想将其映射到建筑物的高度。你知道这怎么可能吗？
我已经考虑了推荐的替代方案：对已经根据我的数据生成的圆进行 3D 挤压。未提供此博客文章中的代码，因此我起诉了此帖子中的代码。
代码如下：
<html>
<head>
<meta charset='utf-8' />
<title>Display buildings in 3D</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.48.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.css' rel='stylesheet' />
<script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoicXVlMzIxNiIsImEiOiJjaWhxZmMxMDUwMDBzdXhsdWh0ZDkyMzVqIn0.sz3lHuX9erctIPE2ya6eCw';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
center: [8.538961, 47.372476],
zoom: 16,
pitch: 40, …根据Mapbox GL JS 快速入门指南，使用 Mapbox CDN 在网站上实现地图应该很简单。不幸的是，如果地图位于 Bootstrap 模态内部，则情况并非如此，该模态没有预定义宽度，该属性仅在模态打开后设置。
结果是加载默认宽度为 400px 的 Mapbox 画布，这可能与模态宽度不同并造成糟糕的用户体验。
此外，如果打开模式，然后调整浏览器窗口的大小，地图会自动按预期适合整个水平空间，这似乎是对调整大小事件的 JavaScript 响应。
下面是相关代码。
HTML 文件
<div id='map'></div>
CSS文件
#map {
height: 300px;
}
JS文件
mapboxgl.accessToken = '...';
var map = new mapboxgl.Map({
container: 'map',
center: [..., ...],
zoom: 10,
style: 'mapbox://styles/mapbox/streets-v11'
});
我尝试在 Bootstrap 3.4.0 模式中加载 Mapbox，就像我以前在使用 Google 地图或 Bing 地图时所做的那样，但在这两种情况下都嵌入在 iframe 中。因此，我期待看到 Mapbox 能够像 Google 地图和 Bing 地图一样填充整个模式。
相反，Mapbox 界面（左下角徽标和右下角信息按钮）正确定位在模式内部的边界处，但包含地图的画布定位不正确。
最后，为 #map CSS 属性设置预定义宽度并不是解决方案。如果宽度设置为固定宽度（以像素为单位），则可能无法在所有窗口尺寸上正确显示，而添加固定百分比宽度（例如 100%）则无法解决问题。
javascript twitter-bootstrap mapbox bootstrap-modal mapbox-gl-js
在 Mapbox API 参考页面上，列出了 7 个对象，可让您启用和禁用用户交互。有 BoxZoomHandler、ScrollZoomHandler、DragPanHandler、DragRotateHandler、KeyboardHandler、DoubleClickZoomHandler 和 TouchZoomRotateHandler。
https://docs.mapbox.com/mapbox-gl-js/api/#user%20interaction%20handlers
例如，要禁用鼠标双击缩放，请执行map.DoubleClickZoomHandler.disable()。
我想禁用双触摸缩放，但我没有看到任何参考。有谁知道如何做到这一点？
编辑：我使用的是 Windows 10 和 Google Chrome 浏览器。
我正在开发这个项目，我需要使用tippecanoe生成protobuf文件，将它们存储在s3存储桶上并使用mapbox-gl将其可视化。
我使用 -e 选项生成矢量切片以写入我选择的文件夹，并--no-tile-size-limit避免--no-tile-compression数据预期方式出现任何差异。然后我将所有这些文件上传到 s3 存储桶。然后，我尝试通过修改https://docs.mapbox.com/mapbox-gl-js/example/third-party/
上的代码来可视化这一点。我的代码是：
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
zoom: 12,
center: [-77,38]
});
map.on('load', function() {
map.addLayer({
"id": "test",
"type": "circle",
"source": {
"type": "vector",
"tiles": ["<link_to_my_cloudfront>/{z}/{x}/{y}.pbf"],
"maxzoom": 11
},
"source-layer": "trees",
"paint": {
"circle-radius": 3,
"circle-color": "#000000",
"circle-stroke-width": 1
}
}
});
我可以从 Tippecanoe 生成的元数据文件中确认该 ID 与我这里的 ID 匹配。
问题是当我加载地图时。对 pbf 文件的请求的响应是 200，content-type但application/x-protobuf这些点没有显示在地图上。我是否使用了一些不正确的选项，或者只是不兼容。我很难相信是后者，因为 Tippecanoe 和 Mapbox-gl 都是由 Mapbox 开发的，并且众所周知它们非常强大。
GeoServer 正在提供地图框矢量切片图层（大约 500K 个特征点和多行字符串）。
我使用 mapbox-gl-js 在客户端绘制图层，并使用表达式来更改某些样式（例如线条颜色）
我有一个外部 API，它将为我提供每个资产的属性列表
[{ id: 123, prop1: 45, prop2: 78 }, ...]
现在，我想将这些属性分配给相应的功能，以便我能够编写基于“prop1”的表达式来操作样式。
表达：
[ 'let', 'load_value', ['to-number', ['get', 'prop1']],
[
'case',
[ 'all', ['>=', ['var', 'load_value'], 0], ['<', ['var', 'load_value'], 50] ], 'gray',
[ 'all', ['>=', ['var', 'load_value'], 50], ['<', ['var', 'load_value'], 70] ], 'yellow',
['>=', ['var', 'load_value'], 70], 'red',
'gray'
]
];
我尝试过使用 setFeatureState 方法并且它有效。问题是，这样做后地图速度非常慢。我相信这是因为我需要为 500K 个特征设置特征状态。
设置功能状态：
data.forEach((datum) => {
this.map.setFeatureState({
source: 'geoserver-source',
sourceLayer: 'mvt-layer',
id: datum.id
}, {
prop1: datum.prop1 …我正在尝试向我的地图添加一个自定义的 Geolocate me 按钮并且它有点工作，但是前提是我还添加了来自 Mapbox 的标准图标。下面的代码有效，但如果我删除该行map.addControl(geolocate, 'top-right');，我的左按钮将停止工作。
// Initialize the geolocate control.
var geolocate = new mapboxgl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true
},
trackUserLocation: true
});
// Add the control to the map.
map.addControl(geolocate, 'top-right');
class ToggleControl {
constructor(options) {
this._options = Object.assign({}, this._options, options)
}
onAdd(map, cs) {
this.map = map;
this.container = document.createElement('div');
this.container.className = `${this._options.className}`;
const button = this._createButton('monitor_button')
this.container.appendChild(button);
return this.container;
}
onRemove() {
this.container.parentNode.removeChild(this.container);
this.map = undefined;
}
_createButton(className) {
const el = window.document.createElement('button') …我有一个常规的 React 应用程序（CRA）。在应用程序的一部分中，我使用 Mapbox 来显示地图，并呈现一个弹出窗口，我需要传入一串要呈现的 html 内容。而不是传入原始 html，我仍然想使用 React 来呈现弹出窗口，所以我这样做：
const renderedContent = renderToString(
<Popup
port={port}
poiType={poiType}
activeView={activeView}
isPortsOnly={isPortsOnly}
locations={locations}
/>
)
从呈现弹出组件中获取 html 字符串。这仍然是客户端，文档说renderToString()在客户端也可以用于这些用例。
new Popup()
.setLngLat(coordinates)
.setHTML(renderedContent)
.addTo(self.map)
使用 html 字符串创建一个弹出窗口。
这按预期工作。现在我的问题是：我不想在 Popup 组件中使用 redux。两者都调度一个事件，并读取全局状态。我怎样才能做到这一点？我真的可以这样做吗？
如果我尝试仅redux在 Popup 组件中使用，则会收到以下错误消息：
Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>
这个问题似乎并不新鲜，就像这里，但提出的解决方案没有奏效。我还尝试了其他几种方法来了解发生了什么（请参阅此处）。要复制，这是一个过程：
我有一个用 Swift 编写的有效 iOS 应用程序。
我按照说明将此应用程序与 Native React 集成此过程
我将以下依赖项添加到 package.json 中，然后运行yarn install：
"@react-native-mapbox-gl/maps":"^8.1.0-rc.9",
"prop-types": "^15.6.2",
我pod install --repo-update在 Xcode 上运行和存档。输出：此时组织者显示我的档案。
我按照此过程在 mapbox 上实现了一个基本视图
我添加到 Podfile 要求use_framework!， 如此处或之后所述use_framework!，在我点击pod install --repo-update.
我在 Xcode 上点击了存档。OUTPUT：存档已成功生成，但未显示在组织者上。如果我尝试打开它，存档已损坏。
如果我删除 mapbox 的 pod 文件并在点击 后将项目存档pod install --repo-update，则存档工作并显示在组织者中。这里同样描述。
该项目在真正的 iPhone 8 上作为调试和发布运行。Mapbox 运行良好。但是，它不适用于模拟器，也不适用于存档。我可以离开前者，但由于后者，我无法推送应用程序商店。
我不会放弃，因为 Mapbox 非常好并且提供了很多功能。会是什么呢？
react-native mapbox-gl-js mapbox-ios xcode12 mapbox-ios-maps
mapbox-gl-js ×10
javascript ×6
mapbox ×3
mapbox-gl ×2
angular ×1
geoserver ×1
icontrol ×1
mapbox-ios ×1
maps ×1
react-native ×1
react-redux ×1
reactjs ×1
redux ×1
tippecanoe ×1
turfjs ×1
xcode12 ×1