WebGIS development drawing map annotation

catalogue

Implementation steps

1. Reference development library:

2. Create a map container:

3. Create a map object class:

4. Add vector layer:

5. Add picture labels:

5.1 creating picture annotation elements

5.2 setting the style of picture annotation elements

5.3 adding picture labels to layer data sources

6. Add text annotation:

6.1 creating text annotation features

6.2 setting text dimension style

6.3 adding text labels to layer data sources

7. Add graphic annotation object:

7.1 creating graphic annotation elements

7.2 setting text annotation style

7.3 add graphic labels to layer data source

8. Add PopUP:

8.1 get the HTML element to be converted to Overlay

8.2 add click event of close button (hide popup)

8.3 create Overlay

8.4 setting pop-up contents

8.5 add click event listening for map, render pop-up

9. Add aggregation annotation:

9.1 creating a feature array

9.2 creating aggregate annotation data sources

9.3 loading aggregate annotation data layers

Key interface

1. [geometric elements] ol Feature

2. [overlay type] ol Overlay

3. [aggregate data source class] ol source. Cluster

This paper mainly introduces how to use the world map of sky map to add annotation. The example needs to be implemented by using the [include openlayers local. JS] development library.

For text, pictures and text annotation, ol The feature () method builds the feature and loads it into the map. For the PopUp annotation, it is through ol The overlay() method constructs the overlay pop-up implementation. By ol source. The cluster () method creates an aggregate dimension data source.

The implementation effect is shown in the figure below:

Implementation steps

1. Reference development library:

This example introduces the development library through the local offline [include openlayers local. JS] script;

2. Create a map container:

Create a div with id="mapCon" and set its style;

3. Create a map object class:

Create a map object and set the necessary parameters of the map;

4. Add vector layer:

Build a vector layer (used to store annotation data) and add the layer to the map;

  vectorSource = new ol.source.Vector({
      features: [],
  })
  //Vector dimension layer
  vectorLayer = new ol.layer.Vector({
      source: vectorSource,
  })
  map.addLayer(vectorLayer)

5. Add picture labels:

Construct the point geometric feature, set its style as picture annotation, and add the point to the vector layer;

5.1 creating picture annotation elements

//Create a new feature ol Feature
  var newFeature = new ol.Feature({
    //Geometric information
    geometry: new ol.geom.Point(coordinate),
  })

5.2 setting the style of picture annotation elements

 
 function createImageStyle(feature) {
    return new ol.style.Style({
      /**{olx.style.IconOptions}type*/
      image: new ol.style.Icon({
        anchor: [0.5, 60],
        anchorOrigin: 'top-right',
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        offsetOrigin: 'top-right',
        // offset:[0,10],
        //Icon scale
        // scale:0.5,
        //transparency
        opacity: 0.75,
        //The url of the icon
        src: './static/assets/olimages/label/blueIcon.png',
      }),
    })
  }
  //Style features
  newFeature.setStyle(createImageStyle(newFeature))

5.3 adding picture labels to layer data sources

  //Add new features to the data source
  vectorSource.addFeature(newFeature)

6. Add text annotation:

Construct the point geometric feature, set its style as text annotation, and add the point to the vector layer;

6.1 creating text annotation features

  //Create a new feature ol Feature
  var newFeature = new ol.Feature({
    //Geometric information
    geometry: new ol.geom.Point(coordinate),
    //Name attribute
    name: 'Dimension point',
  })

6.2 setting text dimension style

 function createTxtStyle(feature) {
    return new ol.style.Style({
      text: new ol.style.Text({
        //position
        textAlign: 'center',
        //Datum line
        textBaseline: 'middle',
        //Text style
        font: 'normal 14px Microsoft YaHei ',
        //Text content
        text: feature.get('name'),
        //Text fill pattern (i.e. text color)
        fill: new ol.style.Fill({ color: '#aa3300' }),
        stroke: new ol.style.Stroke({ color: '#ffcc33', width: 2 }),
      }),
    })
  }
  //Style features
  newFeature.setStyle(createTxtStyle(newFeature))
 

6.3 adding text labels to layer data sources

 vectorSource.addFeature(newFeature)

7. Add graphic annotation object:

Construct the point geometric feature, set its style as graphic annotation, and add the point to the vector layer;

7.1 creating graphic annotation elements

 //Create a new feature ol Feature
  var newFeature = new ol.Feature({
      //Geometric information
      geometry: new ol.geom.Point(coordinate),
      //Name attribute
      name: 'Dimension point',
  })

7.2 setting text annotation style

  function createImgTxtLabelStyle(feature) {
      return new ol.style.Style({
          image: new ol.style.Icon(
              /** @type {olx.style.IconOptions} */
              ({
                  anchor: [0.5, 60],
                  anchorOrigin: 'top-right',
                  anchorXUnits: 'fraction',
                  anchorYUnits: 'pixels',
                  offsetOrigin: 'top-right',
                  // offset:[0,10],
                  //Icon scale
                  // scale:0.5,
                  //transparency
                  opacity: 0.75,
                  //The url of the icon
                  src: './static/assets/olimages/label/blueIcon.png',
              })
          ),
          text: new ol.style.Text({
              //position
              textAlign: 'center',
              //Datum line
              textBaseline: 'middle',
              //Text style
              font: 'normal 14px Microsoft YaHei ',
              //Text content
              text: feature.get('name'),
              //Text fill pattern (i.e. text color)
              fill: new ol.style.Fill({ color: '#aa3300' }),
              stroke: new ol.style.Stroke({ color: '#ffcc33', width: 2 }),
          }),
      })
  }
  //Style features
  newFeature.setStyle(createImgTxtLabelStyle(newFeature))

