标签: mapbox

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

使用 Mapbox 样式 API 调用更新样式 (POST) 或删除样式 (DELETE) 后，对列表样式 (GET /styles/v1/{username}) 的后续调用将返回过时的样式数据。例如，在调用 DELETE 然后调用 CREATE 后，GET 调用仍将返回已删除的样式！

等待大约 5 分钟通常会返回最新的、正确的样式数据。显然，Mapbox 端发生了一些缓存，但删除或更新应该立即反映出来。

有人确认或提供解决方法吗？

我正在尝试创建一个在地图上呈现圆圈的网络应用程序。如果numUsers属性 >= 1，则圆圈为绿色；如果numUsers属性为 0，则圆圈为红色（默认值为 0）。

以下是我的数据源的结构：

{ 
    "type":"FeatureCollection",
    "features":[ 
        { 
            "type": "Feature",
            "id": 0,
            "geometry":{ 
                "type":"Point",
                "coordinates":[ 
                    1.49129,
                    42.46372
                ]
            },
            "properties": { 
                "numUsers":0
            }
        }
    ]
}

所有圆圈最初都呈现为红色，这正是我想要的，因为numUsers每个圆圈的属性最初设置为 0。但是，我想通过将 numUsers 属性设置为 1 将其中一个圆圈更改为绿色。我'我尝试使用setFeatureState，但它不会将圆圈的颜色更改为绿色：

map.setFeatureState({source: "cities", id : 0}, {numUsers : 1});

下面是我的渲染JS代码：

map.on('style.load', function (e) {
    map.addSource('cities', {
        "type": "geojson",
        "data": "cities.geojson",
        "cluster": true,
        "clusterMaxZoom": 14,
        "clusterRadius": 80
    });

    map.addLayer({
        "id": "cities",
        "type": "circle",
        "source": "cities",
        "paint": {
            "circle-color": …

在查看了mapbox文档后，我编写了这个组件

import React from "react";
import mapboxgl from "mapbox-gl";
import "./Map.css";

mapboxgl.accessToken = "...";

type Props = {
  longitude: number;
  latitude: number;
};

class Map extends React.Component<Props> {
  private mapContainer: any;
  private map: any;

  componentDidMount(): void {
    this.map = new mapboxgl.Map({
      container: this.mapContainer,
      center: [this.props.longitude, this.props.latitude],
      style: "....",
      zoom: 13
    });
  }
  render(): JSX.Element {
    return (
      <div
        ref={(el): void => {
          this.mapContainer = el;
        }}
        className="mapContainer"
      />
    );
  }
}

export default Map;

这段代码可以正常工作，但是，在我的实际项目中，我们使用的是 TypeScript。我不想使用anyfor …

我有一个层将 geojson 源中的点要素渲染为圆圈。以下是其中一项功能的示例：

{
  type: 'Feature',
  properties: {
    color: 'red',
    red: true,
    green: false
  },
  geometry: {
    type: 'Point',
    coordinates: [-77.038659, 38.931567]
  }
};

我希望圆形不透明度是 3 个因素的乘积（要素的一些属性、地图缩放以及要素状态中是否应隐藏该要素的布尔值）。我无法找到一种方法来编写一个表达式来解释这三个问题。缩放规则的限制似乎是问题所在。

这是我想写的逻辑：

if (feature-state.hidden) {
    opacity = 0;
} else if (properties.red) {
    opacity = 1;
} else if (properties.green and zoom >= 10) {
    opacity = 1;
} else if (zoom >= 15) {
    opacity = 1;
} else {
    opacity = 0;
}

我尝试编写这样的不透明表达式：

'circle-opacity': [
  'case',
  ['to-boolean', ['feature-state', 'hidden']], 0,
  ['to-boolean', …

我想在地图中放置自己的标记，但 MyImage 应该是 png 格式。如果我想把它变成 svg 怎么办？

map.loadImage(MyImage, function(error, image) {
      if (error) throw error;
      map.addImage("custom-marker", image);
    });

我有一个层将 Geojson 源中的多边形要素渲染为填充区域。以下是其中一项功能的示例：

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "id": 12345,
        "name": 'exampleName',
        "hasCities": true | false,
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [[...], [...]]
      }
    }, {...}
  ]
  "properties": {
    "parent_name": "parent1",
    "parent_id": 23,
  }
}

我想达到这个填充不透明度逻辑：

const isRed = true | false
const redOpacity = 0.5
const notRedOpacity = 0.8

if (hasCities) {
  opacity = 0
} else if (isRed) {
  if(zoom <= 14) // use linear interpolation
    opacity = redOpacity
  else if(zoom >= …

我正在使用 MapBox，并且希望向 AWS S3 存储桶中的地图添加一些图像。

我使用的 MapBox 函数是loadImage。loadImage 文档声明“外部域必须支持 CORS”。

我的 JS 代码类似于：

this.map.on('load', () => {
    ...
    this.map.loadImage("https://my-test-bucket.s3-us-west-1.amazonaws.com/long-uuid-here.png", (error, image) => {
    if (error) {
        console.log(error)
        throw error;
    }
// The rest doesn't matter
...

当我的地图在 Chrome 中加载时，出现以下错误：

Access to fetch at 'https://my-test-bucket.s3-us-west-1.amazonaws.com/long-uuid-here.png' from origin 'https://localhost:7000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the …

我弹出了一个地图框标记，我想删除文本上方的“x”（关闭）符号。我已经搜索过，但找不到解决方案。谢谢阅读。

这就是现在的样子。

我正在为 Mapbox 使用 Mapbox-gl 包。我正在 useEffect 内渲染地图，我想要做的是更改 Mapbox 的中心而不完全重新渲染地图。例如

const mapContainerRef = useRef(null);

const [markerLngLat, setMarkerLngLat] = useState([85.324, 27.7172]);

useEffect(() => {
  const map = new mapboxgl.Map({
    container: mapContainerRef.current,
    style: 'mapbox://styles/lmaps/ckl6t1boq578819qod5v7ynby',
    center: markerLngLat,
    zoom: 13,
  });
}, []);

return (
  <div>
    <a onClick={setMarkerLngLat([65.468754, 44.57875])} />
    <div className='listing-map-container' ref={mapContainerRef} />
  </div>
);

通过单击按钮，我想将地图的中心从之前的经纬度移动到新设置的经纬度，而不需要重新渲染整个地图。在 useEffect 的 [] 中传递markerLngLat 是可行的，但它会完全重新渲染地图及其上的所有其他 1000 个标记，因此不能更喜欢这种方式。实际的代码要长得多，并且地图上标记了许多标记，因此我不想完全重新渲染地图。