---
title: 'Leaflet 增加簡易圖形'
disqus: hackmd
---

Leaflet 增加簡易圖形
===

## Table of Contents

[TOC]

## 目的

利用leaflet,畫些簡易圖形

增加地圖
---
這樣子就可以增加地圖囉!
會用到L.map

# html
<div id="map_id"></div>

# css
#map_id { height: 200px; }

# js, 我是將點設置在臺灣
this.map = L.map("map_id").setView([23.473875, 120.982024], 8);

增加打點，Marker
---
使用到L.marker

 L.marker([lat, lng]).addTo(this.map)

增加圓形，circle
---
使用到L.circle

#新增circle
L.circle([lat, lng], {radius:200}).addTo(this.map);
 
 
# 設置style
L.circle([lat, lng], {
    color: "#000000",
    weight: 1.5,
    fillColor: "#ffffff",
    fillOpacity: 0.5,
    radius: 10000.0
}).addTo(this.map);

增加線段，path
---
使用到L.polyline

首先增加所有點>>pointList
再把它丟進去，就跟著點的位置連起來

let pointList = [
    [23.473875, 120.982024],
    [23.6, 120.7],
    [23.8, 120.5],
]; 

#線段繪製
L.polyline(pointList).addTo(this.map);

#設置style
L.polyline(pointList, {
    color: 'yellow',
    weight: 2,
    opacity: 0.5,
    smoothFactor: 1
}).addTo(this.map);

## Appendix and FAQ

:::info
**Find this document incomplete?** Leave a comment!
:::

###### tags: `leaflet`