Norman's Words

Posts

Showing posts with the label Leaflet開源JavaScript地圖

IT筆記 :Leaflet開源JavaScript地圖學習篇(3)

- April 20, 2022

使用 L.polygon繪畫連接四間酒店的多邊形，四間酒店的名稱及坐標如下：香港尖沙咀凱悅酒店 : 22.297696623540645, 114.17403305500363 九龍香格里拉 : 22.297349192568806, 114.17705858671009 九龍酒店 : 22.29592967990824, 114.17179072831338 半島酒店 : 22.295344002650047, 114.17183364365674 例子如下: var polygon = L.polygon([[22.297696623540645, 114.17403305500363],[22.297349192568806, 114.17705858671009],[22.29592967990824, 114.17179072831338], [22.295344002650047, 114.17183364365674]], {color: 'red',weight:8,fillColor:'blue',fillOpacity:1}).addTo(map); Source code modified from Leaflet.Js Essentials by Paul Crickard III : <html> <head><title>Leaflet.js Essentials</title> <<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" /> </head> <body> <script src="https://unpkg.com/leaflet@1.7.1/dist/lea...

IT筆記 :Leaflet開源JavaScript地圖學習篇(2)

- April 15, 2022

使用L.circle繪畫圓形，半徑 = 500 m,例子如下: L.circle([22.450669219333417, 114.18014627779849], 500 ,{color: "red", weight: 8,fillColor:"blue"}).addTo(map); 同樣，我們可以用 L.rectangle 函數來繪製矩形，範例如下： var myRectangle = L.rectangle([[35.19738, -106.875],[35.10418, -106.62987]], {color: "red", weight: 8,fillColor:"blue"}).addTo(map); Source code modified from Leaflet.Js Essentials by Paul Crickard III : <html> <head><title>Leaflet.js Essentials</title> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" /> </head> <body> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin="">...