Realize map aggregation and scattering effects based on vue+openlayer

Preface:
Result:

1. Polymerization effect:
2. Sprinkle effect:

Specific implementation steps:

1. Introduce openlayer into the project
2. Configuration (introduced on demand)
3. Realize map display
4. Sprinkle function
5. Aggregation effect

Preface:

Openlayer is an open source software that is commonly used in our GIS and has received very good feedback. Like ol3 before, it was all the rage. The map implementation is also very simple and practical. At present, there are many maps used in vue. So what if we introduce openlayer in vue and realize the map scattering effect, or even a deeper map aggregation effect? This article will share the implementation of maps in vue. Currently, openlayer's 5 series and 6.5 are universal and have been tested and are available.

Result:

1. Polymerization effect:

2. Sprinkle effect:

Specific implementation steps:

1. Introduce openlayer into the project

cnpm i ol --save

2. Configuration (introduced on demand)

(1) Create a new vue file

(2) template

<div id="map"></div>

(3) js part

Import related configuration files. This is all my imports. You can delete them according to your situation.

import "ol/ol.css";
import View from "ol/View";
import Map from "ol/Map";
import TileLayer from "ol/layer/Tile";
import Overlay from "ol/Overlay";
import XYZ from "ol/source/XYZ";
import { Vector as SourceVec ,Cluster } from "ol/source";
import { Feature } from "ol";
import { Vector as LayerVec , Vector as VectorLayer } from "ol/layer";
import { Point, LineString } from "ol/geom";
 
import {
  Style,
  Icon,
  Fill,
  Stroke,
  Text,
  Circle as CircleStyle,
} from "ol/style";
 
import { OSM, TileArcGISRest } from "ol/source";

3. Realize map display

mounted:

mounted() {
  this.initMap();
},

Methods: I provide two map templates here, both are online. If it is an intranet, replace it with your own address.

initMap(){
    // Render the map var layers = [
        //Dark blue background new TileLayer({
          source: new XYZ({
            url:
            "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
          }),
        }),
        // Initialize background // new TileLayer({
        // source: new OSM(),
        // }),
        
      ];
 
      this.map = new Map({
        layers: layers,
        target: "map",
        view: new View({
          projection: 'EPSG:4326',
          center: [120, 30],
          zoom: 10,
          minZoom: 5,
          maxZoom: 14
        }),
      });
      //Click to prompt the current coordinates this.map.on(
        "click",
        function (evt) {
          alert(evt.coordinate[0] + ";" + evt.coordinate[1]);
        },
        map
      );
}

4. Sprinkle function

mounted:

mounted() {
  this.initMap();
},

methods:

initMap(){
    // Render the map var layers = [
         //Dark blue background// new TileLayer({
        // source: new XYZ({
        // url:
        // "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
        // }),
        // }),
        //Initialize background new TileLayer({
          source: new OSM(),
        }),
        
      ];
 
      this.map = new Map({
        layers: layers,
        target: "map",
        view: new View({
          projection: 'EPSG:4326',
          center: [120, 30],
          zoom: 10,
          minZoom: 5,
          maxZoom: 14
        }),
      });
      //Click to prompt the current coordinates this.map.on(
        "click",
        function (evt) {
          alert(evt.coordinate[0] + ";" + evt.coordinate[1]);
        },
        map
      );
    //I am writing a fixed data point here, so you can directly call this.addMarker() after rendering the address
},
addMarker(){
    //Create a drawing board let sourceArr = new SourceVec({}); 
    //Define random data, here are 200 random for (var i = 1; i <= 200; i++) {
      //Point coordinate information let coordinates = [120.00 + Math.random(), 30.00 + Math.random()];
      let feature = new Feature(new Point(coordinates));
      let markerStyle = new Style({
          image: new Icon({
            opacity: 0.75,
            src: this.fixedStationImg1,
        }),
      })
      feature.setStyle(markerStyle)
      sourceArr.addFeature(feature);
    }
 
 
     //LayerVec /VectorLayer Both are OK var layer = new VectorLayer({
          source: sourceArr,
        })
 
      //Add a drawing board to the map this.map.addLayer(
        layer
      );  
    
}

5. Aggregation effect

mounted:

mounted() {
  this.initMap();
},

methods:

initMap(){
    // Render the map var layers = [
         //Dark blue background// new TileLayer({
        // source: new XYZ({
        // url:
        // "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
        // }),
        // }),
        //Initialize background new TileLayer({
          source: new OSM(),
        }),
        
      ];
 
      this.map = new Map({
        layers: layers,
        target: "map",
        view: new View({
          projection: 'EPSG:4326',
          center: [120, 30],
          zoom: 10,
          minZoom: 5,
          maxZoom: 14
        }),
      });
      //Click to prompt the current coordinates this.map.on(
        "click",
        function (evt) {
          alert(evt.coordinate[0] + ";" + evt.coordinate[1]);
        },
        map
      );
    //I am writing a fixed data point here, so you can directly call this.addMarker() after rendering the address
},
addMarker(){
    //Create a drawing board let sourceArr = new SourceVec({}); 
    //Define random data, here are 200 random for (var i = 1; i <= 200; i++) {
      //Point coordinate information let coordinates = [120.00 + Math.random(), 30.00 + Math.random()];
      let feature = new Feature(new Point(coordinates));
      let markerStyle = new Style({
          image: new Icon({
            opacity: 0.75,
            src: this.fixedStationImg1,
        }),
      })
      feature.setStyle(markerStyle)
      sourceArr.addFeature(feature);
    }
 
 
      //Add to map layer - aggregation point - LayerVec / VectorLayer Both of these are OK var layer = new LayerVec({
          source: this.ClusterSource,
          style: function (feature, resolution) {
            var size = feature.get('features').length;
            //If the aggregation number is 1, that is, the bottom layer is the positioning icon if (size == 1) {
              return new Style({
                image: new Icon({
                  anchor: [0.5, 1],
                  src: require("../../assets/Img/marker_yes.png"),
                })
              })
            }else {
              //Set the style of the aggregation part here return new Style({
                image: new CircleStyle({
                  radius: 30,
                  stroke: new Stroke({
                    color: 'white'
                  }),
                  fill: new Fill({
                    color: 'blue'
                  })
                }),
                text: new Text({
                  text: size.toString(),
                  fill: new Fill({
                    color: 'white'
                  })
                })
              })
            }
          }
        })   
 
      //Add a drawing board to the map this.map.addLayer(
        layer
      );  
    
}

References:

Using openlayer in js: https://blog.csdn.net/HerryDong/article/details/110951955

This is the end of this article about vue+openlayer to achieve map aggregation and scattering effects. For more relevant vue openlayer map aggregation content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: