vue+openlayers中实现图片展示与图片的拖拽和放大缩小（一）_openlayers 调整图片

前言：

         openlayers中渲染图片是有多种方法的， Icon ，Image 等等都可以实现将图片放到地图上面，但是操作图片的话，方法比较少了，这里是配合 ol-ext 来实现的。

相关资料:

1、ol-ext官方地址：入口

2、ol-ext 对应的资料地址：入口

3、ol-ext 源码gitee地址：入口

4、openlayers 最新官网：入口

5、openlayers 官网api：入口

6、实际坐标转换视图坐标（getPixelFromCoordinate）：入口

7、视图坐标转换为实际坐标（getCoordinateFromPixel）：入口

实现效果：

 图1、默认实现效果

 图2、鼠标滚动，层级变化，图片大小不变

  图3、鼠标滚动，层级变化，图片跟着变化，始终在一个坐标范围上

   图4、拖拽放大前

图5、拖拽放大后

图6、移动前

 图7、移动后

相关思路：

1、openlayers是可以实现图片的展示，svg，canvas,png等等
2、openlayers的扩展 ol-ext 是可以实现图形的拖拽，放大缩小，旋转等功能
3、将他们结合，下面放多边形，来控制可以使用ol-ext的功能，上面放图片，来同步效果

实现步骤：