1.png

这个问题是因为异常区域的数据没有单独拎出来，而是跟周围道路数据一并返回的。如何知道这一点呢？我们可以对geojson进行拾取，当点击某一部分时，让其高亮显示。

import { Component, ElementRef, ViewChild } from '@angular/core';
import * as mapboxgl from 'mapbox-gl';
import MapboxDraw from '@mapbox/mapbox-gl-draw';
import * as turf from '@turf/turf';
@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss'],
})
export class MapComponent {
  @ViewChild('map')
  private mapContainer!: ElementRef<HTMLElement>;
  constructor() {}
  async getGeojson() {
    const json = await fetch('/assets/202412021426471681.geojson').then((response) => response.json());
    json.features.map((feature, index) => {
      feature.properties = { id: index };//便于拾取筛选
    });
    return json;
  }
  async ngAfterViewInit() {
    const geojson = await this.getGeojson();
    
    (mapboxgl as any).accessToken = 'default_token'; //随便写

    const map = new mapboxgl.Map({
      container: this.mapContainer.nativeElement,
      projection: 'globe', // 设置为球体投影
      style: {
        version: 8, //这个不能乱写
        sources: {}, //置空
        layers: [
          {
            id: 'background',
            type: 'background',
            paint: { 'background-color': 'white' },
          }, //背景为白色的球
        ],
      },
      center: [0, 0], // 初始位置
      zoom: 0, // 初始缩放级别
    });

    map.on('load', function () {
      // 添加数据源
      map.addSource('polygon-source', {
        type: 'geojson',
        data: geojson,
      });

      // 添加图层
      map.addLayer({
        id: 'polygon-layer',
        type: 'fill',
        source: 'polygon-source',
        paint: {
          'fill-color': '#0080ff', // 多边形填充颜色
          'fill-opacity': 0.5, // 多边形透明度
        },
      });
    });

    map.flyTo({
      center: [117.30395791760482, 31.70632373320954],
      zoom: 12,
    });
    map.on('click', 'polygon-layer', (e) => {
      const clickPoint = [e.lngLat.lng, e.lngLat.lat];
      const point = turf.point(clickPoint);

      let foundPolygon = null;

      geojson.features.map((feature) => {
        const isInside = turf.booleanPointInPolygon(point, feature.geometry);
        // console.log(isInside, 'isInside');

        if (isInside) {
          foundPolygon = feature;
          const targetFeatureId = feature.properties.id;
          console.log('found>>>', foundPolygon);
          map.setPaintProperty('polygon-layer', 'fill-color', [
            'case',
            ['==', ['get', 'id'], targetFeatureId], // 如果特征的 id 属性等于目标 ID
            '#ff0000', // 则设置颜色为红色
            '#0080ff', // 否则保持初始颜色
          ]);
        }
      });
    });
    const draw = new MapboxDraw({
      displayControlsDefault: false,
      controls: {
        polygon: true,
        trash: true,
      },
    });
    map.addControl(draw);
  }
}

2.png

可以看到，异常区域的数据，确实跟周围道路是一体的。正确的数据是这样的：

3.png