---
# System prepended metadata

title: 技術交流
tags: [Solvento]

---

---
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: '&copy; <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
    -  
全域管理資料的方式，主要是存放狀態或是業務邏輯相關的內容。
不論在各頁面皆可取用到相同的資料

![image](https://hackmd.io/_uploads/SyFWz_nQ0.png)

:::info
建議使用Vue3內建的watch功能來監聽==對象==的變化
    pinia內建的$subscribe是監聽==整個store==，可能會觸發非預期行為
:::


- Provide/Inject
    - 
![image](https://hackmd.io/_uploads/S1JNWd3QA.png)


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/)

