web GIS神器,一行命令快捷构建精灵图服务

简介: web GIS神器,一行命令快捷构建精灵图服务

1 简介

大家好我是费老师,martin作为快速发展中的新一代开源「高性能」地图服务框架,在之前的两篇文章中,我已为大家分别介绍过使用martin快速发布「矢量切片地图服务」如何发布具有超高性能的地图服务)以及「字体切片服务」一行命令快捷构建在线地图字体切片服务)的相关教程。

a314e9644b486bb90650903669fd6e56.png

而在基于MaplibreMapbox等高性能地图框架构建地图应用时,使用一整张集成了多个图片信息的精灵图Sprite)来代替「单独请求」各个图标文件,可以在地图应用需要渲染「类型众多」的图标时,大幅度提升相关资源的网络请求加载速度(精灵图示例如下):

1aaa7bfd824ac3e7e54d7ad0b4371e25.png

而想将原始的众多图片,转换为类似上图所示的一整张精灵图并附带生成对应的索引信息,传统的方式都比较繁琐。而在今天的文章中,费老师我就将为大家介绍如何基于martin,仅通过一行命令就搞定从精灵图动态生成,到部署为直接可用服务的全过程😎~

2 利用martin快速构建精灵图服务

本文演示所使用的martin版本为0.13.0

12dce4c772d827f7cb379bfe005fb83a.png

有关martin的环境配置、安装及版本升级,请移步我先前的相关文章,这里不再赘述。

直接使用martin命令,我们只需要通过参数--sprite来指定存放精灵图原始文件的路径即可,下面举个实际案例,我在设施点目录下存放了若干个svg格式的图标文件:

e3fe7063bee4de8ddf55da2ff1257846.png

在此基础上,只需要执行martin --sprite ./设施点命令,就直接启动了相关的服务:

cf0da3c0bfe481b95f914013c1c02303.png

默认参数下,访问http://127.0.0.1:3000/catalog,即可看到有关精灵图的相关资源目录信息:

d4dd503f147f7a3e1239668020a38335.png

其中,sprites下的键名即为对应精灵图的id,据此,我们可以访问http://127.0.0.1:3000/sprite/精灵图id.png来查看对应的目标精灵图:

b5e2ecd4252e8038a321f1b9936f8bd1.png

而访问http://127.0.0.1:3000/sprite/精灵图id@2x.png则可以看到「高精度版本」的目标精灵图:

3aad2764532d493e9364807fe57eb7cd.png

将后缀名更换为json则可以直接获取到相对应的精灵图索引信息:

c7b50c9a29b147c51c5f7828303af519.png 075556e779679e7f7dc351e637ec7283.png

而在命令中使用多个--sprite参数来指定多个路径,即可同时架起多个独立的精灵图服务,非常的方便:

f7de3d44e3f4e8584401726f234cfa5f.png f5591c1aebf433ba246382f779df4ec4.png

在此基础上,我们就可以直接在MaplibreMapbox等地图框架中直接使用了,下面是一个简单的地图应用示例,全部数据及源码你可以在「文章开头的仓库地址」中找到,按照requirements.txt使用pip安装相关依赖后,直接python app.py即可启动该应用:

e77b32db98698732f9c3faaff1b16678.png

