小编blg*_*lg2的帖子

带有符号层的 MapBox GL 自定义标记

我正在尝试在 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-js mapbox-marker

5
推荐指数
1
解决办法
7197
查看次数

Mapbox GL 组合过滤器问题

我在使用 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)

javascript mapbox mapbox-gl-js

4
推荐指数
1
解决办法
1999
查看次数

jQuery无法在属性选择器中的空格后读取单词

这是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)

html javascript jquery jquery-select2

2
推荐指数
1
解决办法
475
查看次数

使用 Mapbox-GL-Draw 一次只允许绘制一个形状

我正在使用 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)

mapbox-gl-js mapbox-gl-draw

1
推荐指数
1
解决办法
1699
查看次数

带数字的MapBox GL纯CSS标记

基于地图框示例如何添加标记

我想制作一个纯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)

javascript css mapbox mapbox-gl-js

1
推荐指数
1
解决办法
557
查看次数