Learn More →
Learn More →
Learn More →
本篇使用JS語法
https://leafletjs.com/
leaflet官網
https://www.w3schools.com/tags/ref_canvas.asp
一些canvas的屬性
本來的leaflet有自己的方式建立colorbar, 但要做出來的colorbar要計算色階且文字跟色階個數不一樣,後來採用canvas來畫。歡迎大家再提供更好的方式!!!
首先使用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: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
});
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跟文字,嗚嗚
在上面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囉!
Find this document incomplete? Leave a comment!
leaflet
canvas
官網:https://tailwindcss.com/ https://tailwindcss.com/docs/container components:https://tailwindcomponents.com/ online:https://play.tailwindcss.com/ Built with Tailwind:https://builtwithtailwind.com/ 開端 今天要為各位介紹的是 Tailwind CSS 我已經看到他一陣子了,決定要來會會他了(握拳)
Mar 12, 2021SCSS Table of Contents [TOC] 什麼是SCSS? Sass是一個將指令碼解析成CSS的手稿語言,即SassScript。Sass包括兩套語法。最開始的語法叫做「縮排語法」,與Haml類似,使用縮排來區分程式碼塊,並且用換行將不同規則分隔開。而較新的語法叫做「SCSS」,使用和CSS一樣的塊語法,即使用大括號將不同的規則分開,使用分號將具體的樣式分開。通常情況下,這兩套語法通過.sass和.scss兩個副檔名區分開。 [name=維基百科]
Dec 17, 2020or
By clicking below, you agree to our terms of service.
New to HackMD? Sign up