農地圖層即時改寫: 把農地的遮罩換成國土測繪雲 -> 疑似工廠的圖層

[Yukaii]

https://stackoverflow.com/questions/37447457/dynamically-reload-leaflet-tiles

L.TileLayer.CustomLayer = L.TileLayer.extend({
    getTileUrl: (coords) => {
        var test = some_function_deciding_test_based_on_tile(coords);
        return `http://example.com/tile_${coords.x}_${coords.y}.png?test=${test}`;
    }
});

vs openlayer https://github.com/Disfactory/frontend/blob/df24ba632041d9f39bb5360a62e88c953b7ebaa9/src/lib/map.ts#L391-L397

      tileLoadFunction: function (imageTile, src) {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        const image: HTMLImageElement = (imageTile as any).getImage()
        flipArgriculturalLand(src).then(newSrc => {
          image.src = newSrc
        })
      },

[Yukaii]

@DotSea 用這套 leaflet-tilefilter 似乎更簡單

baseLayer.setFilter(function () {
	new L.CanvasFilter(this, {
		channelFilter: function (imageData) {
			return new L.CanvasChannelFilters.Colorize(imageData, {
				values: [100, 100]
			}).render();
		}
	}).render();
});

[Yukaii]

diff --git a/src/lib/image.ts b/src/lib/image.ts
index 0ae73a3..8f48fbc 100644
--- a/src/lib/image.ts
+++ b/src/lib/image.ts
@@ -49,7 +49,8 @@ export const toGrayScale = createImageProcessor(data => {
 })
 
 const argriculturalLandColors = [
-  [255, 241, 0]
+  // [255, 241, 0],
+  [255, 0, 0]
 ]
 
 const isArrayEqual = (a: Array<any>, b: Array<any>) => !a.some((v, i) => b[i] !== v)
diff --git a/src/lib/map.ts b/src/lib/map.ts
index 2f41306..e6f367b 100644
--- a/src/lib/map.ts
+++ b/src/lib/map.ts
@@ -337,23 +337,24 @@ const getBaseLayer = (type: BASE_MAP, wmtsTileGrid: WMTSTileGrid) => {
           })
         case BASE_MAP.TAIWAN:
           return new WMTS({
-            matrixSet: 'EPSG:3857',
+            matrixSet: 'EPSG:4326',
             format: 'image/png',
-            url: 'https://wmts.nlsc.gov.tw/wmts',
-            layer: 'EMAP',
+            url: 'https://data.csrsr.ncu.edu.tw/SP/SP2017NC_3857/{TileMatrix}/{TileCol}/{TileRow}.png',
+            layer: 'SP',
             tileGrid: wmtsTileGrid,
             crossOrigin: 'Anonymous',
             style: 'default',
+            requestEncoding: 'REST',
             wrapX: true,
             attributions:
               '<a href="https://maps.nlsc.gov.tw/" target="_blank">國土測繪圖資服務雲</a>'
           })
         case BASE_MAP.SATELITE:
           return new WMTS({
-            matrixSet: 'EPSG:3857',
+            matrixSet: 'EPSG:4326',
             format: 'image/png',
-            url: 'https://wmts.nlsc.gov.tw/wmts/PHOTO_MIX/default/EPSG:3857/{TileMatrix}/{TileRow}/{TileCol}',
-            layer: 'EMAP',
+            url: 'https://data.csrsr.ncu.edu.tw/SP/SP2020NC_3857/{TileMatrix}/{TileCol}/{TileRow}.png',
+            layer: 'SP',
             tileGrid: wmtsTileGrid,
             requestEncoding: 'REST',
             crossOrigin: 'Anonymous',
@@ -382,9 +383,11 @@ const getBaseLayer = (type: BASE_MAP, wmtsTileGrid: WMTSTileGrid) => {
 const getLUIMapLayer = (wmtsTileGrid: WMTSTileGrid) => {
   return new TileLayer({
     source: new WMTS({
+      // matrixSet: 'EPSG:3857',
       matrixSet: 'EPSG:3857',
       format: 'image/png',
-      url: 'https://wmts.nlsc.gov.tw/wmts/nURBAN2/default/EPSG:3857/{TileMatrix}/{TileRow}/{TileCol}',
+      // url: 'https://wmts.nlsc.gov.tw/wmts/nURBAN2/default/EPSG:3857/{TileMatrix}/{TileRow}/{TileCol}',
+      url: 'https://map.coa.gov.tw/server/rest/services/FarmlandSurvey/L13_109/MapServer/tile/{TileMatrix}/{TileRow}/{TileCol}',
       layer: 'LUIMAP',
       requestEncoding: 'REST',
       tileGrid: wmtsTileGrid,

[Yukaii]

https://map.coa.gov.tw/server/rest/services/FarmlandSurvey/L13_109/MapServer/tile/{TileMatrix}/{TileRow}/{TileCol}

[Yukaii]

後來的解法：

extend Leaflet TileLayer 的 createTile，把 url 轉換

[wutingy]

因為加了圖層的關係，原本的 inner-bounding-box.svg 要改成沒有框框、只有準心的圖

[peii052]

可以用來做遮罩測試的題目 @dyfu95

編號 │經度 │緯度 │地號
1 │120.6448603 │23.99810304 │南投縣草屯鎮石川里新光段1556地號
2 │120.7812774 │24.45363464 │苗栗縣銅鑼鄉樟樹村雙峰山段49地號
3 │120.4788423 │24.05429213 │彰化縣鹿港鎮東崎里東昇段101地號
4 │120.4635 │24.04974618 │彰化縣福興鄉新生段2400地號
5 │120.6481218 │24.25721607 │臺中市神岡區光復段854地號

[peii052]

條件：
不用ab test
只測這五題

@dyfu95