超简单的canvas绘制地图

本文使用geojson数据，通过缩放和平移把地图的地理坐标系转换canvas的屏幕坐标系，然后将转换后的数据绘制到canvas上。

首先要计算数据的最大最小值，遍历所有坐标点的最大最小经纬度。在这个步骤要注意坐标点是否都遍历到，因为数据中可能会有多面和洞的存在。

第二步就是转换坐标系，地理坐标系转换canvas的屏幕坐标系。为了让地图能完整在页面展示，我们要有数据的最大最小经纬度，计算出来最大最小经度的差值和最大最小纬度的差值。考虑到canvas也有一个宽高，我们用如下代码计算，选用哪个比例比较合适整体显示。(地图数据等比例缩放到屏幕坐标系)

var xScale = width / Math.abs(bounds.xMax - bounds.xMin)
var yScale = height / Math.abs(bounds.yMax - bounds.yMin)
var scale = xScale < yScale ? xScale : yScale

接下来要对地图数据进行缩放，由于屏幕坐标系y轴与地图坐标系y轴相反。

所以为了地图能居中，计算地图中心和画布中心的差值,进行平移变换，然后用画布进行绘制。

var xoffset=width/2.0-Math.abs(bounds.xMax - bounds.xMin)/2*scale
var yoffset=height/2.0-Math.abs(bounds.yMax - bounds.yMin)/2*scale
var point={x: (longitude - bounds.xMin) * scale+xoffset,y: (bounds.yMax - latitude) * scale+yoffset
}

效果图如下,在线地址:https://tpolong.github.io/

参考资料：

http://mikefowler.me/journal/2014/06/10/drawing-geojson-in-a-canvas
http://mikefowler.me/smallworld.js/

超简单的canvas绘制地图相关推荐

js 使用 canvas 绘制地图路线
使用 canvas 绘制跟随鼠标自定义路线或点使用贝塞尔曲线自动绘制示例使用 angular 可自行修改核心代码不变基础 html 参考 <div class="cont ...
vue 实现canvas绘制地图，引用图片，对画布进行原点滚轮缩放，按键缩放，拖动等功能把pagex转化为offsetx
html <div class="bigMap-box"><el-dialog :visible.sync="bigMapDialog" :m ...
使用EXCEL绘制三维地图（超简单的五分钟绘制地图方法，妈妈再也不用担心我不会画地图啦~）
博主为从区域规划转行地图学的小学渣一枚,最近处理数据希望对结果进行三维可视化,意外发现从小用到大的EXCEL可以绘制地图且功能非常强大,在这里做一下简单介绍,希望可以给看官提供些许帮助.那下面就开始吧 ...
java canvas 画图片_[Java教程][HTML5] Canvas绘制简单图片
[Java教程][HTML5] Canvas绘制简单图片 0 2016-05-13 13:00:04 获取Image对象,new出来定义Image对象的src属性,参数:图片路径定义Image对象 ...
python制作简单动画_Python tkinter Canvas绘制动画
其实前面程序中的高亮显示已经是动画效果了.程序会用红色.黄色交替显示几何图形的边框,这样看上去就是动画效果了.实现其他动画效果也是这个原理,程序只要增加一个定时器,周期性地改变界面上图形项的颜色.大小 ...
SRPG游戏开发（五）第三章绘制地图 - 二绘制一张简单地图
返回目录第三章绘制地图一导入素材点击进入二绘制一张简单地图这一节我们来看如何绘制一张地图. 1 新建Grid与Tilemap 在Hierarchy面板中,点击Create/2D ...
canvas绘制可缩放的室内地图和路径
最近一直在写canvas绘制室内地图和路径这个功能,大致聊一下这个功能讲了什么. 具体是需要用canvas将室内地图绘制出来(这个不难,canvas教程有),并且地图需要能进行放大缩小,同时将地图上的 ...
canvas绘制简单动画思路总结
使用canvas绘制动画原理就是不断的绘制canvas图形,当画的速度够快,看上去就能动起来.这里需要了解一下屏幕刷新率,根据效果来调整绘制的速度(1秒刷新60次屏幕刷新率保持在60次/秒保障动画效 ...
html5 简单图片效果,【HTML5】Canvas绘制简单图片教程，
[HTML5]Canvas绘制简单图片教程, 获取Image对象,new出来定义Image对象的src属性,参数:图片路径定义Image对象的onload方法,调用context对象的drawIm ...

超简单的canvas绘制地图

超简单的canvas绘制地图相关推荐

最新文章

热门文章