7.3 add graphic labels to layer data source

//Add new features to the data source
  vectorSource.addFeature(newFeature)

8. Add PopUP:

8.1 get the HTML element to be converted to Overlay

  container = document.getElementById('popup')
  content = document.getElementById('popup-content')
  closer = document.getElementById('popup-closer')

8.2 add click event of close button (hide popup)

  /**
  * Add click event for close button (hide popup)
  * @return {boolean} Don't follow the href.
  */
  closer.onclick = function() {
    //Pop location is not defined
    popup.setPosition(undefined)
    //Lose focus
    closer.blur()
    return false
  }

8.3 create Overlay

  if (popup == null) {
    popup = new ol.Overlay(
      /** @type {olx.OverlayOptions} */
      ({
        //HTML element to convert to overlay
        element: container,
        //The current window is visible
        autoPan: true,
        //Where the Popup is placed
        positioning: 'bottom-center',
        //Should events be stopped propagating to the map window
        stopEvent: false,
        autoPanAnimation: {
          //When the Popup exceeds the map boundary, the speed at which the map moves in order to make the Popup all visible
          duration: 250,
        },
      })
    )
  }
  map.addOverlay(popup)

8.4 setting pop-up contents

//Example annotation point Beijing information object
  var featuerInfo = {
    geo: [116.28, 39.54],
    att: {
      //Title Content of annotation information
      title: 'Beijing(Capital of the people's Republic of China)',
      //Annotation details link
      titleURL: 'http://www.openlayers.org/',
      //Introduction to annotation content
      text: 'Beijing( Beijing)´╝îBeijing, the capital of the people's Republic of China and a municipality directly under the central government, is China's political, cultural and International Exchange Center',
      //Annotated picture
      imgURL: './static/assets/olimages/label/bj.png',
    },
  }

  /**
  * Dynamically create the specific content of the pop
  * @param {string} title
  */
  function addFeatrueInfo(info) {
    //Add a element
    var elementA = document.createElement('a')
    elementA.className = 'markerInfo'
    elementA.href = info.att.titleURL
    //elementA.innerText = info.att.title;
    setInnerText(elementA, info.att.title)
    // Add a child node to the new div element
    content.appendChild(elementA)
    //Add div element
    var elementDiv = document.createElement('div')
    elementDiv.className = 'markerText'
    //elementDiv.innerText = info.att.text;
    setInnerText(elementDiv, info.att.text)
    // Add div child node for content
    content.appendChild(elementDiv)
    //New img element
    var elementImg = document.createElement('img')
    elementImg.className = 'markerImg'
    elementImg.src = info.att.imgURL
    // Add img child nodes for content
    content.appendChild(elementImg)
  }
  /**
  * Dynamically set element text content (compatible)
  */
  function setInnerText(element, text) {
    if (typeof element.textContent == 'string') {
      element.textContent = text
    } else {
      element.innerText = text
    }
  }

8.5 add click event listening for map, render pop-up

  map.on('click', function(evt) {
    //Judge whether there is a feature at the current click, and pop up when the feature is captured
    var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
        return feature
    })
    if (feature) {
        //Empty the content container of pop
        content.innerHTML = ''
        //Load the specific information of the current feature in the pop
        addFeatrueInfo(featuerInfo)
        popup.setPosition(feature.getGeometry().getCoordinates())
    }
  })

9. Add aggregation annotation:

By constructing vector layers and associating aggregation data sources, the aggregation annotation effect is realized.

9.1 creating a feature array

  //This example creates 10000 features
  var count = 10000
  var features = new Array(count)
  for (var i = 0; i < count; ++i) {
    var coordinates = [Math.random() * 360 - 180, Math.random() * 180 - 90]
    features[i] = new ol.Feature(new ol.geom.Point(coordinates))
  }
  vectorSource.addFeatures(features)

9.2 creating aggregate annotation data sources

  //Aggregate dimension data sources
  var clusterSource = new ol.source.Cluster({
      distance: 30,
      source: vectorSource,
      wrapX: false,
  })
 

9.3 loading aggregate annotation data layers

//Load vector layers for aggregated dimensions
  var styleCache = {}
  var clusters = new ol.layer.Vector({
    source: clusterSource,
    style: function(feature, resolution) {
      var size = feature.get('features').length
      var style = styleCache[size]
      if (!style) {
        style = [
          new ol.style.Style({
            image: new ol.style.Circle({
              radius: 10,
              stroke: new ol.style.Stroke({
                color: '#fff',
              }),
              fill: new ol.style.Fill({
                color: '#3399CC',
              }),
            }),
            text: new ol.style.Text({
              text: size.toString(),
              fill: new ol.style.Fill({
                color: '#fff',
              }),
            }),
          }),
        ]
        styleCache[size] = style
      }
      return style
    },
  })
  map.addLayer(clusters)

Key interface

1. [geometric elements] ol Feature

See OpenLayers API for details OpenLayers v5.3.0 API - Module: ol/Feature

2. [overlay type] ol Overlay

See OpenLayers API for details OpenLayers v5.3.0 API - Module: ol/Overlay

3. [aggregate data source class] ol source. Cluster

See OpenLayers API for details OpenLayers v5.3.0 API - Module: ol/source/Cluster

Keywords: Javascript Web Development gis

Added by StirCrazy on Fri, 07 Jan 2022 09:37:32 +0200