​

 目录

前言

一、Turf.js缓冲区绘制

1、缓冲区分析介绍

2、缓冲区参数

3、Mask多边形空洞

4、Mask参数

二、领海基点、领海的WebGIS展示

1、领海基点的绘制

 2、领海面的绘制

三、毗邻区和专属经济区绘制

1、毗邻区的绘制

2、专属经济区的绘制

四、总结

前言

        在上一篇的博客中，我们对黄岩岛（民主礁）的领海基点空间可视化进行了详细介绍，“南海明珠”-黄岩岛(民主礁)领海基线WebGIS绘制实战。在海洋权益知识点中一个非常重要而又容易被忽视的地理概念——领海基线。在高考地理中，这个知识点不仅关乎我们对国家海洋权益的理解，更是我们认识国家海洋战略、维护海洋安全的重要一环。

        领海基线是沿海国划定其领海宽度的起算线，也是划分内水、领海、毗连区、专属经济区和大陆架等管辖海域的法律基础。它可以是沿海国的大潮高潮线，也可以是连接某些选定点的直线基线。在不同海域，基线的划定有着不同的意义和规定。领海基线对于国家来说，具有极其重要的意义。首先，它是国家主权和领土完整的象征。通过划定领海基线，国家能够明确其海洋领土的范围，进而维护其海洋权益。其次，领海基线是维护国家海洋安全的基石。在复杂的国际海洋环境中，一个清晰明确的领海基线能够帮助国家有效应对各种海洋争端和挑战。以下是黄岩岛的领海和毗邻区的相关区域划定示意图：

        如上面所述，当我们划定了领海基点以后，随之明确的距离基点12海里的领海，再往外延伸12海里是毗邻区，领海基点200海里（约370公里）。 在专属经济区内，我们可以进行相关的作业和采集活动。本文以黄岩岛为例，基于之前标注的领海基点，详细掌握如何基于Turf.js来进行多级缓冲区绘制，以绘制领海、毗邻区、专属经济区的面绘制方法，通过详细的方法绘制的介绍，让大家了解如何在前端使用Turf.js来进行缓冲区分析。如果您对这方面也有兴趣，不妨来这里看看。

一、Turf.js缓冲区绘制

         在介绍领海基点绘制之前，我们先来介绍一下Turf.js，它今天进行缓冲区分析的主角。在前端进行空间对象的缓冲计算，经常用得到。因此非常有必要在这里对它的缓冲区分析方法进行简单说明。

1、缓冲区分析介绍

        缓冲计算在现实生活中非常常见，比如需要计算城市主干道的居民区的缓冲距离，比如有效距离要大于15米。GIS缓冲区分析是一种强大的空间分析工具，广泛应用于多个领域。在城市规划中，可以通过为学校、医院等重要设施创建缓冲区来确定其服务范围，从而优化资源配置。在环境保护方面，缓冲区分析可用于确定河流、湖泊等水源的保护区域，以及禁止开采矿物资源的区域。在交通规划中，可以分析道路、铁路等交通设施的周边区域，以便进行交通规划和管理。此外，缓冲区分析也常用于消防安全，例如确定建筑物周边500米范围内的消防水管，以便在火灾发生时快速找到水源。在灾害管理中，缓冲区分析有助于确定地震、洪水等自然灾害的影响范围，以便进行应急救援和灾后重建。通过这些应用，GIS缓冲区分析为决策者提供了重要的空间信息，帮助他们更好地理解和管理地理空间数据。

        计算给定半径的输入要素的缓冲区。支持的单位包括英里miles、公里kilometers和度degrees。当使用负半径时，如果与半径大小相比，结果几何可能太小而无效。如果输入是一个FeatureCollection，则输出的FeatureCollection中将只返回有效的成员 - 也就是说，输出集合可能比输入集合少一些成员，甚至可能为空。缓冲的对象可以是点、线、面。都是可以的。

2、缓冲区参数

        介绍了缓冲区的基本概念和主要应用场景之后。接下来我们来介绍一下缓冲区方法的相关参数。掌握这些参数对于学会方法调用非常有用，希望大家可以先熟悉相关的参数。这些参数对于最终的效果生成有很大的影响，大家可以自己调试相关的参数，来查看实际的效果。

        根据缓冲对象的不同，返回的对象也有所不同，基本包含以下：FeatureCollection | Feature<Polygon | MultiPolygon> | undefined buffered features。

