Realize map aggregation and scattering effects based on vue+openlayer

Realize map aggregation and scattering effects based on vue+openlayer

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:
  • Three common uses of openlayers6 map overlay (popup window marker text)
  • Method to clear specified overlay based on Baidu map api
  • Openlayers realizes full screen display of map
  • vue-openlayers realizes the map coordinates pop-up box effect
  • Detailed explanation of map overlay in openlayers6

<<:  10 bad habits to avoid in Docker container applications

>>:  Briefly describe the four transaction isolation levels of MySql

Recommend

JS implements simple addition and subtraction of shopping cart effects

This article example shares the specific code of ...

MySQL 8.0.12 decompression version installation graphic tutorial under Windows 10

This article records the installation graphic tut...

HTML implements Double 11 coupon grabbing (set time to open the coupon grabbing page)

Without further ado, I will post the code for you...

Detailed explanation of how to exit Docker container without closing it

After entering the Docker container, if you exit ...

How to represent various MOUSE shapes

<a href="http://" style="cursor...

How to upgrade https under Nginx

Purchase Certificate You can purchase it from Ali...

Summary of several implementations of returning to the top in HTML pages

Recently, I need to make a back-to-top button whe...

Docker installs redis 5.0.7 and mounts external configuration and data issues

Redis is an open source NoSQL database written in...

The simplest solution to the problem that Sublime Text cannot input Chinese in Ubuntu

Sublime Sublime Text is a code editor (Sublime Te...

Several things to note when making a web page

--Homepage backup 1.txt text 2. Scan the image 3. ...

MySql Sql optimization tips sharing

One day I found that the execution speed of a SQL...

A detailed discussion of MySQL deadlock and logs

Recently, several data anomalies have occurred in...

Vue project packaging and optimization implementation steps

Table of contents Packaging, launching and optimi...

Vue implements button switching picture

This article example shares the specific code of ...

MySQL-group-replication configuration steps (recommended)

MySQL-Group-Replication is a new feature develope...