canvas教程

canvas实现百度地图个性化底图绘制

字号+ 作者:H5之家 来源:H5之家 2017-08-18 13:03 我要评论( )

ThinkGIS GIS专业社区,传播GIS技术,分享GIS知识。

精华 node-canvas实现百度地图个性化底图绘制

发布于 3 年前 作者 lzxue 11783 次浏览 来自 技术

原文转自 #node-canvas实现百度地图个性化底图绘制 随着nodejs的推出,node的并发和异步的强大能力,越来越多的得到应用,而且取得了非常不错的效果。 作为一个前端工程师对node.js自然有着一份更深的感情,跃跃欲试的心情,总希望能将它应用到产品中来。 经过努力,node技术在百度LBS开发平台,得到了很好的落地,实现了百度地图个性化的底图绘制,并最终推出了百度地图的个性化地图平台 ##百度地图个性化平台 百度地图大家可能不会陌生了。我们发现个性化定制地图样式的需求非常强烈,开发者有强烈的欲望,希望控制地图的样式,打造出与众不同的地图风格。 百度地图个化平台:2014年5月中旬上线,目前已经很好地实现了个性化的配置功能。 在线地址:

地图

其中的地图底图在IE678等浏览器下,就是使用node-canvas在后端绘制出来的。给一张效果图吧。不同主题的效果demo页,可以看我们的官方网页

ThinkGIS

主题列表页地址 百度地图底图技术介绍 简单介绍一个地图的底图的相关知识吧,我们眼中看到的丰富的地图信息,其中组成地图的主要元素,莫过于地图的一张张底图瓦片了。如下图所示,

ThinkGIS

一般我们打开了一个地图,其实际上可能会像上图一样,由一堆瓦片组成。1,2,3,4表示不同的瓦片。 而某一张瓦片如下图所示

ThinkGIS

##百度地图底图绘制技术现状 要想绘制上面所示的底图,目前现在主要有两类技术 栅格: 也就是传意义的图片技术,在server端把图片画好。浏览器使用

标签拼出来 矢量:在浏览器使用canvas技术,将矢量的数据,在浏览器完成渲染。它最大的问题在于:只支持高端浏览器 百度地图,目前两种技术都已经实现,如果大家使用的是mapapi,在高端浏览器下打开,你会发现,他是使用canvas绘制的。

有兴趣可以使用不同的浏览器打开看看就可以看出来。 如图所示

ThinkGIS

##为什么要用node-canvas来绘制底图呢? 有如下几个原因

  • 由于不样的样式要求得到不同的底图。就需要图片是实时绘制的,而且要求性能必须好。 ##node-canvas绘制底图效果怎么样呢? 先show一张由node-canvas绘制的底图瓦片吧。

    ThinkGIS

    在线地址:?x=788&y=293&z=12&customid=midnight 可以看看请求的速度 ,应该是非常快的。 大图(9个瓦片生成的效果图)

    ThinkGIS

    在线地址:?customid=light
  • ##使用node-canvas的核心思路

    ThinkGIS

    上面这个图,就是我想表达的核心意思。一份代码即可以在浏览器里绘制地图,也可以在server端绘制地图。

    让javascript一统天下吧~~~

    ##node-canvas介绍 node-canvas 官网的介绍:Node canvas is a Cairo backed Canvas implementation for NodeJS. 用一句话说: 他允许我们使用canvas的语法和接口写成的js代码,放在server跑。 如例子中的介绍

    var Canvas = require('canvas') , canvas = new Canvas(200,200) , ctx = canvas.getContext('2d'); ctx.font = '30px Impact'; ctx.rotate(.1); ctx.fillText("Awesome!", 50, 100); var te = ctx.measureText('Awesome!'); ctx.strokeStyle = 'rgba(0,0,0,0.5)'; ctx.beginPath(); ctx.lineTo(50, 102); ctx.lineTo(50 + te.width, 102); ctx.stroke(); console.log('<img src="' + canvas.toDataURL() + '" />');

    经过我的证实,确实是与canvas的接口使用完全一致。 ###后台绘制的主要逻辑

    ThinkGIS

    ThinkGIS

    ##node-canvas的几个注意点 环境安装困难。 由于依赖多个包,且对版本有各种要求。所以搭建消耗了大量的时间。最好终于搞定。 部署形式,采用的是在线下把全部环境编译好,上线时,全部拷贝即可。 图片资源,换成相对路径。 中文字体安装,需要在linux机器上安装所需要的字体。

    node的一些性能调优

    关于node的一些调优,网上有很多的经验,方法都较为类似,这里简单列一下几个关键的。 一定要开启cluster. node为单进程,多核的机器 可以很好的利用cpu的使用率。 合理设置网络等配置。如果 node请求了第三方的http服务,如重试,超时,异常处理一定要全面。maxSocket等限制一定要打开。 合理开启缓存,一些预处理尽量放在node启动时完成,尽量不要放在request时再重复执行。 将node运行中,对cpu的依赖降到最低,尽量不要把复杂的计算放在js中计算,代码一定优化优化再优化。 ##node-开发辅助 使用supervisor提高 nodejs调试效率(监听js 文件变化 ,自动重启 node) ,参考文章 使用node-inspector 在浏览器实现本地调试,参考文章 使用npm镜像,加速npm安装。 ##总结 node技术越来越成熟,在生产环境中没有任何问题。并发的优势非常明显,也可以实现代码的前后端复用的目标。 node-canvas的出现,可以很好解决server绘制图片的需求,性能表现的很好。 开发node的app,对于前端工程师来说,学习成本不高。

    分享到微博

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • 从底层谈WebGIS 原理设计与实现(六):WebGIS中地图瓦片在Canvas上的拼接显示原理

      从底层谈WebGIS 原理设计与实现(六):WebGIS中地图瓦片在Canvas上的

      2017-04-21 09:00

    • ACD Systems Canvas with GIS+ v11.0.1173

      ACD Systems Canvas with GIS+ v11.0.1173

      2017-03-04 15:00

    • ArcGIS api fo silverlight学习二(silverlight加载GraphicsLayer)

      ArcGIS api fo silverlight学习二(silverlight加载GraphicsLayer)

      2017-02-05 08:01

    • webgis复习提要.docx 全文免费在线阅读

      webgis复习提要.docx 全文免费在线阅读

      2017-01-31 14:00

    网友点评
    _