2025Mapbox零基础入门教程（11）geojson绘制面

L7网站上绘制一个多边形：


将代码复制到下面：

const polygonData = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      properties: {},
      geometry: {
        type: "Polygon",
        coordinates: [
          [
            [114.406325, 30.465113],
            [114.407769, 30.465113],
            [114.407773, 30.464781],
            [114.407741, 30.464636],
            [114.40796, 30.464241],
            [114.407977, 30.464111],
            [114.407692, 30.463704],
            [114.407611, 30.463669],
            [114.407106, 30.463609],
            [114.406968, 30.463704],
            [114.40639, 30.463792],
            [114.406329, 30.46389],
            [114.406325, 30.465113],
          ],
        ],
      },
    },
  ],
};

设置图层属性：

+ 图层的类型是 ` "fill"` ，表示这个图层用于填充多边形区域。 + ` source` 属性设置为 ` "polygon-source"` ，即之前添加的数据源。 + ` paint` 属性定义了图层的样式： - ` "fill-color": "pink"` 设置多边形的填充颜色为粉红色。 - ` "fill-opacity": 0.5` 设置多边形的填充透明度为 0.5（半透明）。

map.addSource("polygon-source", {
  type: "geojson",
  data: polygonData,
});

map.addLayer({
  id: "polygon-layer",
  type: "fill",
  source: "polygon-source",
  paint: {
    "fill-color": "pink",
    "fill-opacity": 0.5,
  },
});

最后出来的效果：

地图点击事件：

我们在这里添加一个 点击事件监听器，通过点击地图，实现将前面绘制的半透明多边形变为不透明。

map.on("click", function (e) {
  map.setPaintProperty("polygon-layer", "fill-opacity", 1);
});