樣例以下：css
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>等值線的生成</title>
<link href="Script/leaflet/leaflet.css" rel="stylesheet" />
<style> #map { height: 2000px; width: 1500px; } </style>
<script src="Script/leaflet/leaflet.js"></script>
<script src="Script/leaflet/leaflet.ChineseTmsProviders.js"></script>
<script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
</head>
<body>
<div id="map"></div>
</body>
<script>
var normalm = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', { maxZoom: 18, minZoom: 1 }), normala = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', { maxZoom: 18, minZoom: 1 }), imgm = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', { maxZoom: 18, minZoom: 1 }), imga = L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion', { maxZoom: 18, minZoom: 1 }); var normal = L.layerGroup([normalm, normala]); image = L.layerGroup([imgm, imga]); var baseLayers = { "地圖": normal, "影像": image, } var overlayLayers = { "圖": normal, "像": image, } var map = L.map("map", { center: [31.59, 120.29], zoom: 12, layers: [normal], zoomControl: false }); // 建立等值線區域
var extent = [0, 30, 20, 50]; var cellWidth = 100; var pointGrid = turf.pointGrid(extent, cellWidth, { units: 'miles' }); for (var i = 0; i < pointGrid.features.length; i++) { pointGrid.features[i].properties.temperature = Math.random() * 10; } console.log(pointGrid.features.length); //等值線的級數
var breaks = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; var lines = turf.isolines(pointGrid, breaks, { zProperty: 'temperature' }); //設置顏色
var myStyle = { "color": "#ff7800", "weight": 5, "opacity": 0.65 }; //進行平滑處理
var _lFeatures = lines.features; for(var i=0;i<_lFeatures.length;i++){ var _coords = _lFeatures[i].geometry.coordinates; var _lCoords = []; for(var j=0;j<_coords.length;j++){ var _coord = _coords[j]; var line = turf.lineString(_coord); var curved = turf.bezierSpline(line); _lCoords.push(curved.geometry.coordinates); } _lFeatures[i].geometry.coordinates = _lCoords; } //geojson數據讀取
L.geoJSON(lines, { style: myStyle }).addTo(map); </script>
</html>
原文地址：https://blog.csdn.net/weixin_40184249/article/details/81198282html
另一個文章地址：http://www.cnblogs.com/naaoveGIS/p/6142226.htmlnpm