3、Mask多边形空洞

        有了缓冲区的计算之后，为了将领海、毗邻区、专属经济区的缓冲生成之后，在进行各个面的WebGIS可视化展示时可以独立展示自己的面，因此需要将其它的面进行镂空。比如在展示毗邻区的区域时，需要将毗邻区的缓冲区域中去掉领海的区域。在前端，我们可以使用Turf的Mask方法来生成多边形空洞。获取任何类型的多边形以及一个可选的掩码，并返回一个带有孔洞的多边形外部环。

4、Mask参数

        经过计算后将返回Feature<Polygon> Masked Polygon (exterior ring with holes)。这两个方法在后面的面缓冲生成中将重复使用，需要掌握具体使用方法，需要掌握。下面结合实际的例子来介绍相应的实例开发。

二、领海基点、领海的WebGIS展示

        在学习了Turf.js的相关知识后，我们来实现领海基点和领海的WebGIS空间可视化的具体展示。在前面的博客中，我们已经得到了计算过的领海基点信息，基于领海基点，我们来绘制领海的面信息。

1、领海基点的绘制

        从前面的博客中，可以知道黄岩岛的领海基点，这里直接将坐标贴出来分享给大家。关键代码如下：

// leaflet 的坐标是纬度、经度
var huangyandao = [
	[15.135,117.8483333],
	[15.1233333,117.8466667],
	[15.1166667,117.8433333],
	[15.11,117.8366667],
	[15.1016667,117.825],
	[15.105,117.7366667],
	[15.1216667,117.7183333],
	[15.2116667,117.71],
	[15.2183333,117.7133333],
	[15.2233333,117.7216667],
	[15.225,117.7316667],
	[15.225,117.74],
	[15.16,117.8283333],
	[15.15,117.84],
	[15.1416667,117.8466667]
];

        下面将这些基点练成一个面，并且将这些点在地图上进行标注。代码如下：

L.polygon([huangyandao],style).addTo(map).bindPopup("南海明珠黄岩岛.");
var turfHuangyandao = new Array();
for (let i = 0; i < huangyandao.length; i++) {
	//转换成turf需要的坐标格式
	turfHuangyandao.push([huangyandao[i][1],huangyandao[i][0]]);
	//构造Leaflet的位置
	let latlng = L.latLng(huangyandao[i][0], huangyandao[i][1]);
	var content = "黄岩岛"+i;
	var title = content;
	let c = L.circleMarker(latlng, {
			radius: 5,
			labelStyle: {
			text: title,
			rotation: 0,
			scale: 1,
			zIndex: 10,
			font: "14px Microsoft YaHei",
			fillStyle: "red",
			textBaseline: "top" ,
			minZoom: 9
	 }
	 }).addTo(map);
	 c.bindPopup(content);
}

        来看一下，经过webgis绘制过的效果如下：

 2、领海面的绘制

        对于领海宽度，不同国家规定不同，我国是从领海基线量起，向外最宽不超过12海里。12海里以内的领海、领空及底土等均为国家主权范围，外国船舶享有无害通过权。下面来看下如何生成12海里，生成思路是对领海基点连成的面进行缓冲，选择的缓冲单位是海里。基于Turf.js来进行缓冲计算。最后将领海基点连成的面进行mask计算，这样生成一个环形，即为领海面。相关代码如下：

turfHuangyandao.push(turfHuangyandao[0]);//首尾需要闭合
		
var mask = turf.polygon([turfHuangyandao]);
		
// 创建缓冲区、演示12海里，
const lhbuffered = turf.buffer(mask, 12, {units: 'nauticalmiles',steps: 10});
// 应用掩码（Mask）
const linghai = turf.mask(lhbuffered, mask);
// 将缓冲区结果转换为Leaflet的GeoJSON图层
L.geoJSON(linghai, {
	style: function(feature) {
		return {
			fillColor: "blue",
			fillOpacity: 0.3,
			stroke: true,
			color: "yellow",
			opacity: 1,
			weight: 2,
		};
	}
}).addTo(map);

        这里缓冲的时候，选择的单位nauticalmiles表示海里，12表示具体的缓冲距离。经过缓冲和mask计算后的领海面展示如下：

         请注意，以上还只是领海的范围，再往外延伸12海里是毗邻区。再往外还有专属经济区。下面我们来讲讲如何绘制毗邻区和专属经济区。

