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

相关文章
|
11天前
|
XML JSON 数据安全/隐私保护
Web服务
【10月更文挑战第18天】Web服务
34 9
|
7天前
|
移动开发 开发者 HTML5
构建响应式Web界面:Flexbox与Grid的实战应用
【10月更文挑战第22天】随着互联网的普及,用户对Web界面的要求越来越高,不仅需要美观,还要具备良好的响应性和兼容性。为了满足这些需求,Web开发者需要掌握一些高级的布局技术。Flexbox和Grid是现代Web布局的两大法宝,它们分别由CSS3和HTML5引入,能够帮助开发者构建出更加灵活和易于维护的响应式Web界面。本文将深入探讨Flexbox和Grid的实战应用,并通过具体实例来展示它们在构建响应式Web界面中的强大能力。
22 3
|
11天前
|
XML JSON 安全
Web服务是通过标准化的通信协议和数据格式
【10月更文挑战第18天】Web服务是通过标准化的通信协议和数据格式
122 69
|
7天前
|
存储 消息中间件 缓存
构建互联网高性能WEB系统经验总结
构建互联网高性能WEB系统经验总结
|
11天前
|
XML JSON 安全
定义Web服务
【10月更文挑战第18天】定义Web服务
33 12
|
3天前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
11 2
|
3天前
|
人工智能 搜索推荐 PHP
PHP在Web开发中的璀璨星辰:构建动态网站的幕后英雄###
【10月更文挑战第25天】 本文将带您穿越至PHP的宇宙,揭示其作为Web开发常青树的奥秘。通过生动实例与深入解析,展现PHP如何以简便、高效、灵活的姿态,赋能开发者打造动态交互式网站,同时不忘探讨其在新时代技术浪潮中面临的挑战与机遇,激发对技术创新与应用的无限思考。 ###
9 1
|
4天前
|
前端开发 JavaScript 开发者
构建响应式设计的现代Web应用:实用技巧与工具
【10月更文挑战第24天】本文介绍了构建响应式Web应用的实用技巧和工具,涵盖流体网格布局、弹性图片、CSS媒体查询、CSS Grid和Flexbox、响应式导航菜单、图片和字体的响应式处理,以及测试和调试工具。掌握这些技能将帮助开发者提升用户体验和项目适应性。
|
4天前
|
JSON API 数据格式
如何使用Python和Flask构建一个简单的RESTful API。Flask是一个轻量级的Web框架
本文介绍了如何使用Python和Flask构建一个简单的RESTful API。Flask是一个轻量级的Web框架,适合小型项目和微服务。文章从环境准备、创建基本Flask应用、定义资源和路由、请求和响应处理、错误处理等方面进行了详细说明,并提供了示例代码。通过这些步骤,读者可以快速上手构建自己的RESTful API。
14 2
|
5天前
|
数据可视化 数据库 开发者
使用Dash构建交互式Web应用程序
【10月更文挑战第16天】本文介绍了使用Python的Dash框架构建交互式Web应用程序的方法。Dash结合了Flask、React和Plotly等技术,让开发者能够快速创建功能丰富的数据可视化应用。文章从安装Dash开始,逐步介绍了创建简单应用程序、添加交互元素、部署应用程序以及集成更多功能的步骤,并提供了代码示例。通过本文,读者可以掌握使用Dash构建交互式Web应用程序的基本技巧和高级功能。
14 3