如何无需手动录入，从本地JSON文件读取数据在Mapbox中绘制标记点

存在的问题 #

• 图层类型配置错误：Mapbox GL JS的矢量点渲染图层类型为circle，你填写的Point是GeoJSON的几何类型，不属于合法图层类型，导致图层无法正常渲染。
• 样式表达式逻辑错误：['get', 'coordinates']取到的是点的经纬度数组，无法作为数值参数参与半径、颜色的插值计算，同时你配置的circle-color插值规则未补充对应的色值，样式计算直接失效。
• 本地文件读取限制：直接双击打开HTML文件时，浏览器同源安全策略会阻止读取同目录的本地JSON文件，导致数据源加载失败，该问题通常不会在控制台抛出明显报错，但会返回空数据源。

解决方案 #

1. 启动本地静态服务加载页面
   不要直接双击打开HTML，在项目目录下执行对应命令启动本地服务后，访问http://localhost:8000打开页面即可正常读取本地JSON文件：

• Python3环境：执行python -m http.server 8000
• Node.js环境：先全局安装http-server，再执行http-server -p 8000

2. 修正代码
   如果你的restaurants.json是标准GeoJSON格式，可直接使用以下修正后的代码：

mapboxgl.accessToken = 'pk.eyJ1Ijoiam1hcHNkamFuZ28iLCJhIjoiY2tydzIwazc4MGNnODJvb2VhNHNhZDd5diJ9.iwGIdgMHrcjbNu1xJRAElQ';

const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [-0.19346, 51.50405],
  zoom: 9
});

map.on('load', async () => {
  // 显式读取本地JSON文件，可在控制台打印确认数据是否正常
  const res = await fetch('./restaurants.json');
  const geojsonData = await res.json();

  map.addLayer({
    id: 'restaurants',
    type: 'circle',
    source: {
      type: 'geojson',
      data: geojsonData
    },
    paint: {
      // 先使用固定样式测试渲染，后续可根据你实际的属性字段修改插值规则
      'circle-radius': 6,
      'circle-color': '#FF0000',
      'circle-opacity': 0.8
    }
  });
});

如果你的restaurants.json是普通坐标数组（非GeoJSON格式，结构示例：[{"lng":116.39,"lat":39.9,"name":"xxx"},...]），需要先转换为GeoJSON格式再传入：

map.on('load', async () => {
  const res = await fetch('./restaurants.json');
  const rawPoints = await res.json();
  // 转换为标准GeoJSON结构
  const geojsonData = {
    type: 'FeatureCollection',
    features: rawPoints.map(item => ({
      type: 'Feature',
      properties: item,
      geometry: {
        type: 'Point',
        // 注意Mapbox坐标顺序为[经度, 纬度]，顺序填反会导致点位不显示
        coordinates: [item.lng, item.lat]
      }
    }))
  };

  map.addLayer({
    id: 'restaurants',
    type: 'circle',
    source: {
      type: 'geojson',
      data: geojsonData
    },
    paint: {
      'circle-radius': 6,
      'circle-color': '#FF0000',
      'circle-opacity': 0.8
    }
  });
});

内容的提问来源于stack exchange，提问作者MeasMyself