标签: mapbox-gl-js

我无法理解如何使用新的mapbox表达式.例如,如果我需要这样的东西:

如果prop'store'大于0且小于500,则将circle-radius设置为10

如果prop'store'大于500,则将circle-radius设置为20

我怎么能用表达式做呢？谢谢

我正在使用基于外部文件绘制邮政编码轮廓的mapbox，geojson如下所示：

import { Component, OnInit } from '@angular/core';
import * as mapboxgl from 'mapbox-gl';

@Component({
  selector: 'app-mapbox',
  templateUrl: './mapbox.component.html',
  styleUrls: ['./mapbox.component.css']
})
export class MapboxComponent implements OnInit {

  ngOnInit() {
    mapboxgl.accessToken = 'api-key';
    let map = new mapboxgl.Map({
      container: 'map',
      style: 'styles',
      zoom: 5,
      center: [-80.118, 25.897]
    });

    map.addControl(new mapboxgl.NavigationControl());

    map.on('load', function () {
      map.addSource("route", {
        "type": "geojson",
        "data": "./assets/shapeGeoJson.json"
      });

      map.addLayer({
        "id": "route",
        "type": "line",
        "source": "route",
        "paint": {
          'line-color': "gray"
        }
      });
    });
  } …

在我的 Mapbox 上有 3 层。 id: 'Map', id:'Cluster',id: 'Point'

map.on('click', 'Point', function (e) {
    $(".page-wrapper").addClass("toggled");/*show sidebar*/
  });

此代码意味着当我单击图层上的点时id: 'Point'，侧边栏将显示。

$(".page-wrapper").removeClass("toggled");/*hide sidebar*/ 

添加到事件时，此代码将隐藏侧边栏。

现在，我想点击图层id: 'Point'侧边栏上没有点的任何地方将被隐藏。

我怎样才能做到这一点？

尝试使用react-map-gl但无法获得最简单的 lib 示例。一旦我尝试渲染地图，我就会在控制台中收到这个奇怪的错误，我无法理解：

Uncaught ReferenceError: _typeof is not defined
    at mr (blob:http://localhos…6-19b5d5c80288:4993)
    at blob:http://localhos…6-19b5d5c80288:6740
    at new Fn (blob:http://localhos…6-19b5d5c80288:6757)
    at new Jn (blob:http://localhos…6-19b5d5c80288:7040)
    at blob:http://localhos…6-19b5d5c80288:8992
    at blob:http://localhos…-19b5d5c80288:14153

有时会变成这样：

Uncaught ReferenceError: _typeof is not defined
    at mr (0bcc60f9-25f2-4a56-8906-ebd57645a06c:4993)
    at 0bcc60f9-25f2-4a56-8906-ebd57645a06c:6740
    at new Fn (0bcc60f9-25f2-4a56-8906-ebd57645a06c:6757)
    at new Jn (0bcc60f9-25f2-4a56-8906-ebd57645a06c:7040)
    at 0bcc60f9-25f2-4a56-8906-ebd57645a06c:8992
    at 0bcc60f9-25f2-4a56-8906-ebd57645a06c:14153

带有 mapbox 徽标的地图框仅呈现。

我在 Rails 6 上使用这些软件包：

"dependencies": {
  "@babel/preset-react": "^7.0.0",
  "@rails/actioncable": "^6.0.0-alpha",
  "@rails/activestorage": "^6.0.0-alpha",
  "@rails/ujs": "^6.0.0-alpha",
  "@rails/webpacker": "^4.0.7",
  "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
  "prop-types": "^15.7.2",
  "react": "^16.9.0",
  "react-dom": "^16.9.0",
  "react-map-gl": …

我正在尝试为 GeoJSON 中的点分配一个图标。我使用这个片段：

    map.addSource('Punti di allerta', {
        type: 'geojson',
        data: source_attentionpoints, 
    });
    map.addLayer({
        'id': 'Punti di allerta',
        'type': 'circle',
        'source': 'Punti di allerta',
        'layout': {
            'icon-image': '{% static 'image/webgis/icons/warning50.png' %}',
            'icon-size': 0.5
        }
    });

我看到这两个错误并且点没有呈现：

错误：“layers.Punti di allerta.layout.icon-image：未知属性“icon-image””错误：“layers.Punti di allerta.layout.icon-size：未知属性“icon-size””

但如果我使用这个片段而不是之前的片段，我可以毫无问题地看到所有点：

map.addLayer({
    'id': 'Punti di allerta',
    'type': 'circle',
    'source': 'Punti di allerta',
     'paint': {
         'circle-radius': 8,
         'circle-color': 'rgb(0,0,0)',
         'circle-opacity': 1.0,
         'circle-stroke-width': 4,
         'circle-stroke-color': 'rgb(200,200,200)',
         'circle-stroke-opacity': 1.0,
         'circle-blur': 0,
    }
});

我有什么错吗？

我\xc2\xb4一直在尝试以多种方式将导航控件添加到我的地图中，但窗口没有出现，当我看到我的控制台时，它不会\xe2\x80\x99t抛出任何错误。这是我的代码，来自 Mapbox GL JS 文档：

<template>\n  <div>\n    <div id="map" class="map">\n    </div>\n  </div>\n\n</template>\n\n<script>\n/* eslint-disable */\nexport default {\n  computed: {\n    location () {\n      // eslint-disable-next-line no-console\n      console.log(this.$store.state.location)\n      return location\n    }\n  },\n  mounted () {\n    this.createMap()\n    // document.querySelector(\'.mapboxgl-ctrl-geocoder input\').focus()\n  },\n  methods: {\n    createMap () {\n      const mapboxgl = require(\'mapbox-gl\')\n      const MapboxGeocoder = require(\'@mapbox/mapbox-gl-geocoder\')\n\n      mapboxgl.accessToken = \'pk.eyJ1IjoicGlucGFydGRldiIsImEiOiJjajBqOXh0anAwMDFkMzNwbW5qMzVuZGo0In0.ltvQzboVtprxfeFAVOw1GA\'\n\n      // init the map\n      var map = new mapboxgl.Map({\n        container: \'map\',\n        style: \'mapbox://styles/ximenabc/ck44uqzs21gk71cmtma66htry\',\n        center: [-96.707, 17.065], // starting position [lng(-180, 180), lat(-90, 90)]\n        zoom: 15,\n        pitch: …

如何更改 Mapbox GL JS 中的光标图像？我努力了

#map-container {
    cursor: crosshair;
    }
but it doesn't work.

当前的 MapBox 归属徽标显然是制作的，因此它可以在浅色和深色背景上显示：

然而，从平面设计的角度来看，这种通用显示器的代价是看起来不专业。

有没有办法用无影版本替换它，或者完全替换它以支持回到常规文本版本？

字标非常烦人，尤其是在使用同步将地图放入另一张地图时，然后获得双字标。

是否有一种黑客方法可以在不联系 sales@mapbox 的情况下删除字标？

https://www.mapbox.com/help/how-attribution-works/