我正在尝试在 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
// …Run Code Online (Sandbox Code Playgroud) 我在使用 Mapbox GL 组合滤镜时遇到问题。过滤器单独工作,但组合使用时会产生错误。行政区过滤器使用可以动态更改的值数组,但我只是在代码中放置了一个示例,说明它可能是什么样子。每当我尝试组合过滤器时,我都会收到错误:“需要 [==、!=、>、>=、<、<=、in、!in、all、any、none、has、!has] 之一, “match”found” 问题似乎是将使用“match”表达的过滤器与使用“==”运算符的过滤器组合在一起。有谁知道如何解决这一问题。
var borough_val = ["BX", "BK", "MN"];
var zipCodeFilter = ["==", 'ZipCode', Number(zipcode_val)];
var boroughFilter = ['match', ['get', 'Borough'], borough_val, true, false];
var combinedFilter = ["all", zipCodeFilter, boroughFilter];
map.setFilter('parcels_fill', combinedFilter);
Run Code Online (Sandbox Code Playgroud) 这是Carto中下拉搜索菜单/过滤器的脚本.这个脚本似乎工作正常,直到设置sql查询.只要其中一个属性名称中有空格,脚本只会查找第一个单词,因此数据库中没有匹配项.像"San Deigo"只会返回"San".变量"input"的值只是第一个单词.如果属性没有空格,则脚本可以正常工作.
这可能是选择的问题还是有其他错误?
<!DOCTYPE html>
<html>
<head>
<title>Searchbox + Dropdown menu + Zoom + CARTO.js</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" href="https://cartodb.com/assets/favicon.ico" />
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
#wraper-city-selector {
position: absolute;
top: 20px;
left: 20px;
}
.js-city-selector {
width: 175px;
}
</style>
</head>
<body>
<!-- map div -->
<div id="map"></div>
<!-- selector div --> …Run Code Online (Sandbox Code Playgroud) 我正在使用 mapbox draw 来绘制多边形。我希望它一次只能在屏幕上绘制一个多边形。例如,用户绘制一个多边形,然后再次单击多边形绘制按钮,第一个多边形将被删除。我曾尝试使用 draw.modechange 来做到这一点,但在某处编码方式存在错误。当我单击多边形绘制按钮时,现有的多边形被删除,但是当我尝试绘制新多边形时,什么都没有。
this.map.on('draw.modechange', (e) => {
const data = draw.getAll();
console.log(draw.getMode());
if (draw.getMode() == 'draw_polygon') {
if (data.features.length > 1) {
draw.deleteAll();
}
}
});
Run Code Online (Sandbox Code Playgroud) 基于地图框示例如何添加标记
我想制作一个纯CSS而不是图像的泪滴标记。我也想从for循环索引中为标记编号。是否可以创建泪滴标记?有人能帮忙吗?我似乎无法从mapbox中找到一个很好的例子。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
.marker {
background-image: url('mapbox-icon.png');
background-size: cover;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
}
.mapboxgl-popup {
max-width: 200px;
}
.mapboxgl-popup-content {
text-align: center;
font-family: 'Open Sans', sans-serif;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZXhhbXBsZXMiLCJhIjoiY2lqbmpqazdlMDBsdnRva284cWd3bm11byJ9.V6Hg2oYJwMAxeoR9GEzkAA';
var geojson = { …Run Code Online (Sandbox Code Playgroud)