作者Carlo在地理信息系统 (GIS) 和 Web 地图开发中经常会遇到需要在地图上展示复杂地理区域的需求。其中一个典型场景是一个大的行政区域如国家、省份内部包含一个或多个不属于该区域的“飞地”或者一个湖泊中的岛屿。从几何上看这表现为一个多边形外环内部包含一个或多个表示“孔洞”的内环这在 GeoJSON 规范中称为“Polygon with holes”或“岛洞多边形”。本文将详细介绍如何使用 Leaflet 这一轻量级开源地图库加载并渲染包含岛洞结构的 GeoJSON 数据。文章目录一、 业务背景与需求二、 实现步骤三、 关键代码解析四、 完整示例代码五、效果展示一、 业务背景与需求假设我们正在开发一个自然资源管理平台。其中一个功能是展示某个特定的保护区。该保护区整体轮廓是一个多边形但其内部包含一个已开发的矿场区域不属于保护区。为了在地图上清晰区分我们需要展示完整保护区范围用半透明的颜色填充。高亮内部排除区域矿场使内部区域显示为“空洞”即不填充颜色或透出下层地图。这就是“岛洞多边形”的典型应用。外部的环outer ring定义主体区域边界内部的环inner ring或 hole则定义了需要从主体中“扣除”的区域。二、 实现步骤准备 GeoJSON 数据确保你的 GeoJSON 数据中Polygon类型的coordinates是一个数组的数组。第一个元素是外环坐标必须闭合后续元素均为内环孔洞坐标。搭建 Leaflet 地图基础创建地图容器设置坐标系、中心点和缩放级别并添加一个底图如本例中的 SuperMap 瓦片服务。使用 L.geoJSON()加载数据将 GeoJSON 对象直接传入 L.geoJSON()方法。Leaflet 内部能够正确解析 coordinates中的内外环结构。自定义要素样式通过 style选项设置多边形的填充色、边框等视觉属性。对于岛洞关键是将 fillColor和 fillOpacity应用于外环所定义的整个区域内环部分则会自动不应用填充形成“洞”的效果。地图视图适配使用 fitBounds方法将地图视图自动调整到刚好能完整显示我们添加的 GeoJSON 要素的范围。三、 关键代码解析以下是实现此功能的核心代码段解析// 1. 定义包含岛洞的 GeoJSON 数据vargeojsonFeature{type:Feature,properties:{name:示例区域},geometry:{type:Polygon,// coordinates 是一个“数组的数组”coordinates:[[// 第一个数组外环坐标集合必须闭合首尾坐标相同[115.41816960619998,41.84674992869974],[128.7672646058,41.84674992869974],[129.2794342041,35.29832839970424],[115.15295579820001,36.71928297527309],[115.06455119555329,35.22683835730733],[115.41816960619998,41.84674992869974]// 闭合点],[// 第二个数组内环/洞的坐标集合必须闭合首尾坐标相同[124.62992920200001,39.123888167230966],[126.92844887080001,40.220105240016274],[128.2368369899,37.44420071695897],[126.12581634519998,36.70721435547332],[124.62992920200001,39.123888167230966]// 闭合点]// 可以继续添加更多内环数组以定义多个孔洞]}};解析coordinates数组的第一项定义了多边形的外部边界。从第二项开始每一项都定义了一个内部的“洞”。每个环的坐标列表都必须是闭合的即第一个坐标点和最后一个坐标点相同。// 2. 使用 L.geoJSON 加载并设置样式vargeojsonLayerL.geoJSON(geojsonFeature,{style:{fillColor:#ff0000,// 设置填充颜色为红色fillOpacity:0.4,// 设置填充不透明度为 40%color:white,// 设置边界线颜色为白色weight:2// 设置边界线粗细为 2}}).addTo(map);// 3. 将地图视图适配到 GeoJSON 图层的范围map.fitBounds(geojsonLayer.getBounds());解析L.geoJSON(): Leaflet 的核心方法用于创建 GeoJSON 数据图层。它能自动识别 Polygon类型及其 coordinates结构正确渲染出岛洞。style对象定义了图层的统一样式。fillColor和 fillOpacity会作用在整个多边形外环内内环外的区域。内环内部的区域不会被填充从而形成视觉上的空洞。map.fitBounds(): 根据 geojsonLayer.getBounds()计算出的地理边界自动调整地图的缩放级别和中心点使整个要素完美地显示在视图内。四、 完整示例代码!--*********************************************************************Copyright©2000-2025SuperMap Software Co.Ltd.All rights reserved.*********************************************************************--!DOCTYPEhtmlhtmlheadmeta charsetUTF-8title data-i18nresources.title_getFeatureByGeometry/titlestyle#toolbar{position:absolute;top:50px;right:10px;text-align:center;z-index:1000;border-radius:4px;}/style/headbody style margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;div idtoolbarclasspanel panel-primarydivclasspanel-headingh5classpanel-title text-centerdata-i18nresources.title_queryBySQL/h5/divdivclasspanel-body contentinput typebuttonclassbtn btn-defaultdata-i18n[value]resources.text_input_value_clearonclickclearFeatures()//div/divdiv idmapstylemargin:0 auto;width: 100%;height: 100%/divscript typetext/javascriptincludebootstrapsrc../js/include-web.js/scriptscript typetext/javascriptincludeleaflet-geomansrc../../dist/leaflet/include-leaflet.js/scriptscript typetext/javascriptvarhostwindow.isLocal?window.server:https://iserver.supermap.io;varmap,resultLayer,geo,baseUrlhost/iserver/services/map-world/rest/maps/World,urlhost/iserver/services/data-world/rest/data;mapL.map(map,{preferCanvas:true,crs:L.CRS.EPSG4326,center:{lon:0,lat:0},maxZoom:18,zoom:2});newL.supermap.TiledMapLayer(baseUrl).addTo(map);// 1. 定义 GeoJSON 数据vargeojsonFeature{type:Feature,properties:{name:示例区域},geometry:{type:Polygon,coordinates:[[// 外环坐标集合必须闭合首尾坐标相同[115.41816960619998,41.84674992869974],[128.7672646058,41.84674992869974],[129.2794342041,35.29832839970424],[115.15295579820001,36.71928297527309],[115.06455119555329,35.22683835730733]],[// 内环/洞的坐标集合必须闭合首尾坐标相同[124.62992920200001,39.123888167230966],[126.92844887080001,40.220105240016274],[128.2368369899,37.44420071695897],[126.12581634519998,36.70721435547332],[124.62992920200001,39.123888167230966]]]}};// 2. 使用 L.geoJSON 加载并设置样式vargeojsonLayerL.geoJSON(geojsonFeature,{style:{fillColor:#ff0000,fillOpacity:0.4,color:white,weight:2}}).addTo(map);map.fitBounds(geojsonLayer.getBounds());functionclearFeatures(){geojsonLayermap.removeLayer(geojsonLayer);}/script/body/html五、效果展示
SuperMap iClient for Leaflet 加载渲染 GeoJSON 岛洞数据实战指南
发布时间：2026/7/8 18:58:23
作者Carlo在地理信息系统 (GIS) 和 Web 地图开发中经常会遇到需要在地图上展示复杂地理区域的需求。其中一个典型场景是一个大的行政区域如国家、省份内部包含一个或多个不属于该区域的“飞地”或者一个湖泊中的岛屿。从几何上看这表现为一个多边形外环内部包含一个或多个表示“孔洞”的内环这在 GeoJSON 规范中称为“Polygon with holes”或“岛洞多边形”。本文将详细介绍如何使用 Leaflet 这一轻量级开源地图库加载并渲染包含岛洞结构的 GeoJSON 数据。文章目录一、 业务背景与需求二、 实现步骤三、 关键代码解析四、 完整示例代码五、效果展示一、 业务背景与需求假设我们正在开发一个自然资源管理平台。其中一个功能是展示某个特定的保护区。该保护区整体轮廓是一个多边形但其内部包含一个已开发的矿场区域不属于保护区。为了在地图上清晰区分我们需要展示完整保护区范围用半透明的颜色填充。高亮内部排除区域矿场使内部区域显示为“空洞”即不填充颜色或透出下层地图。这就是“岛洞多边形”的典型应用。外部的环outer ring定义主体区域边界内部的环inner ring或 hole则定义了需要从主体中“扣除”的区域。二、 实现步骤准备 GeoJSON 数据确保你的 GeoJSON 数据中Polygon类型的coordinates是一个数组的数组。第一个元素是外环坐标必须闭合后续元素均为内环孔洞坐标。搭建 Leaflet 地图基础创建地图容器设置坐标系、中心点和缩放级别并添加一个底图如本例中的 SuperMap 瓦片服务。使用 L.geoJSON()加载数据将 GeoJSON 对象直接传入 L.geoJSON()方法。Leaflet 内部能够正确解析 coordinates中的内外环结构。自定义要素样式通过 style选项设置多边形的填充色、边框等视觉属性。对于岛洞关键是将 fillColor和 fillOpacity应用于外环所定义的整个区域内环部分则会自动不应用填充形成“洞”的效果。地图视图适配使用 fitBounds方法将地图视图自动调整到刚好能完整显示我们添加的 GeoJSON 要素的范围。三、 关键代码解析以下是实现此功能的核心代码段解析// 1. 定义包含岛洞的 GeoJSON 数据vargeojsonFeature{type:Feature,properties:{name:示例区域},geometry:{type:Polygon,// coordinates 是一个“数组的数组”coordinates:[[// 第一个数组外环坐标集合必须闭合首尾坐标相同[115.41816960619998,41.84674992869974],[128.7672646058,41.84674992869974],[129.2794342041,35.29832839970424],[115.15295579820001,36.71928297527309],[115.06455119555329,35.22683835730733],[115.41816960619998,41.84674992869974]// 闭合点],[// 第二个数组内环/洞的坐标集合必须闭合首尾坐标相同[124.62992920200001,39.123888167230966],[126.92844887080001,40.220105240016274],[128.2368369899,37.44420071695897],[126.12581634519998,36.70721435547332],[124.62992920200001,39.123888167230966]// 闭合点]// 可以继续添加更多内环数组以定义多个孔洞]}};解析coordinates数组的第一项定义了多边形的外部边界。从第二项开始每一项都定义了一个内部的“洞”。每个环的坐标列表都必须是闭合的即第一个坐标点和最后一个坐标点相同。// 2. 使用 L.geoJSON 加载并设置样式vargeojsonLayerL.geoJSON(geojsonFeature,{style:{fillColor:#ff0000,// 设置填充颜色为红色fillOpacity:0.4,// 设置填充不透明度为 40%color:white,// 设置边界线颜色为白色weight:2// 设置边界线粗细为 2}}).addTo(map);// 3. 将地图视图适配到 GeoJSON 图层的范围map.fitBounds(geojsonLayer.getBounds());解析L.geoJSON(): Leaflet 的核心方法用于创建 GeoJSON 数据图层。它能自动识别 Polygon类型及其 coordinates结构正确渲染出岛洞。style对象定义了图层的统一样式。fillColor和 fillOpacity会作用在整个多边形外环内内环外的区域。内环内部的区域不会被填充从而形成视觉上的空洞。map.fitBounds(): 根据 geojsonLayer.getBounds()计算出的地理边界自动调整地图的缩放级别和中心点使整个要素完美地显示在视图内。四、 完整示例代码!--*********************************************************************Copyright©2000-2025SuperMap Software Co.Ltd.All rights reserved.*********************************************************************--!DOCTYPEhtmlhtmlheadmeta charsetUTF-8title data-i18nresources.title_getFeatureByGeometry/titlestyle#toolbar{position:absolute;top:50px;right:10px;text-align:center;z-index:1000;border-radius:4px;}/style/headbody style margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;div idtoolbarclasspanel panel-primarydivclasspanel-headingh5classpanel-title text-centerdata-i18nresources.title_queryBySQL/h5/divdivclasspanel-body contentinput typebuttonclassbtn btn-defaultdata-i18n[value]resources.text_input_value_clearonclickclearFeatures()//div/divdiv idmapstylemargin:0 auto;width: 100%;height: 100%/divscript typetext/javascriptincludebootstrapsrc../js/include-web.js/scriptscript typetext/javascriptincludeleaflet-geomansrc../../dist/leaflet/include-leaflet.js/scriptscript typetext/javascriptvarhostwindow.isLocal?window.server:https://iserver.supermap.io;varmap,resultLayer,geo,baseUrlhost/iserver/services/map-world/rest/maps/World,urlhost/iserver/services/data-world/rest/data;mapL.map(map,{preferCanvas:true,crs:L.CRS.EPSG4326,center:{lon:0,lat:0},maxZoom:18,zoom:2});newL.supermap.TiledMapLayer(baseUrl).addTo(map);// 1. 定义 GeoJSON 数据vargeojsonFeature{type:Feature,properties:{name:示例区域},geometry:{type:Polygon,coordinates:[[// 外环坐标集合必须闭合首尾坐标相同[115.41816960619998,41.84674992869974],[128.7672646058,41.84674992869974],[129.2794342041,35.29832839970424],[115.15295579820001,36.71928297527309],[115.06455119555329,35.22683835730733]],[// 内环/洞的坐标集合必须闭合首尾坐标相同[124.62992920200001,39.123888167230966],[126.92844887080001,40.220105240016274],[128.2368369899,37.44420071695897],[126.12581634519998,36.70721435547332],[124.62992920200001,39.123888167230966]]]}};// 2. 使用 L.geoJSON 加载并设置样式vargeojsonLayerL.geoJSON(geojsonFeature,{style:{fillColor:#ff0000,fillOpacity:0.4,color:white,weight:2}}).addTo(map);map.fitBounds(geojsonLayer.getBounds());functionclearFeatures(){geojsonLayermap.removeLayer(geojsonLayer);}/script/body/html五、效果展示
