leaflet讀取tif像素值的兩種實現方式(附源碼下載)

前言

leaflet 入門開發系列環境知識點了解：

• leaflet api文檔介紹，詳細介紹 leaflet 每個類的函數以及屬性等等
• leaflet 在線例子
• leaflet 插件，leaflet 的插件庫，非常有用

內容概覽

leaflet讀取tif像素值的兩種實現方式
源代碼demo下載

實現方式1：leaflet前端直接讀取tif文件

參照github源碼：leaflet讀取tif插件，在github源碼基礎上稍作一點修改實現的，具體的參數以及源碼看github說明即可。

效果圖如下：

• 部分核心代碼，完整的見源碼demo下載

var mymap = L.map('mapid').setView([-33, 147], 6);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
 
var renderer = L.LeafletGeotiff.plotty({displayMin:0,displayMax:30,clampLow:false,clampHigh:true,colorScale:'rainbow',arrowSize: 20});
var windSpeed = L.leafletGeotiff('./wind_speed.tif', {band: 0,renderer:renderer}).addTo(mymap);
 
/*var windDirection = L.leafletGeotiff(
url='./wind_direction.tif',
options={band: 0,
displayMin: 0,
displayMax: 360,
name: 'Wind direction',
//colorScale: 'rainbow',
//clampLow: false,
//clampHigh: true,
vector:true,
arrowSize: 20,
}
).addTo(mymap);*/
 
document.getElementById('colorScaleImage').setAttribute('src',windSpeed.colorScaleData);
 
mymap.on('click', function(e) {
if (!marker) {
marker = L.marker([e.latlng.lat,e.latlng.lng]).addTo(mymap);
} else {
marker.setLatLng([e.latlng.lat,e.latlng.lng]);
}
document.getElementById("windSpeedValue").innerHTML = windSpeed.getValueAtLatLng(e.latlng.lat,e.latlng.lng)? windSpeed.getValueAtLatLng(e.latlng.lat,e.latlng.lng).toFixed(1):'';
//document.getElementById("windDirectionValue").innerHTML = windDirection.getValueAtLatLng(e.latlng.lat,e.latlng.lng).toFixed(0);
});

實現方式2：geoserver發布tif地圖服務，leaflet讀取tif地圖服務形式實現

前端leaflet直接讀取tif的話，假如tif文件太大的話，前端讀取比較慢，這種方式效率不太好；所以嘗試通過geoserver發布tif地圖服務，前端leaflet讀取tif地圖服務，以wms圖層來疊加，監聽點擊事件形式來獲取對應的點像素值。參考github的leaflet.wms插件leaflet.wms，leaflet.wms插件的詳細信息見鏈接。

效果圖如下：

• geoserver發布tif地圖服務以及選擇tif渲染顏色設置style模板的步驟見下圖：
  
  
  
  關鍵是發布tif地圖服務的style樣式這里，選擇自己配置的dem模板，根據像素值設置不同區別顏色帶
  
  自己根據tif像素值設置的dem的style模板
  
• 部分核心代碼，完整的見源碼demo下載

var tiledMap = createMap('tiled-map', true);
 
function createMap(div, tiled) {
// Map configuration
var map = L.map(div);
map.setView([-32.46461, 151.50146], 6);
 
var basemaps = {
'Basemap': basemap().addTo(map)
};
 
// Add WMS source/layers
var source = wms.source(
"http://localhost:8080/geoserver/GIS/wms",
{
"format": "image/png",
"transparent": "true",
//"attribution": "<a href='http://ows.terrestris.de/'>terrestris</a>",
"info_format": "text/html",
"tiled": tiled
}
);
 
var layers = {
//'Topographic': source.getLayer("sfdem").addTo(map),
'dem': source.getLayer("wind_speed").addTo(map)
};
 
// Create layer control
L.control.layers(basemaps, layers).addTo(map);
 
return map;
}
 
function basemap() {
// maps.stamen.com
//var attr = 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.';
return L.tileLayer("http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}", {
//opacity: 0.1,
//attribution: attr
});
}

完整demo源碼見小專欄文章尾部：小專欄

文章尾部提供源代碼下載，對本專欄感興趣的話，可以關注一波