This is the 22nd day of my participation in the August Wen Challenge.More challenges in August

Introduction to the

This article explains how to use OpenLayers to add markup and preview images on static images. The main use of ol.source.ImageStatic is to display the layer source of a single static image. The advantages of using OpenLayers include that view functions such as zooming in and zooming out of maps can be used, and drawing and labeling according to geographic coordinates can also be used well, which undoubtedly speeds up the development efficiency for demonstration.

Begin to use

Initialize the map

<! DOCTYPE html><html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
  </head>
  <style type="text/css">
    .map {
      height: 500px;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.6.1/css/ol.css" />
  <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.6.1/build/ol.js"></script>
  <body>
    <div id="map" class="map"></div>
  </body>
  <script>
    var map = new ol.Map({
      target: 'map'
    })

    // Map set center
    var center = ol.proj.transform([0.0].'EPSG:4326'.'EPSG:3857')
    / / view
    var view = new ol.View({
      center: ol.proj.fromLonLat([0.0]),
      zoom: 7
    })

    map.setView(view)

    // Calculate the extent to which the image is mapped to the map, while keeping scale. Zoom in 100 times and divide by 2 to align the center of the image with the center of the map
    var extent = [center[0] - (1080 * 1000) / 2, center[1] - (756 * 1000) / 2, center[0] + (1080 * 1000) / 2, center[1] + (756 * 1000) / 2]
    // Load the image layer
    map.addLayer(
      new ol.layer.Image({
        source: new ol.source.ImageStatic({
          url: '2.jpg'.imageExtent: extent // Map to the map scope}})))</script>
</html>
Copy the code

  1. Initialize themapNow I don’t need a map layer here.
  2. The view for manipulating map zooming in and out will still be addedmapNote that the center point is saved using a variable that defines the scope of the image layer. The geographic coordinates used for the center point hereol.proj.fromLonLat([0, 0])And calculate the mapping range of the picture, so that the center and center point of the picture coincide. Different central points have different ways of calculating positions.
  3. Create an image layer and add itmapIn the.

Map annotation

  • The image has been loaded, adding annotations will be far behind.
    // Create vector layers to draw annotations
    var vLayer = new ol.layer.Vector({
      source: new ol.source.Vector()
    })

    // Create the Feature required by the active icon and set the location
    var feature = new ol.Feature({
      geometry: new ol.geom.Point([center[0] + 540 * 1000, center[1] - 378 * 1000])})// Set the Feature style, using the small flag icon
    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)
Copy the code

  1. First createVectorVector layer user loaded annotation.
  2. To create a point element, note the one used aboveol.proj.fromLonLat([0, 0]), so the center of the picture is the origin. The annotation position is calculated using pixel coordinates, and the image is magnified 1000 times, so 1 pixel in this case is 1000. Finally, calculate the position of the mark with the cross coordinate centered at the origin.
  3. A simple annotation operation is completed, of course, other functions can also be used and the operation of the map is no different, the main coordinate position needs to pay attention to.