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

The Linux operating system uses Python to implement the visualization function of the task manager

1. Python installation 1. Create a folder. mkdir ...

Vue detailed introductory notes

Table of contents 1. Introduction 2. Initial Vue ...

Centos8 bridge static IP configuration method in VMware virtual machine

1. Make sure the network connection method is bri...

The difference between html empty link href="#" and href="javascript:void(0)"

# contains a location information. The default anc...

Determine whether MySQL update will lock the table through examples

Two cases: 1. With index 2. Without index Prerequ...

A brief analysis of whether using iframe to call a page will cache the page

Recently, I have a project that requires using ifr...

Implementation of a simplified version of JSON.stringify and its six major features explained in detail

Table of contents Preface Six features of JSON.st...

JavaScript flow control (branching)

Table of contents 1. Process Control 2. Sequentia...

Detailed explanation of six web page image carousel effects implemented with JavaScript

Table of contents 1. When the mouse passes over t...

How to use flat style to design websites

The essence of a flat website structure is simpli...

Detailed example of MySQL joint table update data

1.MySQL UPDATE JOIN syntax In MySQL, you can use ...

HTML commonly used meta encyclopedia (recommended)

The Meta tag is an auxiliary tag in the head area...

Win10 DVWA download, installation and configuration graphic tutorial detailed explanation (novice learning penetration)

The computer system has been reinstalled, and the...

Implementation of multi-port mapping of nginx reverse proxy

Code Explanation 1.1 http:www.baidu.test.com defa...

MySQL 5.7 and above version download and installation graphic tutorial

1. Download 1. MySQL official website download ad...