☰

企业官网建设流程全解析

首页 / 建站日记 / 企业官网建设流程全解析
MapLibre GL JS第45课：加载显示远程SVG符号作为图标
2026/6/11 11:06:05 网站建设 项目流程

📌 学习目标

  • 掌握显示远程SVG符号的实现方法
  • 理解相关API的使用
  • 能够独立完成类似功能开发

🎯 核心概念

加载显示远程SVG符号作为地图图标。

💻 完 整 代 码

代码示例

constmap=newmaplibregl.Map({container:'map',// 地图容器idstyle:'https://demotiles.maplibre.org/style.json',// 样式URLcenter:[0,0],// 中心点位置zoom:1,// 缩放maplibreLogo:true});map.on('load',()=>{constexistingImages={};map.on('styleimagemissing',async(e)=>{if(existingImages[e.id]){return;}existingImages[e.id]=true;constresponse=awaitfetch(e.id);constsvgText=awaitresponse.text();constsvg='data:image/svg+xml;charset=utf-8,'+encodeURIComponent(svgText);constimage=newImage();constpromise=newPromise((resolve)=>{image.onload=resolve;});image.src=svg;awaitpromise;// 等待图像加载完成map.addImage(e.id,image);});map.addSource('point',{'type':'geojson','data':{'type':'FeatureCollection','features':[{'type':'Feature','geometry':{'type':'Point','coordinates':[0,0]},},]}});map.addLayer({'id':'svg-symbol','type':'symbol','source':'point','layout':{'icon-image':'https://maplibre.org/maplibre-gl-js/docs/assets/logo.svg','icon-overlap':'always','text-overlap':'always'}});});

代码示例

<!DOCTYPEhtml><htmllang="en"><head><title>Display a remote SVG symbol</title><metaproperty="og:description"content="使用 styleimagemissing 事件加载远程图像并使用它。"/><metaproperty="og:created"content="2025-07-10"/><metacharset='utf-8'><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel='stylesheet'href='https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.css'/><scriptsrc='https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.js'></script><style>body{margin:0;padding:0;}html, body, #map{height:100%;}</style></head><body><divid="map"></div><script>constmap=newmaplibregl.Map({container:'map',// 容器IDstyle:'https://demotiles.maplibre.org/style.json',// 样式URLcenter:[0,0],// 初始位置 [经度, 纬度]zoom:1,// 初始缩放级别maplibreLogo:true});map.on('load',()=>{constexistingImages={};map.on('styleimagemissing',async(e)=>{if(existingImages[e.id]){return;}existingImages[e.id]=true;constresponse=awaitfetch(e.id);constsvgText=awaitresponse.text();constsvg='data:image/svg+xml;charset=utf-8,'+encodeURIComponent(svgText);constimage=newImage();constpromise=newPromise((resolve)=>{image.onload=resolve;});image.src=svg;awaitpromise;// 等待图像加载map.addImage(e.id,image);});map.addSource('point',{'type':'geojson','data':{'type':'FeatureCollection','features':[{'type':'Feature','geometry':{'type':'Point','coordinates':[0,0]},},]}});map.addLayer({'id':'svg-symbol','type':'symbol','source':'point','layout':{'icon-image':'https://maplibre.org/maplibre-gl-js/docs/assets/logo.svg','icon-overlap':'always','text-overlap':'always'}});});</script></body></html>

🔍 代码解析

初始化地图

使用new maplibregl.Map()创建地图实例，配置基本参数。本示例的核心特色是展示如何通过styleimagemissing事件动态加载远程 SVG 符号。

关键配置项

  • container: 地图容器的 DOM 元素 ID
  • style: 使用 MapLibre 官方样式https://demotiles.maplibre.org/style.json
  • center: 地图初始中心点[0, 0]
  • zoom: 初始缩放级别为 1，显示全球视图

styleimagemissing 事件处理

map.on('styleimagemissing',async(e)=>{// 防止重复加载if(existingImages[e.id]){return;}existingImages[e.id]=true;// 异步获取远程 SVGconstresponse=awaitfetch(e.id);constsvgText=awaitresponse.text();// 转换为 data URLconstsvg='data:image/svg+xml;charset=utf-8,'+encodeURIComponent(svgText);// 创建图像并等待加载constimage=newImage();constpromise=newPromise((resolve)=>{image.onload=resolve;});image.src=svg;awaitpromise;// 添加到地图map.addImage(e.id,image);});

动态引用远程 SVG

map.addLayer({'id':'svg-symbol','type':'symbol','source':'point','layout':{'icon-image':'https://maplibre.org/maplibre-gl-js/docs/assets/logo.svg','icon-overlap':'always','text-overlap':'always'}});

⚙️ 参数说明

参数类型必填默认值说明
containerstring是-地图容器元素的 ID
stylestring/object是-地图样式 URL 或内联样式对象
center[number, number]否[0, 0]初始中心点坐标
zoomnumber否0初始缩放级别

icon-image 布局属性

属性类型必填说明
icon-imagestring是图标 ID 或远程 SVG URL
icon-overlapstring否是否允许图标重叠

🎨 效果说明

运行代码后，地图上会在坐标[0, 0]处显示一个远程加载的 SVG 图标：

  • SVG 加载: 通过styleimagemissing事件动态加载远程 SVG
  • 图像缓存: 使用existingImages对象防止重复加载
  • Data URL 转换: 将 SVG 文本转换为 Data URL 以便在 Image 对象中使用
  • 交互功能: 支持鼠标拖拽、滚轮缩放等标准交互

💡 常 见 问 题

Q1: 为什么使用 Data URL？
A:MapLibre 的addImage方法需要一个 Image 对象，直接使用远程 URL 创建 Image 对象可能遇到跨域问题。转换为 Data URL 可以避免这个问题。

Q2: 如何处理加载失败？
A:添加 try-catch 块处理网络错误，并提供备用图标：

try{constresponse=awaitfetch(e.id);// ...}catch(error){console.error('Failed to load SVG:',error);// 使用备用图标}

Q3: SVG 可以包含外部资源吗？
A:建议避免在 SVG 中引用外部资源（如外部图像、字体），可能导致加载失败或跨域问题。

Q4: 性能影响如何？
A:SVG 需要解析和渲染，复杂的 SVG 可能影响性能。建议使用简化的 SVG 图标。

📝 练习任务

  1. 基础练习：更换 SVG URL，使用其他远程 SVG 图标
  2. 进阶挑战：添加错误处理，当 SVG 加载失败时显示备用图标
  3. 拓展思考：如何实现 SVG 图标的动态颜色变化？

🌟 最佳实践

  1. 缓存机制: 使用对象或 Map 缓存已加载的图像，避免重复请求
  2. 错误处理: 添加 try-catch 和备用方案
  3. CORS 处理: 确保 SVG 服务器配置了正确的 CORS 头
  4. SVG 优化: 使用简化的 SVG，避免复杂的滤镜和渐变
  5. 性能监控: 监控 SVG 加载时间，优化慢加载的图标
  6. 安全考虑: 验证 SVG 来源，避免加载恶意内容

🔗 延伸阅读

  • Map API文档

  • MapLibre GL JS 官方文档

  • [下一课预告]：将继续学习地图图层的基础知识

本文是MapLibre GL JS实践课程系列的一部分，欢迎关注收藏

标签： 网站建设 企业官网 项目流程 UI设计 前端开发

热门文章

文章分类

标签云

网站建设 响应式设计 用户体验 SEO优化 前端开发 小程序 电商平台 性能优化

相关文章

您可能感兴趣的其他内容

小猫爪：PMSM之FOC控制10-从零构建SMO观测器与转子位置估算
2026/6/11 11:03:27 网站建设

小猫爪：PMSM之FOC控制10-从零构建SMO观测器与转子位置估算

1. 滑模观测器&#xff08;SMO&#xff09;在PMSM FOC控制中的核心作用 永磁同步电机&#xff08;PMSM&#xff09;的无传感器控制一直是工业界的热门研究方向。其中滑模观测器&#xff08;Sliding Mode Observer, SMO&#xff09;因其强鲁棒性和简单实现&#xff0c;成为许多工…...

阅读更多 →
三维细胞牵引力分析工具包：ANSYS建模+MATLAB位移提取与力反演一体化流程
2026/6/11 10:59:31 网站建设

三维细胞牵引力分析工具包：ANSYS建模+MATLAB位移提取与力反演一体化流程

本文还有配套的精品资源&#xff0c;点击获取 简介&#xff1a;这套工具专为研究细胞在三维弹性基质中产生的牵引力而设计&#xff0c;覆盖从力学建模、位移场生成、算法提取到牵引力计算与误差评估的完整链路。用ANSYS构建带微球&#xff08;beads&#xff09;的凝胶模型&a…...

阅读更多 →
跨越系统鸿沟：Win11下HC05蓝牙模块与笔记本的稳定串口连接实战
2026/6/11 10:57:51 网站建设

跨越系统鸿沟：Win11下HC05蓝牙模块与笔记本的稳定串口连接实战

1. Win11与HC05蓝牙模块的连接困境 最近在折腾HC05蓝牙模块和Win11笔记本连接时&#xff0c;发现了一个奇怪的现象&#xff1a;在Win10上能轻松搞定的蓝牙串口连接&#xff0c;到了Win11上就各种不配合。具体表现为在"设置-蓝牙和其他设备"里根本搜不到HC05模块&…...

阅读更多 →

需要专业的网站建设服务？

联系我们获取免费的网站建设咨询和方案报价，让我们帮助您实现业务目标

立即咨询