目錄

• 前言：
• 實現效果：
• 1、聚合效果：
• 2、撒點效果：
• 具體實現步驟：
• 1、專案中引入openlayer
• 2、配置(按需引入)
• 3、實現地圖展示
• 4、撒點功能
• 5、聚合效果

前言：

openlayer是目前我們gis常用的一款開源的，並且反饋都特別好的軟體了，像之前的ol3,風靡一時，地圖實現也很簡單，很實用，目前中使用地圖也是非常多的，那麼如果在vue中引入openlayer並且實現地圖撒點效果，甚至是更深層的地圖聚合效果呢，本文來分享下vue中地圖的實現。目前openlayer的 5 系列，6.5 都是通用的，經測試可用。

實現效果：

1、聚合效果：

2、撒點效果：

具體實現步驟：

1、專案中引入openlayer

cnpm i ol --save

2、配置(按需引入)

（1）新建一個vue檔案

（2）template

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

（3）部分

引入相關配置檔案，這是我的所有引入，你可以根據你的情況刪一刪

import "ol/ol.";
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";IKqMZ
 

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、實現地圖展示

mounted：

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

methods：我這裡提供了兩種地圖的模板，都是線上的，內網的話換成你自己的地址

initMap(){
    //渲染地圖
      var layers = [
        //深藍色背景
        new TileLayer({
          source: new XYZ({
            url:
            "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",}),//初始化背景
        // 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
        }),});
      //點選提示當前的座標
      this.map.on(
        "click",function (evt) {
          alert(evt.coordinate[0] + ";" + evt.coordinate[1]);
        },map
      );
}

4、撒點功能

mounted：

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

methods：

initMap(){
    //渲染地圖
      var layers = [
         //深藍色背景
        // new TileLayer({
        //   source: new XYZ({
        //     url:
        /www.cppcns.com/       "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",//   }),//初始化背景
        new TileLayer({
          source: new OSM(),];
 
      this.map = new Map({
        lhttp://www.cppcns.comayers: layers,map
      );
    //我這裡是寫的固定資料點，所以可以直接渲染完地址直接呼叫
    this.addMarker()
},addMarker(){
    //建立畫板
    let sourceArr =  newIKqMZ SourceVec({}); 
    //定義隨機資料，這裡隨機了200個
    for (var i = 1; i <= 200; i++) {
      //點的座標資訊
      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  這兩種都可以
      var layer = new VectorLayer({
          source: sourceArr,})
 
      //地圖新增畫板
      this.map.addLayer(
        layer
      );  
    
}

5、聚合效果

mounted：

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

methods：

initMap(){
    //渲染地圖
      var layers = [
         //深藍色背景
        // new TileLayer({
        //   source: new XYZ({
        //     url:
        //       "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",addMarker(){
    //建立畫板
    let sourceArr =  new SourceVec({}); 
    //定義隨機資料，這裡隨機了200個
    for (var i = 1; i <= 200; i++) {
      //點的座標資訊
      let coordinates = [120.00 + Math.random(),})
      feature.setStyle(markeIKqMZrStyle)
      sourceArr.addFeature(feature);
    }
 
 
      //新增進map層-聚合點-LayerVec /VectorLayer  這兩種都可以
      var layer = new LayerVec({
          source: this.ClusterSource,style: function (feature,resolution) {
            var size = feature.get('features').length;
            //如果是聚合數為1也就是最底層的則是定點陣圖標
            if (size == 1) {
              return new Style({
                image: new Icon({
                  anchor: [0.5,1],src: require("../../assets/Img/marker_yes.png"),})
              })
            }else {
              //這裡設定聚合部分的樣式
              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'
                  })
                })
              })
            }
          }
        })   
 
      //地圖新增畫板
      this.map.addLayer(
        layer
      );  
    
}

參考文獻：

js中使用openlayer: https://blog.csdn.net/HerryDong/article/details/110951955

到此這篇關於vue+openlayer實現地圖聚合效果和撒點效果的文章就介紹到這了,更多相關vue openlayer地圖聚合內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！