🌹 喇賽的人 Blog 🌹

🌹 喇低喇賽 🌹

0%

篩選漁業署半徑0.5海浬的人工魚礁

亂寫於 更新於 Disqus：
廢話字數： 4.1k 所需傷眼時間 ≈ 4 分鐘

 

颱風天來襲，幫喇賽的捕魚朋友製作人工魚礁 geojson 防止他撞船，基本上也可以算半個爬蟲
首先到漁業署網站
可以看到資料是度分秒格式，所以需要轉換為度度 dms to dd 參考計算公式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
//度分秒轉換度度
function DMSToDD(d , min , sec){
	d = parseInt(d);
	min = parseInt(min);
	sec = parseInt(sec);
	var DD = d + (min/60) + (sec/3600);
	return DD;
} 

//字串處理轉換
function DMSFilter(str){
	//防止出現多次quote所以replace多次quote
	var strLonLat = str
	.replace('N','')
	.replace('°',' ')
	.replace('\'',' ')
	.replace('"',' ')
	.replace('E',' ')
	.replace('°',' ')
	.replace('\'',' ')
	.replace('\'',' ')
	.replace('\'',' ')
	.replace('\'',' ')
	.replace('\'',' ')
	.replace('"',' ');
	
	var latDMS = strLonLat.split(',')[0].trim().split(' ');
	var lonDMS = strLonLat.split(',')[1].trim().split(' ');

	var lat = DMSToDD(latDMS[0],latDMS[1],latDMS[2]);
	var lon = DMSToDD(lonDMS[0],lonDMS[1],lonDMS[2]);
	
	return [lon , lat];
}

這裡利用 css 的 selector 找出半徑 0.5 海浬的魚礁，並加上 class

1
2
3
4
5
6
7
$('tr > td:nth-child(6)').map(function(){
	var str = $(this).text();
	if(str.includes('半徑0.5浬') === true){
		$(this).parent().addClass('red');
	}
	return str;
});

載入 turf.js 讓他產生 geojson，需要注意的是要使用 google analytics 寫法的 pattern 否則會炸掉

1
2
3
4
5
6
7
8
(function(d, script) {
    script = d.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.onload = saveBufferedGeoJson;
    script.src = 'https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js';
    d.getElementsByTagName('head')[0].appendChild(script);
}(document));

參考wiki1海浬為1.852公里
需要注意turf輸出buffer只會是feature不會是features需要手動建立
最後保存人工魚礁會使用到copy命令，但是該命令為chrome cli無法整合到流程內，只能用手動複製，可以將結果貼到https://geojson.net/或使用qgis開啟

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//保存geojson
function saveBufferedGeoJson(){
	//存放人工魚礁
	var buffereds = [];

	//半徑0.5浬範圍內
	var bufferSize = 1.852 / 2;

	//將表格內0.5海浬轉換為
	var result = $('.red > td:nth-child(3)').map(function(){
		var str = $(this).text();
		var DD = DMSFilter(str);
		
		//塞入最終結果
		var point = turf.point(DD);
		var buffered = turf.buffer(point, bufferSize, {units: 'kilometers'});
		buffereds.push(buffered);
		
		//console.log(buffered);
		
		return DD;
		//return DMS + ' ' + str.trim();
	});

	//從瀏覽器保存geojson
	var geojson = {"type": "FeatureCollection", "features": buffereds}
	console.log(geojson);
	
	//注意這是cli命令需要手動呼叫
	//copy(geojson);
}

full example code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
//漁業署人工魚礁
//https://www.fa.gov.tw/cht/ResourceOtherZones/content.aspx?id=7&chk=67f6e751-66f9-4233-bf2a-91e3b7e158a1&param=pn=1

//參考公式
//https://www.latlong.net/degrees-minutes-seconds-to-decimal-degrees

//轉換
function DMSToDD(d , min , sec){
	d = parseInt(d);
	min = parseInt(min);
	sec = parseInt(sec);
	var DD = d + (min/60) + (sec/3600);
	return DD;
}

//找出半徑0.5海浬的魚礁
$('tr > td:nth-child(6)').map(function(){
	var str = $(this).text();
	if(str.includes('半徑0.5浬') === true){
		$(this).parent().addClass('red');
	}
	return str;
});

//轉換度分秒為度度
function DMSFilter(str){
	//防止出現多次quote所以replace多次quote
	var strLonLat = str
	.replace('N','')
	.replace('°',' ')
	.replace('\'',' ')
	.replace('"',' ')
	.replace('E',' ')
	.replace('°',' ')
	.replace('\'',' ')
	.replace('\'',' ')
	.replace('\'',' ')
	.replace('\'',' ')
	.replace('\'',' ')
	.replace('"',' ');
	
	var latDMS = strLonLat.split(',')[0].trim().split(' ');
	var lonDMS = strLonLat.split(',')[1].trim().split(' ');

	var lat = DMSToDD(latDMS[0],latDMS[1],latDMS[2]);
	var lon = DMSToDD(lonDMS[0],lonDMS[1],lonDMS[2]);
	
	return [lon , lat];
}

(function(d, script) {
    script = d.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.onload = saveBufferedGeoJson;
    script.src = 'https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js';
    d.getElementsByTagName('head')[0].appendChild(script);
}(document));

//保存geojson
function saveBufferedGeoJson(){
	//存放人工魚礁
	var buffereds = [];

	//半徑0.5浬範圍內
	var bufferSize = 1.852 / 2;

	//將表格內0.5海浬轉換為
	var result = $('.red > td:nth-child(3)').map(function(){
		var str = $(this).text();
		var DD = DMSFilter(str);
		
		//塞入最終結果
		var point = turf.point(DD);
		var buffered = turf.buffer(point, bufferSize, {units: 'kilometers'});
		buffereds.push(buffered);
		
		//console.log(buffered);
		
		return DD;
		//return DMS + ' ' + str.trim();
	});

	//從瀏覽器保存geojson
	var geojson = {"type": "FeatureCollection", "features": buffereds}
	console.log(geojson);
	
	//注意這是cli命令需要手動呼叫
	//copy(geojson);
}
關閉