ArcGIS JS 基础教程（29）：CSVLayer 表格点位图层

ArcGIS JS 基础教程29CSVLayer 表格点位图层零、写在前面一、功能介绍二、功能实现2.1 创建并配置3D2.2 让点位「浮」起来高程模式2.3 自定义字段类型numericFields 等三、功能应用四、核心代码五、在线示例六、关键 API 说明七、系列导航零、写在前面本系列教程完整目录ArcGIS JS 系列基础教程100个项目常用热门功能在线示例完整可运行的 HTML 示例无需任何环境配置可直接在浏览器中打开体验️专栏导航收藏 关注专栏文章第一时间送达❤️一键三连点赞 评论 收藏一、功能介绍CSVLayer用于加载包含经纬度字段的CSV 表格文件自动解析为点要素图层。它无需发布任何 GIS 服务非常适合无服务端支持时直接把静态表格传感器点位、气象站、POI 统计空间化展示。在三维 SceneView 中CSVLayer 通过elevationInfo控制点位高度并可用 3D 符号球体/模型与视觉变量做数据驱动可视化。参考官方 CSVLayer API 经纬度字段如命名为lat/latitude/y或lon/lng/longitude/xAPI 会自动识别若使用自定义字段名才需要用latitudeField/longitudeField显式指定。二、功能实现2.1 创建并配置3DconstCSVLayerawait$arcgis.import(arcgis/core/layers/CSVLayer.js);constcsvLayernewCSVLayer({url:https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.csv,copyright:USGS Earthquakes,latitudeField:latitude,// 自定义字段名时指定longitudeField:longitude,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:2.5,size:8000},{value:6,size:40000}]}]},popupTemplate:{title:地震 M{mag},content:深度{depth} kmbr地点{place}}});map.add(csvLayer);2.2 让点位「浮」起来高程模式// 相对地面抬高 5 万米呈现悬浮点位效果csvLayer.elevationInfo{mode:relative-to-ground,offset:50000};2.3 自定义字段类型numericFields 等对于需要参与渲染/查询的数值字段可在field相关配置中声明类型确保解析正确。三、功能应用应用场景说明传感器监测点位批量加载直接读 CSV无需建服务气象站点可视化按温度/风速做颜色/大小视觉变量社会调查 POI 空间化经纬度字段自动识别成点实时 feed 接入远程 CSV URL 自动刷新四、核心代码完整代码已保存至sample/lesson29_csv_layer.html可直接在浏览器打开。!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title第29课CSVLayer 表格点位图层/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第29课CSVLayer 表格点位图层/h1divclasscontrol-paneldivclasssectionh3 CSVLayer3D 地震点位/h3divclassbtn-rowbuttonidbtnVisibleclasson️ 显示 / 隐藏/buttonbuttonidbtnFlyTo 全球视角/button/divdivclassbtn-rowbuttonidbtnElev 悬浮高程/buttonbuttonidbtnColor 按震级着色/button/div/divdivclassinfo-carddiv图层状态spanclassvalidlayerStatus加载中.../span/divdiv点击球体查看地震信息 ↑/div/div/divdivclassstatus-textidstatusTextCSVLayer | 3D 地震点位 · 按震级拉伸大小/divdividmapContainer/divscripttypemoduleconstMapawait$arcgis.import(arcgis/core/Map.js);constSceneViewawait$arcgis.import(arcgis/core/views/SceneView.js);constCSVLayerawait$arcgis.import(arcgis/core/layers/CSVLayer.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;functionbuildRenderer(colorByMag){constbase{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:2.5,size:8000},{value:6,size:40000}]}]};if(colorByMag){base.visualVariables.push({type:color,field:mag,stops:[{value:2.5,color:#2bdd36},{value:4,color:#ffd000},{value:6,color:#ff0000}]});}returnbase;}constcsvLayernewCSVLayer({url:https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.csv,copyright:USGS Earthquakes,latitudeField:latitude,longitudeField:longitude,elevationInfo:{mode:on-the-ground},renderer:buildRenderer(false),popupTemplate:{title:地震 M{mag},content:深度{depth} kmbr地点{place}}});map.add(csvLayer);view.when((){csvLayer.when((){document.getElementById(layerStatus).textContent已加载;view.goTo(csvLayer.fullExtent);}).catch(err{document.getElementById(layerStatus).textContent加载失败;console.error(err);});});functionsetStatus(msg){document.getElementById(statusText).textContentmsg;}document.getElementById(btnVisible).addEventListener(click,function(){csvLayer.visible!csvLayer.visible;this.classList.toggle(on,csvLayer.visible);setStatus(图层(csvLayer.visible?显示:隐藏));});document.getElementById(btnFlyTo).addEventListener(click,(){view.goTo({position:{longitude:120,latitude:30,z:12000000},tilt:0});setStatus(已回到全球视角);});// 悬浮高程相对地面抬高 5 万米letfloatingfalse;document.getElementById(btnElev).addEventListener(click,function(){floating!floating;csvLayer.elevationInfofloating?{mode:relative-to-ground,offset:50000}:{mode:on-the-ground};this.classList.toggle(on,floating);setStatus(floating?点位悬浮于地面 5 万米上空:点位贴地显示);});// 按震级着色letcoloredfalse;document.getElementById(btnColor).addEventListener(click,function(){colored!colored;csvLayer.rendererbuildRenderer(colored);this.classList.toggle(on,colored);setStatus(colored?已按震级着色:已恢复单色);});/script/body/html五、在线示例在线体验https://southjor.github.io/arcgis-examples/lessons/lesson29.html操作说明场景加载 USGS 全球地震 CSV自动以 3D 球体符号渲染并按震级mag拉伸大小。点击「悬浮高程」切换elevationInfo为relative-to-ground 50000观察点位升到空中。点击「按震级着色」追加color视觉变量绿→黄→红表示震级递增。点击球体弹出震级、深度、地点信息。六、关键 API 说明API说明new CSVLayer({ url, latitudeField, longitudeField })加载 CSV 点位字段可自动识别elevationInfo: { mode }三维高程on-the-ground/relative-to-ground(offset) /absolute-heightrenderervisualVariables3D 符号 大小/颜色数据驱动popupTemplate点击弹窗{字段名}引用属性queryFeatures()客户端/服务端查询参考链接CSVLayer API七、系列导航⬅️上一篇ArcGIS JS 基础教程28图层渲染顺序管理➡️下一篇ArcGIS JS 基础教程30VoxelLayer 体元图层小贴士CSVLayer 是「零服务端」接入点位数据最快的方式。记住三维里必须配elevationInfo才能正确放置想做悬浮效果就用relative-to-ground offset比改几何简单得多。