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

相关文章
|
8天前
|
SQL 安全 前端开发
PHP与现代Web开发:构建高效的网络应用
【10月更文挑战第37天】在数字化时代,PHP作为一门强大的服务器端脚本语言,持续影响着Web开发的面貌。本文将深入探讨PHP在现代Web开发中的角色,包括其核心优势、面临的挑战以及如何利用PHP构建高效、安全的网络应用。通过具体代码示例和最佳实践的分享,旨在为开发者提供实用指南,帮助他们在不断变化的技术环境中保持竞争力。
|
9天前
|
Go UED
Go Web服务中如何优雅平滑重启?
在生产环境中,服务升级时如何确保不中断当前请求并应用新代码是一个挑战。本文介绍了如何使用 Go 语言的 `endless` 包实现服务的优雅重启,确保在不停止服务的情况下完成无缝升级。通过示例代码和测试步骤,详细展示了 `endless` 包的工作原理和实际应用。
26 3
|
10天前
|
PHP 开发者
深入浅出PHP:构建你的第一个Web应用
【10月更文挑战第35天】在数字时代的浪潮中,掌握编程技能已成为通往未来的钥匙。本文将带你从零开始,一步步走进PHP的世界,解锁创建动态网页的魔法。通过浅显易懂的语言和实际代码示例,我们将共同打造一个简单但功能强大的Web应用。无论你是编程新手还是希望扩展技能的老手,这篇文章都将是你的理想选择。让我们一起探索PHP的魅力,开启你的编程之旅!
|
13天前
|
缓存 前端开发 JavaScript
构建高性能与用户体验并重的现代Web应用
构建高性能与用户体验并重的现代Web应用
30 5
|
10天前
|
JSON Go UED
Go Web服务中如何优雅关机?
在构建 Web 服务时,优雅关机是一个关键的技术点,它确保服务关闭时所有正在处理的请求都能顺利完成。本文通过一个简单的 Go 语言示例,展示了如何使用 Gin 框架实现优雅关机。通过捕获系统信号和使用 `http.Server` 的 `Shutdown` 方法,我们可以在服务关闭前等待所有请求处理完毕,从而提升用户体验,避免数据丢失或不一致。
14 1
|
11天前
|
开发框架 前端开发 JavaScript
利用Python和Flask构建轻量级Web应用的实战指南
利用Python和Flask构建轻量级Web应用的实战指南
38 2
|
15天前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
13天前
|
前端开发 JavaScript jenkins
构建高效、可维护的Web应用
构建高效、可维护的Web应用
34 2
|
16天前
|
XML 安全 PHP
PHP与SOAP Web服务开发:基础与进阶教程
本文介绍了PHP与SOAP Web服务的基础和进阶知识,涵盖SOAP的基本概念、PHP中的SoapServer和SoapClient类的使用方法,以及服务端和客户端的开发示例。此外,还探讨了安全性、性能优化等高级主题,帮助开发者掌握更高效的Web服务开发技巧。
|
19天前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
33 2