如何用JavaScript从GeoJSON数组获取NIMI1与坐标并在Leaflet地图展示

Hey there! Let's break down how to pull the NIMI1 property and geometry coordinates from your GeoJSON feature, display that info on the page, and drop a marker on a Leaflet map. Here's everything you need:

First, Grab the Target Feature #

Assuming your full GeoJSON is stored in a variable like geoJsonData, we'll first target the first feature (index [0]):

// Your full GeoJSON data
const geoJsonData = {
  "features": [ { "type": "Feature", "properties": { "FID": 5001, "SOLMUTUNNU": "1548112", "LYHYTTUNNU": "H4684", "SOLMUTYYPP": "P", "X": 2564475, "Y": 6679388, "PROJ_X": 2564469, "PROJ_Y": 6679361, "NIMI1": "Niinilahti", "NAMN1": "Bastviken", "NIMI2": "Niinisaarentie", "NAMN2": "Bastövägen", "REI_VOIM": 1, "AIK_VOIM": 1, "VERKKO": 1 }, "geometry": { "type": "Point", "coordinates": [ 25.160047347437963, 60.2208899317569 ] } } ]
};

// Get the first feature from the features array
const targetFeature = geoJsonData.features[0];

1. Extract the Required Values #

Now pull out the NIMI1 property and coordinates. Important note: GeoJSON uses [longitude, latitude] order, but Leaflet expects [latitude, longitude]—so we'll flip the coordinates for the map:

// Extract the NIMI1 property
const locationName = targetFeature.properties.NIMI1;

// Get GeoJSON coordinates (lon, lat)
const geoJsonCoords = targetFeature.geometry.coordinates;
// Convert to Leaflet's (lat, lon) format
const mapCoords = [geoJsonCoords[1], geoJsonCoords[0]];

2. Display the Data on the Page #

We'll create a simple info box to show the extracted values. You can tweak the styling to match your page:

// Create a container for the info
const infoContainer = document.createElement('div');
infoContainer.style.padding = '1rem';
infoContainer.style.border = '1px solid #ddd';
infoContainer.style.marginBottom = '1rem';

// Populate the container with content
infoContainer.innerHTML = `
  <h3>Location Details</h3>
  <p><strong>Name:</strong> ${locationName}</p>
  <p><strong>GeoJSON Coordinates:</strong> ${geoJsonCoords.join(', ')}</p>
  <p><strong>Leaflet Map Coordinates:</strong> ${mapCoords.join(', ')}</p>
`;

// Add the container to the page body
document.body.appendChild(infoContainer);

3. Add a Marker to a Leaflet Map #

First, make sure you've included Leaflet's CSS and JS in your HTML (we'll use the CDN for simplicity):

<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<!-- Map container (adjust height/width as needed) -->
<div id="map" style="width: 100%; height: 400px;"></div>

Then initialize the map and add your marker:

// Initialize the map, centered on our extracted coordinates
const map = L.map('map').setView(mapCoords, 13); // 13 is the zoom level

// Add an OpenStreetMap base layer
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© OpenStreetMap contributors'
}).addTo(map);

// Add the marker to the map
const locationMarker = L.marker(mapCoords).addTo(map);

// Optional: Bind a popup to the marker (opens automatically here)
locationMarker.bindPopup(`<strong>${locationName}</strong>`).openPopup();

Quick Troubleshooting Tip #

If your marker is showing up in the wrong place, double-check the coordinate order—remember, GeoJSON is lon/lat, Leaflet is lat/lon. That's a super common gotcha!

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