Try   HackMD

leaflet裡建立canvas

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

本篇使用JS語法

https://leafletjs.com/
leaflet官網

https://www.w3schools.com/tags/ref_canvas.asp
一些canvas的屬性

Table of Contents

目的

本來的leaflet有自己的方式建立colorbar, 但要做出來的colorbar要計算色階且文字跟色階個數不一樣,後來採用canvas來畫。歡迎大家再提供更好的方式!!!

First - 產地圖

首先使用leaflet.js產生地圖,並定位於臺灣

leaflet

this.map = L.map('map').setView([23.473875, 120.982024], 8); this.tileLayer = L.tileLayer("", //'http://{s}.tile.osm.org/{z}/{x}/{y}.png',//中文地圖 { maxZoom: 8, minZoom: 0, bounds:[ [19.715015145512087, 117.49902343749999], [26.892679095908164, 123.969482421875] ], attribution: '' // attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' });

Second - 建立canvas並弄上leaflet

let legend = L.control({position: 'bottomleft'}); legend.onAdd = function (map) { let canvas = L.DomUtil.create('canvas', 'custom_class'); var ctx = canvas.getContext('2d'); // to do... // 下面二行只是先簡單弄個文字 ctx.font = "12px Arial"; ctx.fillText("Hello World", 10, 50); return canvas; }.bind(this); legend.addTo(this.map);

在上面程式有設定一個class(custom_class), style裡面可以自訂

其實這樣就可以簡單的建立canvas囉!!!收工。但事情不是這麼簡單的,我還要畫個colorbar跟文字,嗚嗚

Third - canvas畫出colorbar

在上面to do的地方下面,我要建立colorbar喔

for(var i = 0; i <= 255; i++) { ctx.beginPath(); var color = 'rgb(100, ' + i + ', ' + i + ')'; ctx.fillStyle = color; ctx.fillRect(0, i * 2, 10, 2); }

這兒就可以建立簡易的colorbar囉!

Appendix and FAQ

Find this document incomplete? Leave a comment!

tags: leaflet canvas