---
title: 好書分享&技術交流
tags: Solvento
description: Javascript
---
技術交流
===
2024-09-20
---
### WebGIS
GIS是地理資訊系統(Geographical Information System)的英文縮寫，GIS在學術及產業應用上發展已經蓬勃發展數十年，而webGIS簡單來說就是把GIS應用在網頁相關平台上。
#### 收費型
需要註冊帳戶並且申請專屬的API Key才可以使用
| 服務來源 | 說明 |
| -------- | -------- |
| [Google Map](https://mapsplatform.google.com/) |方便易用，費用較高|
| [Here Maps](https://developer.here.com/)|費用較便宜，支援多平台 |
| [ArcGIS](https://www.arcgis.com/index.html)|老牌的GIS開發公司，功能完善|
| [Mapbox](https://www.mapbox.com/maps)| 3D地圖預覽效果很酷 |
#### 免費開源型
| 服務來源 | 說明 |
| -------- | -------- |
| [TGOS](https://api.tgos.tw/TGOS_MAP_API) |政府提供的全國空間資料，為台灣本土專用的地圖平台(需申請帳號金鑰)|
| [Leaflet](https://leafletjs.com/)|免費的開源函式庫 |
#### 簡易Demo(Leaflet)
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leaflet API</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
const map = L.map('map', { center: [23.5, 121], zoom: 7, crs: L.CRS.EPSG3857});
const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
//#region 點
L.marker([23.5, 121]).addTo(map)
.bindPopup('台灣座標點!')
.openPopup();
//#endregion
//#region 線
const line_pointList = [
{ x: 121.9, y: 24 },
{ x: 121.7, y: 23.8 },
{ x: 121.5, y: 23.5 },
];
const line_leafletPointList = line_pointList.map((item) => [item.y, item.x]);
const polyline = L.polyline(line_leafletPointList, { color: "blue" });
// Method 1 加入圖層
// polyline.addTo(lMap);
// Method 2
const line_layers = L.layerGroup().addLayer(polyline).addTo(map);
map.fitBounds(polyline.getBounds());
//#endregion
//#region 面
const pointList = [
{ x: 121.5, y: 24 },
{ x: 121.2, y: 23.8 },
{ x: 121, y: 23.5 },
];
const leafletPointList = pointList.map((item) => [item.y, item.x]);
const polygon = L.polygon(leafletPointList, { color: "red" });
// Method 1 加入圖層
//polygon.addTo(map);
// Method 2
const layers = L.layerGroup().addLayer(polygon).addTo(map);
map.fitBounds(polygon.getBounds());
//#endregion
</script>
</body>
</html>
```
2024-08-23
---
### AI繪圖
近期知名的AI工具，可以文生圖、載入Lora、圖生圖、局部重繪、放大圖片、訓練模型，以及安裝ControlNet擴充功能，生圖模型可以通用。建議電腦設備有中階等級以上的Nvdia顯示卡，若用CPU運算會耗費好幾倍的時間。
[ComfyUI](https://github.com/comfyanonymous/ComfyUI/releases)
[Stable-Diffusion-WebUI](https://github.com/AUTOMATIC1111/stable-diffusion-webui)
### AI模型
| 項目 | 說明 |
| -------- | -------- |
| [Stable-Diffusion](https://huggingface.co/ckpt/stable-diffusion-3-medium/tree/main) | 最廣為人知的AI繪圖模型 |
|[Civitai](https://civitai.com/)|AI模型的訓練網站，集合眾多人自由分享模型|
### 基礎流程
1. 選擇要使用的模型
2. 輸入 正向提示詞 & 負向提示詞
3. 設定最終成品圖的長寬高 和 節點
4. 執行並等待AI將圖片輸出
2024-07-05
---
### 免費素材
[Free Template](https://htmlrev.com/)
[Bootstrap + Tailwind](https://graygrids.com/)
[Free Textures](https://resourceboy.com/)
[3D CSS Book](https://scastiel.dev/3dbook)
### 系統設計原則
[System Design Concepts](https://github.com/ByteByteGoHq/system-design-101)
### SQL
[語法練習](https://sqlbolt.com/)
### 書籍分享
[Pro ASP.NET 7](https://drive.google.com/file/d/1WSIBl0zUooyajgqc-UtK4DjDg4GBQNop/view?usp=sharing)
2024-06-07
---
### Vue3常用的資料管理
- Store
-
全域管理資料的方式，主要是存放狀態或是業務邏輯相關的內容。
不論在各頁面皆可取用到相同的資料
:::info
建議使用Vue3內建的watch功能來監聽==對象==的變化
pinia內建的$subscribe是監聽==整個store==，可能會觸發非預期行為
:::
- Provide/Inject
-
Parent層使用Provide()提供數據出去
```typescript
import { provide } from 'vue';
provide('dataFromParent': { certNo: 'A123456789'});
```
child層則使用Inject()來取得資料;
```typescript
import { inject, ref } from 'vue';
const dataFromParent = inject('dataFromParent');
```
:::info
當元件具有上下關係，可使用Provide的方式將資料做分享
:::
- Prop/emit
-
雖然 props 只能傳一層，但是對於部分元件單純使用的情況，props 的用法就可以讓程式碼變得很簡潔，方便後續維護的人容易追蹤到資料來源。
:::info
通常用於共用元件，Input & output皆為固定可預期的值
:::
### Function Programming
[認識函式語言程式設計](https://ithelp.ithome.com.tw/articles/10243188)
#### FP 7 個原則
- 1 Task // function只做一件事
- return Statement // 會回傳結果狀態
- Pure //純函式
- No shared state //兩個函式不共用同個狀態
- Immutable State //不可變的
- Composable //可被組合
- Predictable // 可預期的
### 書籍分享
[乾淨的程式碼](https://drive.google.com/file/d/1ZB1uELwQIqfMwvKv-xn2l7WIYFazrLMm/view?usp=drive_link)
### 參考網站
[Creative-Tim](https://www.creative-tim.com/)
Sign in with Wallet
Connect another wallet