- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我使用的是 mapBoxGL 1.0 版 JS 库,我使用的是集群 map 功能。但是我注意到在某些缩放级别上,图层中的某些符号会消失,然后它会在其他缩放级别上再次出现。我似乎无法弄清楚配置有什么问题。我附上了图像并注意到集群总大小也不对应于总符号。
map.addSource("dayplaces", {
type: "geojson",
// Point to GeoJSON data. This example visualizes all M1.0+ earthquakes
// from 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program.
data: geojson,
cluster: true,
clusterMaxZoom: 12, // 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: "dayplaces",
filter: ["has", "point_count"],
paint: {
// Use step expressions (https://docs.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
// * Yellow, 30px circles when point count is between 100 and 750
// * Pink, 40px circles when point count is greater than or equal to 750
"circle-color": [
"step",
["get", "point_count"],
"#51bbd6",
100,
"#f1f075",
750,
"#f28cb1"
],
"circle-radius": [
"step",
["get", "point_count"],
20,
100,
30,
750,
40
]
}
});
map.addLayer({
id: "cluster-count",
type: "symbol",
source: "dayplaces",
filter: ["has", "point_count"],
layout: {
"text-field": "{point_count_abbreviated}",
"text-font": ["Open Sans Semibold"],
"text-size": 12,
"text-allow-overlap": true
}
});
// https://svgtopng.com/
// https://www.flaticon.com/free-icon/map-marker_34468
map.loadImage('https://cdn.glitch.com/0a178325-3429-4356-9e0e-c6aed80fea14%2F34468green.png?v=1560084647010', function(error, image) {
if (!error) {
map.addImage('pin', image);
map.addLayer({
id: "unclustered-point",
type: "symbol",
source: "dayplaces",
filter: ["!", ["has", "point_count"]],
"layout": {
"visibility": "visible",
"icon-image": "pin",
"icon-size": 0.08,
"icon-allow-overlap": true,
"text-field": ["get", "order"],
"text-font": ["Open Sans Semibold"],
"text-allow-overlap": true,
"text-size": 11,
"text-offset": [0, 0.2],
"text-anchor": "bottom"
}
});
} else {
console.log("MAP LOAD IMAGE ERROR:" + error);
}
});
// inspect a cluster on click
map.on('click', 'clusters', function(e) {
var features = map.queryRenderedFeatures(e.point, {
layers: ['clusters']
});
var clusterId = features[0].properties.cluster_id;
map.getSource('dayplaces').getClusterExpansionZoom(clusterId, function(err, zoom) {
if (err)
return;
map.easeTo({
center: features[0].geometry.coordinates,
zoom: zoom
});
});
});
最佳答案
在 documentation for working with large GeoJSON sources in Mapbox GL JS ,它指出:
Mapbox GL GeoJSON sources are turned into Mapbox vector tiles on-the-fly by the client
Optional number. Defaults to 0.375. Douglas-Peucker simplificationtolerance (higher means simpler geometries and faster performance).
tolerance: 0
添加源时。添加没有简化的 GeoJSON 源的示例:
this.map.addSource(`example-source`, <any>{
type: 'geojson',
data: exampleData,
tolerance: 0
});
这为我解决了这个问题,希望它有所帮助。
关于Mapbox GL JS 在不同的缩放级别上缺少一些符号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56581869/
我正在使用 Visual Studio 2010。 我正在尝试在 OpenGL 中编写简单的 Camera 类。 我需要在 Camera.h 中包含 gl/gl.h gl/gl.h 已经包含在 mai
这个问题适用于了解 MapBox GL JS 内部结构的人。 我正在使用 MapBox GL JS 渲染多达 40,000 个多边形的地理 map ,每个多边形的颜色都基于该多边形的“所有者”。每个所
我想知道3D建筑物的“填充颜色”是否可以根据某些事件动态更改,例如将鼠标悬停在建筑物上时的mouseMoveEvent,突出显示3D建筑物。 最佳答案 试试这个 map.on('load', func
我正在使用 mapbox-gl 并从 osm2vectortiles.org 下载矢量切片 我想让 map 仅在已知多边形内可见,但找不到任何方法来实现这一点。 我可以想象几种解决这个问题的方法,但每
在探索javascript的过程中,我遇到了一个很莫名其妙的问题。序言是:我将不同 mime 类型的图像(主要是 pngs/jpgs)转换为具有 ImageBitmap 接口(interface)的位
我一直在使用行程图层可视化行程数据,并且尝试在每条行程线的开头放置一个图标。是否可以让多个图标随时间改变位置、出现和消失? Example of what I'm trying to do (red
我有一个 map 应用程序,它使用 Mapbox.com 来提供英国邮政编码边界的矢量切片。边界文件很大,不适合使用 TopoJSON 之类的工具进行下载。这很好用。 我还使用数据驱动的样式来格式化
将鼠标悬停在一个 3D 建筑上时,如何突出显示它?像 OSM 建筑物突出显示功能。 mapbox street v7 建筑图层特征属性好像很少,只包括: 拉伸(stretch) 高度 最小高度 类型
有没有办法隐藏/删除或禁用控件,例如 mapbox-gl-draw 中的控件? 我添加绘制控件如下 draw = mapboxgl.Draw({ drawing: true,
这可能非常简单,但我找不到如何在 deck.gl 的标签下方添加新层。它在底层使用 Mapbox GL JS。对于 mapbox gl,解释为 here . 我还在他们的文档中搜索了 z-index
我正在寻找一种方法,允许我像 Mapbox JS 一样为我的 map 创建一个简单的自定义标记。 深入浏览了网络,似乎没有明显或非常直接的方法来实现这一目标。我猜这是一个被错过的功能。 尝试过使用Ma
接下来的教程向我展示了以下代码: ... void update() { glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_TRIANGLES);
我正在寻找一种方法,允许我像 Mapbox JS 一样为我的 map 创建一个简单的自定义标记。 深入浏览了网络,似乎没有明显或非常直接的方法来实现这一目标。我猜这是一个被错过的功能。 尝试过使用Ma
我想在交互式 map 上显示一个圆圈的轮廓(无填充)但是,mapbox-gl-js 中的绘制选项似乎仅限于填充。 https://www.mapbox.com/mapbox-gl-style-spec
我在 kepler.gl 中工作并从数据库加载数据。如果数据库更新,我希望能够动态更新数据集。有没有办法向数据集添加一行并更新 map ? 我已经尝试删除数据集(使用 removeDataset)并将
如何在 mapbox-gl 中为图层文本字段添加背景颜色 .. 或者如何完成以便文本字段上有背景框 map.addLayer({ "id": "markers", "type": "s
我正在尝试使用 mapbox-gl 创建等值线图。在示例等值线 map 中,看起来他们根据要素的属性设置了要素的油漆填充颜色。有没有办法通过访问 map 来设置颜色? 即。我在称为 id 的功能属性中
我想根据最近的草皮更改 map 点击时的图标大小。我如何做到这一点? nearestBuilding.properties['icon-size'] = 0.2; 不起作用。 var retail =
我正在尝试在 MapBox GL JS 中聚类自定义标记,但我不知道如何将自定义标记图像从 url 获取到符号层?它要么不起作用,要么根本没有标记出现。它是如何完成的?我需要知道如何使用带有符号层的
寻找一种使用 Mapbox GL JS 获取 map 中心当前坐标的方法,就像在 Mapbox Studio 上一样(见下文) Mapbox Studio Screenshot 谢谢 最佳答案 Map
我是一名优秀的程序员,十分优秀!