如何在Plotly中通过Blazor JavaScript互操作渲染GeoJSON多边形

问题原因 #

你当前的写法存在两个核心错误，导致无法渲染多边形：

1. scattergeo 类型的trace本身不支持直接传入GeoJSON自动解析渲染多边形，该类型需要手动将所有坐标拆解到lon、lat字段，还要额外处理多边形闭合、多图形分隔的逻辑，配置门槛很高
2. 直接传入GeoJSON文件路径字符串不会被Plotly识别，你需要先将GeoJSON内容加载为JS对象后再传入配置

解决方案 #

Blazor JS互操作场景下推荐按以下步骤实现，你可以根据需求选两种渲染方案：

前置准备：Blazor侧传递GeoJSON到JS

首先把GeoJSON内容从Blazor侧传递到JS侧，避免跨域请求本地文件的问题：
Blazor组件代码示例：

@inject IJSRuntime JSRuntime
<div id="plotContainer" style="width:800px;height:600px"></div>
<button @onclick="RenderPlot">渲染多边形</button>

@code {
  private async Task RenderPlot()
  {
    // 可替换为从后端接口、本地文件读取的GeoJSON字符串
    string geoJsonContent = await File.ReadAllTextAsync("wwwroot/my_geojson.json");
    await JSRuntime.InvokeVoidAsync("renderGeoPolygon", geoJsonContent);
  }
}

方案1：用Layout图层渲染（最简单，适合仅展示多边形边界/填充的场景）

直接在Plotly的布局配置里添加GeoJSON图层，不需要配置trace，渲染逻辑简单：

window.renderGeoPolygon = function(geoJsonStr) {
  // 先把传入的字符串转为GeoJSON对象
  const myGeoJson = JSON.parse(geoJsonStr);
  
  const data = []; // 无其他图表元素可留空
  const layout = {
    geo: {
      // 自动缩放视角到GeoJSON的边界范围
      fitbounds: "geojson",
      visible: true
    },
    layers: [
      {
        sourcetype: "geojson",
        source: myGeoJson,
        // 配置多边形样式
        type: "fill",
        color: "rgba(30, 136, 229, 0.3)", // 填充色，可自定义
        line: {
          width: 2,
          color: "rgb(30, 136, 229)" // 边界颜色，可自定义
        }
      }
    ]
  };
  Plotly.newPlot('plotContainer', data, layout);
}

方案2：用choropleth trace渲染（适合需要按属性值对多边形填色的场景）

如果需要根据GeoJSON的属性字段给不同多边形匹配颜色，用这种方案：

window.renderGeoPolygon = function(geoJsonStr) {
  const myGeoJson = JSON.parse(geoJsonStr);
  
  const trace = {
    type: "choropleth",
    geojson: myGeoJson,
    // 匹配GeoJSON中features的唯一标识字段
    featureidkey: "properties.UNIQUE_ID",
    // 要渲染的feature的唯一标识，多个feature依次填入数组
    locations: ["20039100106"],
    // 对应每个location的数值，用来映射颜色
    z: [1],
    colorscale: "Blues",
    marker: {
      line: {
        width: 2,
        color: "black"
      }
    }
  };

  const data = [trace];
  const layout = {
    geo: {
      fitbounds: "geojson",
      visible: true
    }
  };
  Plotly.newPlot('plotContainer', data, layout);
}

额外说明 #

你提供的GeoJSON使用EPSG:4283坐标系，和Plotly默认使用的WGS84坐标系偏移极小，不需要额外做坐标转换即可直接渲染。

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