• 如何使用OpenLayers在载静态图片上添加标记，预览图片。主要使用ol.source.ImageStatic用于显示单个静态图像的图层源。使用OpenLayers的好处有，地图的放大、缩小等view视图功能都可以使用，根据地理坐标绘制标注也能很好的使用，对于演示而言，无疑加快了开发效率。

    var map = new ol.Map({
      target: 'map'
    })

    // 地图设置中心
    var center = ol.proj.transform([0, 0], 'EPSG:4326', 'EPSG:3857')
    // 视图
    var view = new ol.View({
      center: ol.proj.fromLonLat([0, 0]),
      zoom: 7
    })

    map.setView(view)

    // 计算图片映射到地图上的范围，保持比例的情况下。 放大100倍 除以2 让图片中心点和地图中心点重合
    var extent = [center[0] - (1080 * 1000) / 2, center[1] - (756 * 1000) / 2, center[0] + (1080 * 1000) / 2, center[1] + (756 * 1000) / 2]
    // 加载图片图层
    map.addLayer(
      new ol.layer.Image({
        source: new ol.source.ImageStatic({
          url: '2.jpg',
          imageExtent: extent //映射到地图的范围
        })
      })
    ) 

初始化map后这里就不需要地图图层了。

用于操作地图放大缩小的视图还是要加入map中，需要注意中心点要使用变量保存下来，用于定义图片图层的范围。这里中心点使用的地理坐标ol.proj.fromLonLat([0, 0])，并且计算图片映射范围时，使图片中心和中心点重合。不同的中心点标注计算位置时方式是不一样的。

创建图片图层加入map中。

绘制标注

• 图片已经加载了，添加标注还会远吗。

js复制代码    // 创建矢量图层 绘制标注
    var vLayer = new ol.layer.Vector({
      source: new ol.source.Vector()
    })

    //创建一个活动图标需要的Feature，并设置位置
    var feature = new ol.Feature({
      geometry: new ol.geom.Point([center[0] + 540 * 1000, center[1] - 378 * 1000])
    })
    //设置Feature的样式，使用小旗帜图标
    feature.setStyle(
      new ol.style.Style({
        image: new ol.style.Icon({
          src: 'https://img2.baidu.com/it/u=3347068028,2336626960&fm=26&fmt=auto&gp=0.jpg',
          anchor: [0, 1],
          scale: 0.2
        })
      })
    )

    vLayer.getSource().addFeature(feature)
    map.addLayer(vLayer)

1. 先创建Vector矢量图层用户加载标注。

2. 创建点要素，要注意上面使用的ol.proj.fromLonLat([0, 0])，所以图片中心就是原点。计算标注位置时使用的是像素坐标，图片放大了1000倍，这里的1像素位置就是1000。最后以原点为中心的十字坐标计算标注位置就行了。

3. 一个简单的标注操作就完成了，当然其他功能也是可以用的就和操作地图没区别，主要是坐标位置需要注意。