三、毗邻区和专属经济区绘制

        讲完了如何绘制领海基点和领海范围。接下来我们再讲两个非常重要的面，即毗邻区和专属经济区的绘制。以及讲讲海洋权益。

1、毗邻区的绘制

        毗连区是指毗连领海之外的一带海域，从领海基线量起，向海宽度不超过24海里，也就是从领海再向外拓宽12海里。沿海国在其毗连区内具有防止和惩治在其领土或领海内违反其海关、财政、移民或卫生等法律和规章事项的管制权，可见国家在毗连区内行使管制是为了维护本国主权和法律秩序，是为了对违法者进行追究和惩罚。从上可知，毗邻区是领海基线缓冲24海里。关键代码如下：

//毗连区，领海基线再往外12海里
var plqBuffered = turf.buffer(mask, 24, {units: 'nauticalmiles',steps: 10});
//毗连区
var pilianqu = turf.mask(plqBuffered, lhbuffered);
// 将缓冲区结果转换为Leaflet的GeoJSON图层
L.geoJSON(pilianqu, {
	style: function(feature) {
		return {
			fillColor: "#fff700",
			fillOpacity: 0.3,
			stroke: true,
			color: "#fff700",
			opacity: 1,
			weight: 2,
		};
	}
}).addTo(map);

        来看一下毗邻区的可视化效果，如下图所示：。

2、专属经济区的绘制

         专属经济区从领海基线起不超过200海里，是领海以外并邻接领海的一片海域。在专属经济区内，沿海国享有勘探、开发、养护、管理等权利和从事科学研究、海洋环境保护等管辖权。所有国家享有航行、飞越、铺设海底电缆和管道的自由，但不得从事危害沿海国主权和安全的活动。专属经济区的缓冲距离是200海里，缓冲及mask代码如下：

//专属经济区，领海基线再往外200海里
var zsjjqBuffered = turf.buffer(mask, 200, {units: 'nauticalmiles',steps: 10});
//专属经济区
var zsjjq = turf.mask(zsjjqBuffered, plqBuffered);
L.geoJSON(zsjjq, {
	style: function(feature) {
		return {
			fillColor: "#00ff66",
			fillOpacity: 0.3,
			stroke: true,
			color: "#00ff66",
			opacity: 1,
			weight: 2,
		};
	}
}).addTo(map);

        来看一下专属经济区的范围，如下图所示： 

        当然，这里的专属经济区很大，已经与一些国家的领海有重叠，一般这种在国际上的处理就是按照国界分开。国界内依然属于专属开发区，所属国家有很大的自主权。 最后为了方便让大家直观的看到三个区域的不同距离，我们选取几个重要的点位进行距离的展示，代码如下:

var targetCity = [
	{"lat":15.177187,"lon":118.050156,"name":"领海12海里","color":"blue"},
	{"lat":15.225889,"lon":118.251343,"name":"毗连区24海里","color":"#fff700"},
	{"lat":15.829251,"lon":121.217651,"name":"专属经济区200海里","color":"#00ff66"}
];
		
for(var i = 0;i< targetCity.length;i++){
	var polyline;
	if( i == 0 ){
		polyline = [[huangyandao[0],[targetCity[i].lat,targetCity[i].lon]]];
	}else{
	polyline = [[targetCity[i-1].lat,targetCity[i-1].lon],[targetCity[i].lat,targetCity[i].lon]];
	}
	//添加矢量数据
	var p = L.polyline(polyline, {
		labelStyle: {
			text: targetCity[i].name,
			zIndex: 0,
			collisionFlg: false,
			font: "15px sans-serif",
			textAlign:'end',
			fillStyle: targetCity[i].color
			},
		color: targetCity[i].color
	}).addTo(map);
}

        来看一下距离标记，如下图所示：

        通过上面的三个区域的展示，相信大家对海洋权益以及区域划分有了更加详细的认识。一个岛屿带来的经济区域范围和物质是无限的，这也是海洋大国要谋求的利益和追求。

四、总结

         以上就是本文的主要内容，本文以黄岩岛为例，基于之前标注的领海基点，详细掌握如何基于Turf.js来进行多级缓冲区绘制，以绘制领海、毗邻区、专属经济区的面绘制方法，通过详细的方法绘制的介绍，让大家了解如何在前端使用Turf.js来进行缓冲区分析。掌握空间制图，了解地理知识，维护海洋权益。让我们共同学习。行文仓促，难免有许多不足之处，欢迎给为专家博主不吝赐教，万分感谢。

​