学习目标掌握查看本地GeoJSONFile System Access API的实现方法理解相关API的使用能够独立完成类似功能开发 核心概念使用实验性文件系统访问API查看本地GeoJSON。 完 整 代 码代码示例constmapnewmaplibregl.Map({container:map,style:https://tiles.openfreemap.org/styles/bright,center:[-8.3226655,53.7654751],zoom:8});constviewbuttondocument.getElementById(viewbutton);asyncfunctionbuttonClickHandler(){const[fileHandle]awaitwindow.showOpenFilePicker({// 只允许选择单文件上传multiple:false,// 应用GeoJSON文件筛选器types:[{description:GeoJSON,accept:{application/geojson:[.geojson]}}],// 开始在下载目录中选择文件startIn:downloads});// 获取文件句柄并读取内容constfileawaitfileHandle.getFile();constcontentsawaitfile.text();// 解析为JSON并添加到地图源map.addSource(uploaded-source,{type:geojson,data:JSON.parse(contents)});map.addLayer({id:uploaded-polygons,type:fill,source:uploaded-source,paint:{fill-color:#888888,fill-outline-color:red,fill-opacity:0.4},// 过滤多边形要素filter:[,$type,Polygon]});}if(showOpenFilePickerinwindow){viewbutton.addEventListener(click,buttonClickHandler);}else{viewbutton.innerTextYour browser does not support File System Access API;// 如果您想使用回退尝试 input typefile 但这是传统的文件上传方法}代码示例!DOCTYPEhtmlhtmllangenheadtitleView local GeoJSON (experimental)/titlemetapropertyog:descriptioncontent使用实验性的文件系统访问 API 查看本地 GeoJSON。/metapropertyog:createdcontent2025-06-25/metacharsetutf-8metanameviewportcontentwidthdevice-width, initial-scale1linkrelstylesheethrefhttps://unpkg.com/maplibre-gl5.24.0/dist/maplibre-gl.css/scriptsrchttps://unpkg.com/maplibre-gl5.24.0/dist/maplibre-gl.js/scriptstylebody{margin:0;padding:0;}html, body, #map{height:100%;}/style/headbodystyle#viewbutton{position:absolute;top:0;left:0;}/styledividmap/divbuttonidviewbuttonView local GeoJSON file/buttonscriptconstmapnewmaplibregl.Map({container:map,style:https://tiles.openfreemap.org/styles/bright,center:[-8.3226655,53.7654751],zoom:8});constviewbuttondocument.getElementById(viewbutton);asyncfunctionbuttonClickHandler(){const[fileHandle]awaitwindow.showOpenFilePicker({// 只允许选择单个文件multiple:false,// 对GeoJSON文件应用过滤器types:[{description:GeoJSON,accept:{application/geojson:[.geojson]}}],// 从下载目录开始startIn:downloads});// 获取文件句柄并读取内容constfileawaitfileHandle.getFile();constcontentsawaitfile.text();// 将文件解析为JSON并添加为地图数据源map.addSource(uploaded-source,{type:geojson,data:JSON.parse(contents)});map.addLayer({id:uploaded-polygons,type:fill,source:uploaded-source,paint:{fill-color:#888888,fill-outline-color:red,fill-opacity:0.4},// 过滤(多)多边形如果还要显示线或点// 添加更多具有不同过滤器的图层filter:[,$type,Polygon]});}if(showOpenFilePickerinwindow){viewbutton.addEventListener(click,buttonClickHandler);}else{viewbutton.innerText您的浏览器不支持文件系统访问API;// 如果需要降级方案可以尝试input typefile但这使用的是传统文件上传方式}/script/body/html 代码解析1. 初始化地图使用new maplibregl.Map()创建地图实例配置基本参数。本示例中心点设置在爱尔兰附近。2. 检测API支持使用showOpenFilePicker in window检测浏览器是否支持 File System Access API。3. 文件选择器调用使用window.showOpenFilePicker()打开文件选择对话框multiple: false: 只允许选择单个文件types: 指定可选文件类型GeoJSONstartIn: 指定初始目录4. 文件读取通过fileHandle.getFile()获取文件对象使用file.text()读取内容。5. 添加到地图将解析后的GeoJSON数据添加为数据源并创建填充图层显示多边形。⚙️ 参数说明参数类型必填说明containerstring是地图容器IDstylestring是地图样式URLcenter[number, number]否初始中心点默认[0, 0]zoomnumber否初始缩放级别默认0showOpenFilePicker 选项选项类型说明multipleboolean是否允许多选typesarray文件类型过滤器startInstring初始目录downloads/documents/desktop等 效果说明运行代码后地图显示爱尔兰区域中心点 -8.32°W, 53.77°N页面顶部有View local GeoJSON file按钮点击按钮打开文件选择对话框从下载目录开始选择GeoJSON文件后多边形以灰色填充透明度40%、红色边框显示如果浏览器不支持该API按钮显示提示信息 常 见 问 题Q1: File System Access API 兼容性如何A:该API目前在Chrome/Edge中支持Safari和Firefox尚未支持。需要提供降级方案。Q2: 如何实现降级方案A:使用传统的input typefile作为降级方案if(showOpenFilePickerinwindow){// 使用新API}else{// 使用input[typefile]}Q3: 如何访问文件系统中的目录A:使用window.showDirectoryPicker()可以选择目录但需要额外的权限。 练习任务基础练习修改文件选择器的初始目录进阶挑战添加降级方案支持不兼容的浏览器拓展思考如何实现多选文件并批量加载 最佳实践兼容性检测: 始终检查API支持情况提供降级方案用户体验: 提供清晰的操作提示和错误反馈权限管理: 注意浏览器安全限制避免滥用文件系统访问代码组织: 将文件读取逻辑封装为可复用函数 延伸阅读Map API文档MapLibre GL JS 官方文档[下一课预告]将继续学习地图图层的基础知识本文是MapLibre GL JS实践课程系列的一部分欢迎关注收藏