最近实在太忙,实在没时间写文章,在此表示抱歉。今天给大家代码一篇前端Canvas开发实战(你要知道WebGIS中很多图层覆盖物等元素都是通过Canvas渲染的,因为我们经常调用常用的API,如OpenLayer或Leaflet,并不知晓其源码中逻辑道理,学会了Canvas或SVG,为后续看懂常用地图前端框架,将大有帮助)。以下直接上图:
前几天工作上遇到了一个新需求:绘制如上图多个柱体连接在一起(每个柱体可以代表各种储水设施,同时用三角形角标,柱体内部填充色柱体表示实时水位)。
1、接到此任务后,我结合以往经验,绘制这种柱体(2.5d),应该可以用SVG,Canvas,OSMBuildings,甚至Cesium或Three.js。
2、以上几个方案都进入我的脑海,经过分析,对比这几种选型的优劣势Cesium或Three.js是基于WebGL库的前端框架(低版本的IE浏览器不支持),做这么一个轻量级的功能,每必要搞个这么大引用包,得不偿失。所以这个方案PASS。
3、前段时间刚好接触了OSMBuildings,也写些相关代码,但它是基于已有空间坐标。针对一个纯前台页面,我需要研究源码后写扩展,这也太费力,故PASS。
4、最后剩余SVG和Canvas,刚好之前用leaflet扩展写过一个点label多行显示的功能,故选择用Canvas绘制(站在巨人的肩膀上)。
开发过程:
请详见我的微信公众号
一位更懂IT的GISER,一位更懂GIS的IT
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d");