当前位置: 首页 > news >正文

开源地图数据可视化库——mapnik

  最近的工作重心放在了后端地图渲染引擎上,因此接触到了mapnik,用了一段时间感觉它的功能相当丰富,具有很强的拓展性,生态也比较强大,想对学习过程做一个记录。OK,废话少说。

什么是Mapnik

  Mapnik是一款开源的具有地图渲染功能的库,它能够为Postgis,Shapefile,Geojson,SQLite等在内的多种数据源提供空间数据计算与可视化服务,包括png瓦片,矢量瓦片,utfGrid,同时它支持自定义渲染样式配置,具有很高的灵活性,提供了c++,python,node接口。目前在开源社区上已有较多成熟的产品基于Mapnik做了封装,例如windshaft,tileliev-mapnik等等。

矢量瓦片(mvt)渲染

  矢量瓦片在我理解是将矢量所表示的空间数据和属性数据按照特定的编码方式(Google Protocol Buffers)进行编码,Google Protocol Buffers是一种兼容多语言、多平台、易扩展的数据序列化格式,采用这种编码方式,能够最大程度保证矢量数据的精度,提高客户端和服务端的渲染效率以及查询效率,详情可以参考:https://github.com/jingsam/ve... 以及 https://github.com/mapbox/vec...
以PostGIS为例Mapnik库进行矢量瓦片渲染时整个工作流程是:首先根据url中z,x,y参数计算出该瓦片的坐标范围extent,然后将extent与每一个几何要素的最小外包矩形进行overlay计算得到该瓦片内的所有geometry对象,最后通过Postgis的库函数ST_AsMVT将所有几何对象聚合成矢量瓦片,伪代码如下:

    let vt = new Mapnik.VectorTile(z, x, y);

    let map = new Mapnik.Map(256,256,‘+init=epsg:3857’);

    map.fromStringSync(xml);//xml为配置对象,具体参看https://github.com/mapnik/mapnik/wiki/XMLConfigReference
    
    map.render(vt, (err, tile) => {

        if (err) throw err;
        
        //tile即为所得数据
        console.log(tile.getData())
    
    })  

栅格瓦片(PNG)渲染

  栅格瓦片就是将空间数据按照指定的颜色样式以图片的形式进行绘制,栅格瓦片多应用于底图的绘制,由于空间数据被绘制成了图片,在前端可视化时候就是绘制在canvas上的像素点,因此它的属性信息会丢失,需要配合utfGrid同步使用。栅格瓦片的渲染流程与矢量瓦片类似,只是最后一步不是聚合,而是按照指定的样式进行逐一像素点绘制;在mapnik中,栅格瓦片的渲染主要有两种方式,1)直接渲染;2)通过矢量瓦片渲染,伪代码分表如下:

  • 直接渲染
    let image = new Mapnik.Image(256, 256);
    
    let map = new Mapnik.Map(256,256,‘+init=epsg:3857’);

    map.fromStringSync(xml);
    
    map.render(image, {}, function(err, image) {
    
    if (err) throw err;
    
    image.encodeSync('png') 
    
    });
  • 通过矢量瓦片渲染
    let vt = new Mapnik.VectorTile(z, x, y);
     
    vt.addDataSync(tile);//tile即为前文提到所生成的矢量瓦片
     
    let map = new Mapnik.Map(256,256,‘+init=epsg:3857’);

    map.fromStringSync(xml);
    
    vt.render(this.map, new Mapnik.Image(256,256),function(error,buffer) {
    
    if (error) throw error;
    
    buffer.encodeSync('png')
    
    });

  比较简单的介绍了mapnik的地理数据渲染功能,之后会做一个比较简易的地图渲染服务器,初次使用技术博客,可能不太到位,还请各位前辈多指教

相关文章:

  • IOS开发常用的linux命令
  • grep/字符/次数匹配/锚定符/小大括号/wc/tr/cut/sort/uniq
  • ajax跨域问题
  • 菜根谭#89
  • Kubernetes上的十大应用程序
  • 开发技巧:高效的使用 Response.Redirect
  • 正则表达式-基础知识Review
  • Andrew Ng机器学习公开课笔记 -- 线性回归和梯度下降
  • 四则运算1
  • Windows API 第15篇 GetVolumeInformation 获取磁盘卷(驱动器)信息
  • 看完这篇文章,你还觉得Python难吗?
  • 使用AIR进行移动APP开发常见功能和问题(上)
  • 应用el-tabs模拟nav menu组件
  • “ an error occurred during ssl communication”--VisualSVN
  • mybatis 动态SQL .1
  • SegmentFault for Android 3.0 发布
  • [译] React v16.8: 含有Hooks的版本
  • 「前端」从UglifyJSPlugin强制开启css压缩探究webpack插件运行机制
  • 「译」Node.js Streams 基础
  • Apache的基本使用
  • Docker 笔记(1):介绍、镜像、容器及其基本操作
  • LeetCode刷题——29. Divide Two Integers(Part 1靠自己)
  • mockjs让前端开发独立于后端
  • node入门
  • RxJS: 简单入门
  • socket.io+express实现聊天室的思考(三)
  • 闭包,sync使用细节
  • 第三十一到第三十三天:我是精明的小卖家(一)
  • 七牛云 DV OV EV SSL 证书上线,限时折扣低至 6.75 折!
  • 前端学习笔记之观察者模式
  • 让你成为前端,后端或全栈开发程序员的进阶指南,一门学到老的技术
  • 小李飞刀:SQL题目刷起来!
  • 一些关于Rust在2019年的思考
  • nb
  • 交换综合实验一
  • ​3ds Max插件CG MAGIC图形板块为您提升线条效率!
  • # C++之functional库用法整理
  • (6)设计一个TimeMap
  • (LeetCode 49)Anagrams
  • (Mac上)使用Python进行matplotlib 画图时,中文显示不出来
  • (定时器/计数器)中断系统(详解与使用)
  • (读书笔记)Javascript高级程序设计---ECMAScript基础
  • (二)正点原子I.MX6ULL u-boot移植
  • (一)80c52学习之旅-起始篇
  • (转) Face-Resources
  • (转)大型网站的系统架构
  • .Net 6.0 处理跨域的方式
  • .net core 实现redis分片_基于 Redis 的分布式任务调度框架 earth-frost
  • .NET Core实战项目之CMS 第十二章 开发篇-Dapper封装CURD及仓储代码生成器实现
  • .net MVC中使用angularJs刷新页面数据列表
  • .Net多线程总结
  • .NET简谈设计模式之(单件模式)
  • .NET平台开源项目速览(15)文档数据库RavenDB-介绍与初体验
  • .NET与java的MVC模式(2):struts2核心工作流程与原理
  • .secret勒索病毒数据恢复|金蝶、用友、管家婆、OA、速达、ERP等软件数据库恢复