Absolutely! You don’t need to rely on Mapbox services to pull off 3D building extrusion like that jsfiddle example. Here’s a practical breakdown of how to do it with open tools and data:

1. Source Open Building Data #

Start with OpenStreetMap (OSM) building footprints—you can extract them using tools like osmium-tool or download pre-processed datasets from providers like Geofabrik. For fixed-height extrusion (like the jsfiddle example), you just need the polygon geometries. If you want variable heights later, make sure the data includes OSM’s height or building:height attributes.

2. Pick an Open 3D Mapping Library #

You have solid alternatives to Mapbox GL JS that support extrusion:

• OpenLayers: Has built-in vector layer extrusion support with minimal setup
• Leaflet: Use plugins like Leaflet.Extrude to add 3D rendering capabilities
• Three.js: For full custom 3D control (great if you want complete flexibility, though it has a steeper learning curve)

3. Example Implementation with OpenLayers #

Let’s replicate the fixed-height extrusion from the jsfiddle:

1. Load your OSM buildings as a local or self-hosted GeoJSON file
2. Define a style that sets a fixed extrusion height:

// Define building style with fixed extrusion
const buildingStyle = new ol.style.Style({
  fill: new ol.style.Fill({ color: '#aaaaaa' }),
  stroke: new ol.style.Stroke({ color: '#ffffff', width: 1 }),
  extrude: 10, // Fixed height in map units (adjust based on your coordinate system)
});

3. Set up the map with an OSM base layer and your extruded buildings:

const map = new ol.Map({
  target: 'map-container',
  view: new ol.View({
    center: [your-area-coordinates], // Replace with your location's Web Mercator coords
    zoom: 15,
    enableRotation: false,
    multiWorld: false, // Required for 3D extrusion
  }),
  layers: [
    // Use open OSM base map (no Mapbox dependency)
    new ol.layer.Tile({ source: new ol.source.OSM() }),
    // Add extruded buildings layer
    new ol.layer.Vector({
      source: new ol.source.Vector({
        url: 'your-local-buildings.geojson', // Path to your GeoJSON file
        format: new ol.format.GeoJSON(),
      }),
      style: buildingStyle,
      renderMode: 'vector',
    }),
  ],
});

4. Bonus: Variable Heights #

If you want to match the Mapbox tutorial’s variable height effect later, just replace the fixed extrude value with a function that reads the height attribute from your OSM data:

const variableHeightStyle = (feature) => {
  const height = feature.get('height') || 5; // Fallback to 5 if no height data
  return new ol.style.Style({
    fill: new ol.style.Fill({ color: '#aaaaaa' }),
    stroke: new ol.style.Stroke({ color: '#ffffff', width: 1 }),
    extrude: height,
  });
};

Key Tips #

• For self-hosted vector tiles (instead of GeoJSON), generate them from OSM data using tippecanoe—this lets you serve tiles from your own server.
• Ensure your map uses a coordinate system that supports 3D (Web Mercator, the standard for web maps, works perfectly).

内容的提问来源于stack exchange，提问作者Stranger in the Q