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

相关文章
|
1天前
|
Python
使用Python和Flask构建简单的Web应用
使用Python和Flask构建简单的Web应用
13 6
|
1天前
|
存储 JSON 数据库
使用Flask构建简单的Web应用
使用Flask构建简单的Web应用
10 3
|
5天前
|
机器学习/深度学习 安全 网络协议
Web安全-Linux网络命令
Web安全-Linux网络命令
10 1
|
9天前
|
前端开发 安全 JavaScript
构建高效Web应用:前后端分离架构的实践
【9月更文挑战第4天】在数字时代,Web应用已成为企业与用户互动的主要平台。本文将介绍如何通过前后端分离的架构设计来构建高效的Web应用,探讨该架构的优势,并分享实现过程中的关键步骤和注意事项。文章旨在为开发者提供一种清晰、高效的开发模式,帮助其在快速变化的市场环境中保持竞争力。
|
12天前
|
前端开发 安全 Java
技术进阶:使用Spring MVC构建适应未来的响应式Web应用
【9月更文挑战第2天】随着移动设备的普及,响应式设计至关重要。Spring MVC作为强大的Java Web框架,助力开发者创建适应多屏的应用。本文推荐使用Thymeleaf整合视图,通过简洁的HTML代码提高前端灵活性;采用`@ResponseBody`与`Callable`实现异步处理,优化应用响应速度;运用`@ControllerAdvice`统一异常管理,保持代码整洁;借助Jackson简化JSON处理;利用Spring Security增强安全性;并强调测试的重要性。遵循这些实践,将大幅提升开发效率和应用质量。
39 7
|
12天前
|
前端开发 JavaScript
构建你的第一个Web应用:从零到部署
【8月更文挑战第33天】 在这篇文章中,我们将一起踏上构建一个基本Web应用的旅程。不同于传统的“安装这个、运行那个”教程,我们的目标是通过理解每一步的意义和目的来深化你的技术理解。我们将探索HTML、CSS、JavaScript的基础,并学习如何将它们结合起来创建一个简单的个人网站。接着,我们会介绍如何使用GitHub Pages进行免费部署,让你的应用上线。准备好了吗?让我们开始吧!
|
11天前
|
缓存 前端开发 JavaScript
构建高效Web应用的十个技巧
【9月更文挑战第2天】在数字时代,Web应用已成为我们日常生活和商业活动的重要组成部分。然而,随着用户对速度、安全性和功能性的需求日益增长,如何构建一个高效的Web应用成为了开发者们面临的挑战。本文将介绍十个提升Web应用性能和用户体验的技巧,包括代码优化、资源管理、安全性增强等方面。这些技巧将帮助你打造更快、更安全、更易用的Web应用,满足现代用户的需求。
|
14天前
|
Rust 安全 开发者
惊爆!Xamarin 携手机器学习,开启智能应用新纪元,个性化体验与跨平台优势完美融合大揭秘!
【8月更文挑战第31天】随着互联网的发展,Web应用对性能和安全性要求不断提高。Rust凭借卓越的性能、内存安全及丰富生态,成为构建高性能Web服务器的理想选择。本文通过一个简单示例,展示如何使用Rust和Actix-web框架搭建基本Web服务器,从创建项目到运行服务器全程指导,帮助读者领略Rust在Web后端开发中的强大能力。通过实践,读者可以体验到Rust在性能和安全性方面的优势,以及其在Web开发领域的巨大潜力。
27 0
|
14天前
|
缓存 监控 PHP
深入PHP:构建高效Web应用的实用技巧
【8月更文挑战第31天】 本文旨在揭示如何通过实用的编程技巧提升PHP Web应用的性能和效率。我们将从基础优化谈起,逐步深入到高级策略,包括代码重构、数据库交互优化以及安全性增强。文章以简洁明了的语言和实际编码示例,带领读者理解并运用这些策略,从而在开发过程中做出更明智的决策。无论你是PHP新手还是资深开发者,这篇文章都能为你的项目带来实质性的提升。
|
14天前
|
Java 开发者 JavaScript
Struts 2 开发者的秘籍:隐藏的表单标签库功能,能否成为你下个项目的大杀器?
【8月更文挑战第31天】Struts 2表单标签库是提升Web页面交互体验的神器。它提供丰富的标签,如`<s:textfield>`和`<s:select>`,简化表单元素创建与管理,支持数据验证和动态选项展示。结合示例代码,如创建文本输入框并与Action类属性绑定,显著提升开发效率和用户体验。通过自定义按钮样式等功能,Struts 2表单标签库让开发者更专注于业务逻辑实现。
38 0