hjl-canvas-map v1.0.15

该项目是为了封装一个canvas坐标系绘制方法.以方便地图类型项目的绘制.

测试界面启动

npm run serve

ts文件打包

npm run build 打包后位置为 dist

项目笔记

• 项目主要包括的类型有 EasyMap(地图)、OverLay(覆盖物)、layer(图层) 三种类型

• 项目中的为了保证坐标轴方向可控,编写了 Context2DProxy 对 CanvasRenderingContext2D对象进行了代理.

  其中新增了

  • canvasPointToMapPoint canvas坐标转换成map坐标
  • mapPointToCanvasPoint map坐标转换成canvas坐标
  • saveDraw 保存绘制内容,绘制完成后还原上下文设置
  • saveMapDraw 保存绘制内容,在地图坐标系中绘制.会之后还原上下文设置
  • clearCanvas 清空绘制
  • translateCenter 原点移动到canvas中心
  • axisRotate 旋转坐标轴

  其中重构了

  • 绘制中包含坐标和角度的方法(例如 moveTo lineTo等)
  • save restore 方法会进行计数.编译回到最初状态

  使用注意事项

  • 在以 canvas坐标系 内绘制时,应该使用原来的 CanvasRenderingContext2D 进行坐标处理,若使用 Context2DProxy 会绘制错误.一般会在 saveDraw 时绘制基于 canvas坐标系

• 项目中使用 EventHandler和 MapEventTarget 对事件进行分发处理.

  其中包含了 PCEventHandler 和 MobileEventHandler 两个处理器. 这两个处理器会处理 canvas 上的事件,并 dispatchEvent 到 MapEventTarget 中. 其中EasyMap、OverLayer 和 Layer 都继承了 MapEventTarget. 注意: 现在只实现了PCEventHandler的部分操作.这个地方需要进行思考.如何更合理的处理事件分发.避免在每个MapEventTarget子类中都重写 dispatchEvent 方法