标签: mapbox-gl-js

我有一个国家/地区列表，我正在尝试将地图居中并调整缩放级别以在地图中显示整个国家/地区。

使用 geocoding APIs https://api.mapbox.com/geocoding/v5/{dataset}/{query}.json?country={cc}&access_token=<your access token>，我能够得到一些不在国家中心的坐标，但至少我得到了相关的坐标，但是，返回的对象不包含任何关于缩放级别的信息。

<select id="country" name="country">
    <option value="at">Austria</option>
    <option value="cy">Cyprus</option>
    <option value="de">Germany</option>
    <option value="pt">Portugal</option>
    <option value="es">Spain</option>
</select>

<div class="map" id="map"></div>

<script>

mapboxgl.accessToken = 'the_access_token';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v8', //stylesheet location
    center: [-74.50, 40], // random starting position
    zoom: 9 // starting zoom level
});

// Find country
$('#country').on('change', function (e) {
    countrycode = $(this).val();
    country = $(this).find('option:selected').text();
    console.log(countrycode, country);
    $.ajax({
        url: "https://api.mapbox.com/geocoding/v5/mapbox.places/"+country+".json?country="+countrycode+"&access_token="+mapboxgl.accessToken,
        success: function(res) {
            console.log(res);
            map.easeTo({ …

我将文件转换为通过的处理时间超过 2 秒120 MB geojsonprotobufMapnikVector Tile 节点绑定。

在另一端提供原始geosjon文件需要不到 200 毫秒。

正常吗？如果是，那么提供矢量切片有什么意义geojson（我正在查看它mapbox-gl-js）？

这是我的代码的摘录：

// Load GeoJson into memory

var fs = require("fs");
var content = JSON.parse(fs.readFileSync("us_counties.json"));


// Initialise Mapnik and mercator object

mapnik.register_default_fonts();
mapnik.register_default_input_plugins();

var mercator = new SphericalMercator({
  size: 256
 });

// Vector Tile Router

router.get('/:z/:x/:y.pbf', function(req, res) {

  var bbox = mercator.bbox(
    +req.params.x,
    +req.params.y,
    +req.params.z,
    false,
    '4326'
  );

  // Convert GEOJSON to protobuf VectorTile …

当我尝试将带有 MultiLineString 的源添加到“线”层时，没有呈现任何内容。没有错误，没有线条。

在我将 MultiLineString 功能转换为 LineString 功能成功渲染的线条之后。

我正在使用mapbox-gl-draw向我的地图添加可移动功能。除了移动性功能，我需要旋转/变换-Ability为特色，功能类似于Leaflet.Path.Transform。

目前，我唯一的选择是创建自定义模式吗？

例如：

map.on('load', function() {
  Draw.changeMode('transform');
});

我无法将我的地图及其功能转换mapbox-gl-leaflet为实现，Leaflet.Path.Transform因为失去旋转/轴承/俯仰支撑不是一种选择。

我需要围绕用户点击的点创建一个圆圈。我该怎么做？每个教程都展示了从 geojson 源中提取一个圆而不是创建一个圆。还需要能够编辑半径。

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

我有一个Map具有几个状态的功能父组件，其中之一是layers，其值最初是从配置中设置的。

然后我有一个子LayerControl组件，它将地图的图层状态作为其道具。LayerControl 组件进行一些更改并将它们传递回 Map onLayerChange，然后使用 Map调用层 ( setLayers)的 setState 方法。

据我了解，这应该会触发我的 LayerControl 组件的重新渲染，但事实并非如此。我做错了什么？

export default function Map(){

const [viewport, setViewport] = useState(mapConfig.viewport);
const [style, setStyle] = useState(mapConfig.mapStyle);
const [layers, setLayers] = useState(mapConfig.layers);

function updateLayers(layers){
    setLayers(layers); //why won't LayerControl re-render?
}

return(
    <MapGL
        zoom={[viewport.zoom]}
        containerStyle={{
            height: "100%",
            width: "100%"
        }}
        style={style}>
        <LayerControl
            onLayerChange={layers => updateLayers(layers)} 
            layers={layers}
        />
        <ZoomControl/>
        <ScaleControl/>
    </MapGL>
);

}

我试图从概念上理解 Deck.GL 如何渲染事物，所以我正在研究从 Lines 到 Polygons 到 GeoJson 的示例层。线条工作正常，但有些东西阻止我渲染即使是 DeckGL 在他们的例子中最简单的多边形。

这是一些有效的示例行代码

import React from "react";
import DeckGL, { LineLayer } from "deck.gl";
import { StaticMap } from "react-map-gl";

const MAPBOX_ACCESS_TOKEN = process.env.REACT_APP_MAPBOX_KEY;

// Viewport settings
const viewState = {
  longitude: -122.41669,
  latitude: 37.7853,
  zoom: 13,
  pitch: 0,
  bearing: 0
};

// Data to be used by the LineLayer
const data = [
  {
    sourcePosition: [-91.72307036099997, 31.814196736000035],
    targetPosition: [-122.41669, 37.781]
  },
  {
    sourcePosition: [-122.41669, 37.781],
    targetPosition: [-95.52274057225983, 30.131426214982195]
  }
]; …

我正在创建一个 Pop up

  this.popUp = new mapboxgl.Popup({
    closeButton: true,
    closeOnClick: true,
    anchor: 'bottom-left',
  })
    .setLngLat(coordinates)
    .setHTML(
      '<span><p>Foo: Bar
      + <img class="pop-up-image" src=.../></span>'
    )
    .addTo(this.map);

的内容Pop up我定义以下

.setHTML(
      '<span><p>Foo: Bar
      + <img class="pop-up-image" src=.../></span>'
    )

有没有办法将 aReact.Component或 afunctional Component作为内容传递给弹出窗口？

我有一个灰色层来在 Mapbox 地图上显示多个多边形。当用户单击它以显示“选定”多边形时，我试图仅更改其中一个的颜色。我不想要交互，这就是为什么我不使用 Draw 库，只是为了显示选定的多边形。

有没有办法只在一层中做到这一点？我尝试向boolean每个多边形属性添加一个名为“selected”的属性，但我没有实现更新图层。

// Define polygons with properties
var features = [];
areas.forEach(area => features.push(turf.polygon(area.polygon, { id_area: area.id_area, name: area.name, selected: 'false' })));
features = turf.featureCollection(features);

map.on('load', function () {
    // Add polygons to map
    map.addSource('areas', {
        'type': 'geojson',
        'data': features
    });
    // Layer settings
    map.addLayer({
        'id': 'polygons',
        'type': 'fill',
        'source': 'areas',
        'paint': {
            'fill-color': [
                'match',
                ['get', 'selected'],
                'true', '#64bdbb', // if selected true, paint in blue
                '#888888' // else paint in gray
            ], …