LeaFlet学习之结合turf.js生成简单的等值线demo
生活随笔
收集整理的這篇文章主要介紹了
LeaFlet学习之结合turf.js生成简单的等值线demo
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
本文主要結合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的等值線效果。
轉載于:https://www.cnblogs.com/tuboshu/p/10752335.html
總結
以上是生活随笔為你收集整理的LeaFlet学习之结合turf.js生成简单的等值线demo的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 信用卡不能分期原因
- 下一篇： BZOJ 2118: 墨墨的等式（最短路