目录
相关文章
|
22天前
|
前端开发 JavaScript 开发者
JavaScript:构建动态Web的核心力量
JavaScript:构建动态Web的核心力量
|
5月前
|
前端开发 算法 API
构建高性能图像处理Web应用:Next.js与TailwindCSS实践
本文分享了构建在线图像黑白转换工具的技术实践,涵盖技术栈选择、架构设计与性能优化。项目采用Next.js提供优秀的SSR性能和SEO支持,TailwindCSS加速UI开发,WebAssembly实现高性能图像处理算法。通过渐进式处理、WebWorker隔离及内存管理等策略,解决大图像处理性能瓶颈,并确保跨浏览器兼容性和移动设备优化。实际应用案例展示了其即时处理、高质量输出和客户端隐私保护等特点。未来计划引入WebGPU加速、AI增强等功能,进一步提升用户体验。此技术栈为Web图像处理应用提供了高效可行的解决方案。
|
22天前
|
安全 Linux PHP
Web渗透-命令执行漏洞-及常见靶场检测实战
命令执行漏洞(RCE)指应用程序调用系统命令时,用户可控制输入参数,导致恶意命令被拼接执行,从而危害系统安全。常见于PHP的system、exec等函数。攻击者可通过命令连接符在目标系统上执行任意命令,造成数据泄露或服务瘫痪。漏洞成因包括代码层过滤不严、第三方组件缺陷等。可通过参数过滤、最小权限运行等方式防御。本文还介绍了绕过方式、靶场测试及复现过程。
258 0
|
4月前
|
移动开发 前端开发 JavaScript
前端web创建命令
本项目使用 Vite 搭建 Vue + TypeScript 开发环境,并基于 HTML5 Boilerplate 提供基础模板,快速启动现代前端开发。
52 2
|
4月前
|
开发框架 JSON 中间件
Go语言Web开发框架实践:使用 Gin 快速构建 Web 服务
Gin 是一个高效、轻量级的 Go 语言 Web 框架,支持中间件机制,非常适合开发 RESTful API。本文从安装到进阶技巧全面解析 Gin 的使用:快速入门示例(Hello Gin)、定义 RESTful 用户服务(增删改查接口实现),以及推荐实践如参数校验、中间件和路由分组等。通过对比标准库 `net/http`,Gin 提供更简洁灵活的开发体验。此外,还推荐了 GORM、Viper、Zap 等配合使用的工具库,助力高效开发。
|
6月前
|
中间件 Go
Golang | Gin:net/http与Gin启动web服务的简单比较
总的来说,`net/http`和 `Gin`都是优秀的库,它们各有优缺点。你应该根据你的需求和经验来选择最适合你的工具。希望这个比较可以帮助你做出决策。
230 35
|
8月前
|
数据采集 Web App开发 API
FastAPI与Selenium:打造高效的Web数据抓取服务 —— 采集Pixabay中的图片及相关信息
本文介绍了如何使用FastAPI和Selenium搭建RESTful接口,访问免版权图片网站Pixabay并采集图片及其描述信息。通过配置代理IP、User-Agent和Cookie,提高爬虫的稳定性和防封禁能力。环境依赖包括FastAPI、Uvicorn和Selenium等库。代码示例展示了完整的实现过程,涵盖代理设置、浏览器模拟及数据提取,并提供了详细的中文注释。适用于需要高效、稳定的Web数据抓取服务的开发者。
377 15
FastAPI与Selenium:打造高效的Web数据抓取服务 —— 采集Pixabay中的图片及相关信息
|
7月前
|
数据可视化 图形学 UED
从模型托管到交互开发:DataV 如何简化三维 Web 应用构建?
从模型托管到交互开发:DataV 如何简化三维 Web 应用构建?
181 2
|
8月前
|
网络协议 Java Shell
java spring 项目若依框架启动失败,启动不了服务提示端口8080占用escription: Web server failed to start. Port 8080 was already in use. Action: Identify and stop the process that’s listening on port 8080 or configure this application to listen on another port-优雅草卓伊凡解决方案
java spring 项目若依框架启动失败,启动不了服务提示端口8080占用escription: Web server failed to start. Port 8080 was already in use. Action: Identify and stop the process that’s listening on port 8080 or configure this application to listen on another port-优雅草卓伊凡解决方案
425 7
|
8月前
|
安全 Linux 开发工具
零基础构建开源项目OpenIM桌面应用和pc web- Electron篇
OpenIM 为开发者提供开源即时通讯 SDK,作为 Twilio、Sendbird 等云服务的替代方案。借助 OpenIM,开发者可以构建安全可靠的即时通讯应用,如 WeChat、Zoom、Slack 等。 本仓库基于开源版 OpenIM SDK 开发,提供了一款基于 Electron 的即时通讯应用。您可以使用此应用程序作为 OpenIM SDK 的参考实现。本项目同时引用了 @openim/electron-client-sdk 和 @openim/wasm-client-sdk,分别为 Electron 版本和 Web 版本的 SDK,可以同时构建 PC Web 程序和桌面应用(Wi
509 2