HarmonyOS ArkWeb组件：混合开发性能优化实践
2026/8/7 12:42:32
ArcGIS JS 基础教程（25）：GeoJSONLayer 与 KML 图层
- 零、写在前面
- 一、功能介绍
- 二、功能实现
- 2.1 GeoJSONLayer 在 3D 中加载（推荐做法）
- 2.2 KMLLayer 的现状（仅 2D）
- 三、功能应用
- 四、核心代码
- 五、在线示例
- 六、关键 API 说明
- 七、系列导航
零、写在前面
📌本系列教程完整目录：ArcGIS JS 系列基础教程（100个项目常用热门功能）
💡在线示例：完整可运行的 HTML 示例，无需任何环境配置，可直接在浏览器中打开体验
🗂️专栏导航：收藏 + 关注，专栏文章第一时间送达
❤️一键三连：点赞 + 评论 + 收藏
一、功能介绍
GeoJSONLayer与KMLLayer都属于无需发布 ArcGIS 服务即可直接加载的外部矢量数据图层，非常适合快速集成第三方开源数据。
- GeoJSONLayer：解析符合 RFC 7946 规范的 GeoJSON 文件（点/线/面），支持远程 URL 或内存 Blob。在 3D 中通过
elevationInfo控制要素高程，完全支持 SceneView。 - KMLLayer：解析 KML/KMZ 文件（Google Earth 格式）。
⚠️关键限制（务必注意）：根据官方文档，
KMLLayer当前不支持在SceneView（三维）中使用，仅能在 2DMapView中加载。因此在「三维专项」教程中，本课以GeoJSONLayer 的三维用法为重点，并说明 KML 在三维场景中的现状与替代方案（将 KML 转换为 GeoJSON 后再加载）。
参考：GeoJSONLayer API | KMLLayer API
二、功能实现
2.1 GeoJSONLayer 在 3D 中加载（推荐做法）
constGeoJSONLayer=await$arcgis.import("@arcgis/core/layers/GeoJSONLayer.js");constgeojsonLayer=newGeoJSONLayer({url:"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson",copyright:"USGS Earthquakes",elevationInfo:{mode:"on-the-ground"},// 三维必备：要素贴地renderer:{type:"simple",symbol:{type:"point-3d",symbolLayers:[{type:"object",resource:{primitive:"sphere"},anchor:"bottom",material:{color:[255,80,0,0.85]}}]},visualVariables:[{type:"size",field:"mag",axis:"all",stops:[{value:1,size:6000},{value:3,size:20000},{value:6,size:45000}]}]},popupTemplate:{title:"地震 M{mag}",content:"深度：{depth} km<br>地点：{place}"}});map.add(geojsonLayer);💡 在 3D 中务必设置
elevationInfo，否则要素放置位置不确定；effect/featureEffect在 3D 中不支持。
2.2 KMLLayer 的现状（仅 2D）
// ⚠️ 以下代码只能在 2D MapView 中运行，SceneView 会报错/不显示constKMLLayer=await$arcgis.import("@arcgis/core/layers/KMLLayer.js");constkmlLayer=newKMLLayer({url:"http://quickmap.dot.ca.gov/data/lcs.kml"// 必须公网可访问});map.add(kmlLayer);三维替代方案：将 KML/KMZ 转换为 GeoJSON（如使用tokml/ogr2ogr/ 在线转换工具），再用上面的GeoJSONLayer在 SceneView 中加载，即可获得完整的三维能力。
三、功能应用
| 应用场景 | 图层 | 说明 |
|---|---|---|
| 政府开放数据快速上图 | GeoJSON | 行政区边界/业务面状数据直接叠加到 3D 场景 |
| 地震/气象实时点位 | GeoJSON | 远程 feed + 3D 符号 + 按量级拉伸大小 |
| 跨平台数据交换 | GeoJSON | 与开源生态无缝对接 |
| Google Earth 成果迁移 | KML→GeoJSON | 先转 GeoJSON 再进 3D 场景 |
四、核心代码
📦完整代码已保存至
sample/lesson25_geojson_kml.html，可直接在浏览器打开（GeoJSON 三维示例）。
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>第25课：GeoJSONLayer 与 KML 图层</title><linkrel="stylesheet"href="https://js.arcgis.com/5.0/esri/themes/light/main.css"><scripttype="module"src="https://js.arcgis.com/5.0/"></script><style>*{margin:0;padding:0;box-sizing:border-box;}body{font-family:"Microsoft YaHei",sans-serif;}#mapContainer{width:100vw;height:100vh;}.page-title{position:absolute;top:20px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,0.95);padding:10px 24px;border-radius:6px;font-size:18px;font-weight:bold;z-index:100;box-shadow:0 2px 8pxrgba(0,0,0,0.15);}.control-panel{position:absolute;top:80px;right:20px;background:rgba(255,255,255,0.95);padding:16px;border-radius:8px;box-shadow:0 2px 12pxrgba(0,0,0,0.15);z-index:100;min-width:300px;}.control-panel h3{margin:0 0 8px 0;font-size:14px;color:#333;}.section{margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid #eee;}.section:last-child{border-bottom:none;margin-bottom:0;}.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;}.btn-row button{flex:1;min-width:60px;padding:6px 0;border:1px solid #d9d9d9;border-radius:4px;background:white;cursor:pointer;font-size:12px;}.btn-row button:hover{border-color:#1890ff;color:#1890ff;}.btn-row button.on{background:#1890ff;color:white;border-color:#1890ff;}.info-card{margin-top:10px;padding:10px 12px;background:#f0f5ff;border-radius:6px;border-left:3px solid #1890ff;font-size:12px;line-height:1.6;}.info-card .val{font-weight:bold;color:#1890ff;}.status-text{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.7);color:white;padding:8px 20px;border-radius:20px;font-size:13px;z-index:100;pointer-events:none;white-space:nowrap;}</style></head><body><h1class="page-title">第25课：GeoJSONLayer 与 KML 图层</h1><divclass="control-panel"><divclass="section"><h3>🌐 GeoJSONLayer（3D 地震点位）</h3><divclass="btn-row"><buttonid="btnVisible"class="on">👁️ 显示 / 隐藏</button><buttonid="btnFlyTo">🎯 飞到全球视角</button></div></div><divclass="section"><h3>⚠️ KML 说明</h3><divclass="info-card"><div>KMLLayer<spanclass="val">不支持 SceneView</span></div><div>三维中请先将 KML 转为 GeoJSON</div></div></div><divclass="info-card"><div>图层状态：<spanclass="val"id="layerStatus">加载中...</span></div><div>点击球体查看地震信息 ↑</div></div></div><divclass="status-text"id="statusText">GeoJSONLayer | 3D 地震点位 · 按震级拉伸球体大小</div><divid="mapContainer"></div><scripttype="module">constMap=await$arcgis.import("@arcgis/core/Map.js");constSceneView=await$arcgis.import("@arcgis/core/views/SceneView.js");constGeoJSONLayer=await$arcgis.import("@arcgis/core/layers/GeoJSONLayer.js");constgetTianditu=await$arcgis.import("https://openlayers.vip/examples/resources/tianditu.js");constvecLayers=getTianditu.default({type:"vec_w"});constmap=newMap({basemap:{baseLayers:[vecLayers.base,vecLayers.anno]}});constview=newSceneView({container:"mapContainer",map:map,camera:{position:{longitude:120,latitude:30,z:12000000},heading:0,tilt:0}});window.view=view;// ===== GeoJSONLayer：USGS 全球地震（3D） =====constgeojsonLayer=newGeoJSONLayer({url:"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson",copyright:"USGS Earthquakes",elevationInfo:{mode:"on-the-ground"},renderer:{type:"simple",symbol:{type:"point-3d",symbolLayers:[{type:"object",resource:{primitive:"sphere"},anchor:"bottom",material:{color:[255,80,0,0.85]}}]},visualVariables:[{type:"size",field:"mag",axis:"all",stops:[{value:1,size:6000},{value:3,size:20000},{value:6,size:45000}]}]},popupTemplate:{title:"地震 M{mag}",content:"深度：{depth} km<br>地点：{place}"}});map.add(geojsonLayer);view.when(()=>{geojsonLayer.when(()=>{document.getElementById("layerStatus").textContent="已加载";view.goTo(geojsonLayer.fullExtent);}).catch(err=>{document.getElementById("layerStatus").textContent="加载失败";console.error(err);});});functionsetStatus(msg){document.getElementById("statusText").textContent=msg;}document.getElementById("btnVisible").addEventListener("click",function(){geojsonLayer.visible=!geojsonLayer.visible;this.classList.toggle("on",geojsonLayer.visible);setStatus("图层："+(geojsonLayer.visible?"显示":"隐藏"));});document.getElementById("btnFlyTo").addEventListener("click",()=>{view.goTo({position:{longitude:120,latitude:30,z:12000000},tilt:0});setStatus("已回到全球视角");});</script></body></html>五、在线示例
🔗在线体验：https://southjor.github.io/arcgis-examples/lessons/lesson25.html
操作说明：
- 场景加载 USGS 全球地震 GeoJSON，自动以 3D 球体符号渲染，并按震级（
mag）拉伸球体大小。- 点击任意球体弹出该地震的震级、深度与地点信息。
- 点击「显示 / 隐藏」切换图层。
- KML 部分：因官方不支持 SceneView，本课演示其在 3D 中的限制与「转 GeoJSON」替代方案。
六、关键 API 说明
| API | 说明 |
|---|---|
new GeoJSONLayer({ url, elevationInfo, renderer }) | 构造 GeoJSON 图层（3D 支持） |
elevationInfo: { mode } | 三维高程：on-the-ground/absolute-height/relative-to-ground |
KMLLayer | 仅 2D MapView，SceneView 不支持 |
| GeoJSON 转 KML 思路 | 用ogr2ogr/在线工具转 GeoJSON 后在 3D 加载 |
参考链接：GeoJSONLayer API | KMLLayer API
七、系列导航
⬅️上一篇：ArcGIS JS 基础教程（24）：VectorTileLayer 矢量切片图层
➡️下一篇：ArcGIS JS 基础教程（26）：图层可见性与透明度控制
💡小贴士：三维里能用 GeoJSON 就尽量用 GeoJSON——它原生支持
SceneView，还能配合elevationInfo和 3D 符号做直观可视化。遇到 KML 数据，先转 GeoJSON 再加载，是最省心的三维接入方式。