LeaFlet學習之結合turf.js生成簡單的等值線demo

知識 07-25

本文主要結合turf.js生成等值線俺，進行展示效

一、放張圖：

二、全部源碼

<!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>

三、總結

這裡是等值線，可不是等高線，等高線不會相交，等值線可能相交，數據平滑參考牛老師ol4的等值線效果。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！

本站內容充實豐富，博大精深，小編精選每日熱門資訊，隨時更新，點擊「搶先收到最新資訊」瀏覽吧！

請您繼續閱讀更多來自 程序員小新人學習 的精彩文章:

※基於SSH的航空公司票務機票預訂管理系統（前台以及後台）
※C 標準性能測試

TAG:程序員小新人學習 |