turf.js实例 html

2025

3 min read 26-03-2025

This article provides practical examples of using Turf.js within an HTML environment to perform geographic spatial analysis. Turf.js is a powerful JavaScript library that allows you to perform various operations on GeoJSON data directly within your browser. We'll cover several common use cases, from simple calculations to more complex spatial analyses, all illustrated with working HTML examples. This will show you how to integrate Turf.js into your web projects to easily manipulate and analyze geographic data.

Setting up your HTML file

Before diving into specific examples, you'll need to include the Turf.js library in your HTML file. You can do this by linking to a CDN or by downloading the library and including it locally. Here's how to include it using a CDN:

<!DOCTYPE html>
<html>
<head>
<title>Turf.js Examples</title>
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@6/turf.min.js"></script> </head>
<body>
  <div id="map"></div> <script>
    //Your Turf.js code will go here
  </script>
</body>
</html>

Remember to replace "https://cdn.jsdelivr.net/npm/@turf/turf@6/turf.min.js" with the correct path if you're using a local copy. The <div id="map"></div> element will serve as a container for any map visualizations we create later.

Example 1: Calculating the distance between two points

This simple example demonstrates how to calculate the distance between two points using Turf.js's distance function.

// Define two points
const point1 = turf.point([-75.343, 39.984]);
const point2 = turf.point([-75.534, 39.123]);

// Calculate the distance in kilometers
const distance = turf.distance(point1, point2, {units: 'kilometers'});

// Display the result
console.log("Distance between points:", distance, "kilometers");

This code snippet defines two points using their longitude and latitude coordinates. The turf.distance function then calculates the distance between them in kilometers. The result is displayed in the browser's console.

Example 2: Finding the area of a polygon

Let's calculate the area of a polygon. This shows how Turf.js handles GeoJSON polygons.

// Define a polygon
const polygon = turf.polygon([[[ -75.343, 39.984 ], [ -75.534, 39.123 ], [ -75.123, 39.343 ], [ -75.343, 39.984 ]]]);

// Calculate the area in square kilometers
const area = turf.area(polygon);

//Display the result (remember to convert square meters to square kilometers)
console.log("Area of polygon:", area / 1000000, "square kilometers");

Here, we define a polygon using its coordinates. The turf.area function computes its area in square meters. The result is then converted to square kilometers and displayed in the console.

Example 3: Buffering a Point

Creating a buffer around a point is a common geospatial operation. This example uses the turf.buffer function.

// Define a point
const point = turf.point([-75.343, 39.984]);

// Create a buffer with a radius of 10 kilometers
const buffered = turf.buffer(point, 10, {units: 'kilometers'});

// You would typically display this using a mapping library like Leaflet or Mapbox GL JS.  For simplicity, we'll log the GeoJSON
console.log(JSON.stringify(buffered));

This code creates a 10km buffer around the specified point. The resulting GeoJSON polygon representing the buffer is then logged to the console. For visualization, you would integrate this with a mapping library.

Integrating with Mapping Libraries

To visualize your Turf.js results, you'll need a mapping library such as Leaflet or Mapbox GL JS. These libraries allow you to display GeoJSON data on an interactive map. This will provide a more user-friendly experience. Consult the documentation for these libraries for integration instructions.

Conclusion

These examples demonstrate the basic functionalities of Turf.js in an HTML context. There are many other features available within the Turf.js library, allowing you to perform more advanced geographic spatial analyses. Explore the official documentation for a complete list of functionalities and more detailed explanations. Remember that effective use often involves integrating Turf.js with a mapping library to visualize your results effectively. This combination provides a powerful toolset for geographic data manipulation and analysis directly in your web applications.