标签: mapbox
单击时重置传单多边形上的样式
我有一张用 leaflet.js 制作的地图，其中包含由 70 个多边形组成的 geoJSON 层。每次用户单击多边形时，它都会突出显示，并且侧面板会填充数据并打开：
function clickFeature(e) {
var layer = e.target;
layer.setStyle({
weight: 3,
color: '#666',
dashArray: '',
fillOpacity: 0.7
});
info.update(layer.feature.properties);
$( "#mypanel" ).panel("open");
}
效果很好。但我需要更改它，以便每次单击多边形时，它都会同时突出显示，并且先前单击的多边形返回到原始样式，因此一次只能“选择”一个多边形。
我已经尝试过这个，但它不起作用（面板不再更新或打开）：
var lastClickedLayer;
function clickFeature(e) {
geojson.resetStyle(lastClickedLayer);
var layer = e.target;
layer.setStyle({
weight: 3,
color: '#666',
dashArray: '',
fillOpacity: 0.7
});
info.update(layer.feature.properties);
$( "#mypanel" ).panel("open");
layer = lastClickedLayer;
}
非常感谢任何帮助。
推荐指数
解决办法
查看次数
Mapbox GL JS：将基础层设置为白色？
我想显示带有白色背景的 Mapbox GL JS 地图，而不是地图背景。
这是我现在的代码：
mapboxgl.accessToken = 'mytoken';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
minZoom: 4,
maxZoom: 14,
center: [-2.0, 53.3],
});
如何用纯白色替换浅色背景？如果我更改style为white然后我会收到错误。
推荐指数
解决办法
查看次数
OSM数据转mapBox格式
我看到几个地方将OSM数据转换为MVT（mapbox 矢量切片）以进行简单渲染。
其中包括：
- OSRM提供基于 MVT 的路线图像进行渲染
- OpenMapTiles可以下载 MVT 格式的 OSM 地图
- GeoServer可以导入OSM和导出MVT
有没有一个简单的工具可以在本地将OSM数据转换为MVT？
我有自己的 OSM 格式数据，我想将其转换为 MVT 并存储在本地，而不渲染为地图图像。
推荐指数
解决办法
查看次数
mapboxgl.js 与 leaflet.js
我即将启动一个 Web 应用程序，其主要目的是显示 Mapbox 地图、切换图层并根据与地图的交互显示数据。
我想知道我应该使用 mapboxgl.js 和 leaflet.js、mapboxgl.js 或 leaflet.js。每个人都一直说 leaflet 很棒，但想知道 mapboxgl 是否为您提供相同的功能和性能？我不断在互联网上阅读相互矛盾的内容
非常感谢您的帮助
推荐指数
解决办法
查看次数
Mapbox GL JS 创建自定义图例
我在 Mapbox Studio 中使用图块集创建了一个自定义地图来创建分区统计图，然后导出该地图，以使用 Mapbox GL JS 扩展地图。
我已按照创建图例的教程进行操作，该教程在使用 Javascipt.j 时效果很好： https://www.mapbox.com/mapbox.js/example/v1.0.0/custom-legend/
我需要使用 Mapbox GL JS，因为我还使用自定义 CSS 创建了弹出窗口，效果非常好。
“map.legendControl.addLegend(document.getElementById('legend').innerHTML);” 导致地图不显示弹出窗口。
请有人提供帮助，让 Mapbox 中的自定义图例能够使用 Mapbox GL JS 工作，因为 Mapbox 网站上没有文档。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Show polygon information on click</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.44.2/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
.legend label,
.legend span {
display:block;
float:left;
height:15px;
width:20%;
text-align:center;
font-size:9px;
color:#808080; …推荐指数
解决办法
查看次数
将自定义标记添加到 Mapbox 地图
我在我的项目中使用mapbox
我正在使用 mapbox.js 并使用像这样的自定义标记制作我的地图
$(function() {
const token = '*********';
let myLatlng = L.latLng(<%= @hotel.lat %>,<%= @hotel.lng %>);
L.mapbox.accessToken = token;
let map = L.mapbox.map('map-canvas', 'mapbox.streets')
.setView(myLatlng, 14);
let marker = new L.marker(myLatlng,{
icon: L.icon({
iconUrl: '//chart.googleapis.com/chart?chst=d_map_pin_icon&chld=home|EBCB2D'
})
}).addTo(map);
});
我正在像这样改变标记的图标
icon: L.icon({
iconUrl: '//chart.googleapis.com/chart?chst=d_map_pin_icon&chld=home|EBCB2D'
})
我想知道 MapBox GL JS 是否有像 rhis 这样的速记方法来改变它？
推荐指数
解决办法
查看次数
如何在嵌套属性上使用mapbox“case”表达式？
如何使用嵌套值来使用 case == 运算符？就像是：
this.map.setPaintProperty("somelayer", "fill-color",
["case",
["==", ["properties:some_prop"], someval],
"#34c0dd",
"#499bbc"]
其中属性是字典：
properties = {
some_prop: 1,
some_prop2: 2,
// and so on
}
我已经尝试过["properties.some_prop"]，["properties"]["some_prop"]但效果并不好。
以及如何打印 mapbox 查询（例如 console.log 或其他内容）？
推荐指数
解决办法
查看次数
对于 mapbox 中的非 DOM 元素上传，不推荐使用 Alpha-premult 和 y-flip
您好，我尝试将 Mapbox 用于我的网络应用程序，但是当我尝试设置 lng 34.0544779 和 -118.2443409 时，我遇到了问题
Invalid LngLat latitude value: must be between -90 and 90
当我删除中心并创建标记时。
texImage2D: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads.
推荐指数
解决办法
查看次数
在 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: …推荐指数
解决办法
查看次数
Mapbox 图层具有重复的 ID
我正在使用 Mapbox-GL-JS 构建一个 Web 应用程序，它使用 Mapbox Studio 切片集添加图层作为分区图。然而，当我访问该层时，多个功能似乎都收到相同的 ID。
https://github.com/mapbox/mapbox-gl-js/issues/8284 这里提到这是由于我的数据造成的，但是数据集中没有 ID 字段： https: //www.dropbox.com /s/5ci0hosqakvdahx/townships.json?dl=0
https://jsbin.com/cuhewomepo/1/edit?html,js,输出
map.on("mousemove", "gemeentes", function (e) {
if (e.features.length > 0) {
if (hoverGemeenteId) {
map.setFeatureState({
source: 'gemeentes-src',
sourceLayer: 'townships-0u4ffk',
id: hoverGemeenteId
}, {hover: false});
}
hoverGemeenteId = e.features[0].id;
console.log(hoverGemeenteId);
map.setFeatureState({
source: 'gemeentes-src',
sourceLayer: 'townships-0u4ffk',
id: hoverGemeenteId
}, {hover: true});
}
});
以下是项目示例： https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/
每当一个城镇悬停时，它就会改变颜色，但是由于有多个城镇具有相同的 ID，因此多个区域会亮起，而不仅仅是悬停的区域。
编辑：当我运行以下代码时：
const filtered = map.querySourceFeatures('gemeentes-src', {
sourceLayer: 'townships-0u4ffk',
filter: ['>=', ['id'], 0]
});
它清楚地表明有多个功能具有相同的 id，并且没有 ID 超过 249。这几乎就像有 250 …
推荐指数
解决办法
查看次数
标签 统计
mapbox ×10
javascript ×5
mapbox-gl-js ×5
leaflet ×2
mapbox-gl ×2
choropleth ×1
gis ×1
jquery ×1
legend ×1
react-map-gl ×1