ArcGIS JS 基础教程25GeoJSONLayer 与 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 中加载推荐做法constGeoJSONLayerawait$arcgis.import(arcgis/core/layers/GeoJSONLayer.js);constgeojsonLayernewGeoJSONLayer({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} kmbr地点{place}}});map.add(geojsonLayer); 在 3D 中务必设置elevationInfo否则要素放置位置不确定effect/featureEffect在 3D 中不支持。2.2 KMLLayer 的现状仅 2D// ⚠️ 以下代码只能在 2D MapView 中运行SceneView 会报错/不显示constKMLLayerawait$arcgis.import(arcgis/core/layers/KMLLayer.js);constkmlLayernewKMLLayer({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 三维示例。!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title第25课GeoJSONLayer 与 KML 图层/titlelinkrelstylesheethrefhttps://js.arcgis.com/5.0/esri/themes/light/main.cssscripttypemodulesrchttps://js.arcgis.com/5.0//scriptstyle*{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/headbodyh1classpage-title第25课GeoJSONLayer 与 KML 图层/h1divclasscontrol-paneldivclasssectionh3 GeoJSONLayer3D 地震点位/h3divclassbtn-rowbuttonidbtnVisibleclasson️ 显示 / 隐藏/buttonbuttonidbtnFlyTo 飞到全球视角/button/div/divdivclasssectionh3⚠️ KML 说明/h3divclassinfo-carddivKMLLayerspanclassval不支持 SceneView/span/divdiv三维中请先将 KML 转为 GeoJSON/div/div/divdivclassinfo-carddiv图层状态spanclassvalidlayerStatus加载中.../span/divdiv点击球体查看地震信息 ↑/div/div/divdivclassstatus-textidstatusTextGeoJSONLayer | 3D 地震点位 · 按震级拉伸球体大小/divdividmapContainer/divscripttypemoduleconstMapawait$arcgis.import(arcgis/core/Map.js);constSceneViewawait$arcgis.import(arcgis/core/views/SceneView.js);constGeoJSONLayerawait$arcgis.import(arcgis/core/layers/GeoJSONLayer.js);constgetTiandituawait$arcgis.import(https://openlayers.vip/examples/resources/tianditu.js);constvecLayersgetTianditu.default({type:vec_w});constmapnewMap({basemap:{baseLayers:[vecLayers.base,vecLayers.anno]}});constviewnewSceneView({container:mapContainer,map:map,camera:{position:{longitude:120,latitude:30,z:12000000},heading:0,tilt:0}});window.viewview;// GeoJSONLayerUSGS 全球地震3D constgeojsonLayernewGeoJSONLayer({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} kmbr地点{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).textContentmsg;}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-groundKMLLayer仅 2D MapViewSceneView 不支持GeoJSON 转 KML 思路用ogr2ogr/在线工具转 GeoJSON 后在 3D 加载参考链接GeoJSONLayer API | KMLLayer API七、系列导航⬅️上一篇ArcGIS JS 基础教程24VectorTileLayer 矢量切片图层➡️下一篇ArcGIS JS 基础教程26图层可见性与透明度控制小贴士三维里能用 GeoJSON 就尽量用 GeoJSON——它原生支持SceneView还能配合elevationInfo和 3D 符号做直观可视化。遇到 KML 数据先转 GeoJSON 再加载是最省心的三维接入方式。
ArcGIS JS 基础教程25GeoJSONLayer 与 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 中加载推荐做法constGeoJSONLayerawait$arcgis.import(arcgis/core/layers/GeoJSONLayer.js);constgeojsonLayernewGeoJSONLayer({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} kmbr地点{place}}});map.add(geojsonLayer); 在 3D 中务必设置elevationInfo否则要素放置位置不确定effect/featureEffect在 3D 中不支持。2.2 KMLLayer 的现状仅 2D// ⚠️ 以下代码只能在 2D MapView 中运行SceneView 会报错/不显示constKMLLayerawait$arcgis.import(arcgis/core/layers/KMLLayer.js);constkmlLayernewKMLLayer({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 三维示例。!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title第25课GeoJSONLayer 与 KML 图层/titlelinkrelstylesheethrefhttps://js.arcgis.com/5.0/esri/themes/light/main.cssscripttypemodulesrchttps://js.arcgis.com/5.0//scriptstyle*{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/headbodyh1classpage-title第25课GeoJSONLayer 与 KML 图层/h1divclasscontrol-paneldivclasssectionh3 GeoJSONLayer3D 地震点位/h3divclassbtn-rowbuttonidbtnVisibleclasson️ 显示 / 隐藏/buttonbuttonidbtnFlyTo 飞到全球视角/button/div/divdivclasssectionh3⚠️ KML 说明/h3divclassinfo-carddivKMLLayerspanclassval不支持 SceneView/span/divdiv三维中请先将 KML 转为 GeoJSON/div/div/divdivclassinfo-carddiv图层状态spanclassvalidlayerStatus加载中.../span/divdiv点击球体查看地震信息 ↑/div/div/divdivclassstatus-textidstatusTextGeoJSONLayer | 3D 地震点位 · 按震级拉伸球体大小/divdividmapContainer/divscripttypemoduleconstMapawait$arcgis.import(arcgis/core/Map.js);constSceneViewawait$arcgis.import(arcgis/core/views/SceneView.js);constGeoJSONLayerawait$arcgis.import(arcgis/core/layers/GeoJSONLayer.js);constgetTiandituawait$arcgis.import(https://openlayers.vip/examples/resources/tianditu.js);constvecLayersgetTianditu.default({type:vec_w});constmapnewMap({basemap:{baseLayers:[vecLayers.base,vecLayers.anno]}});constviewnewSceneView({container:mapContainer,map:map,camera:{position:{longitude:120,latitude:30,z:12000000},heading:0,tilt:0}});window.viewview;// GeoJSONLayerUSGS 全球地震3D constgeojsonLayernewGeoJSONLayer({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} kmbr地点{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).textContentmsg;}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-groundKMLLayer仅 2D MapViewSceneView 不支持GeoJSON 转 KML 思路用ogr2ogr/在线工具转 GeoJSON 后在 3D 加载参考链接GeoJSONLayer API | KMLLayer API七、系列导航⬅️上一篇ArcGIS JS 基础教程24VectorTileLayer 矢量切片图层➡️下一篇ArcGIS JS 基础教程26图层可见性与透明度控制小贴士三维里能用 GeoJSON 就尽量用 GeoJSON——它原生支持SceneView还能配合elevationInfo和 3D 符号做直观可视化。遇到 KML 数据先转 GeoJSON 再加载是最省心的三维接入方式。
