快捷導(dǎo)航

基于vue+openlayer實現(xiàn)地圖聚合和撒點效果

更新時間：2021年09月15日 11:00:42 作者：Ponnenult

Openlayers 是一個模塊化、高性能并且功能豐富的WebGIS客戶端的JavaScript包，用于顯示地圖及空間數(shù)據(jù)，并與之進行交互，具有靈活的擴展機制，本文給大家介紹vue+openlayer實現(xiàn)地圖聚合效果和撒點效果，感興趣的朋友一起看看吧

前言：

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

實現(xiàn)效果：

1、聚合效果：

2、撒點效果：

具體實現(xiàn)步驟：

1、項目中引入openlayer

cnpm i ol --save

2、配置(按需引入)

（1）新建一個vue文件

（2）template

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

（3）js部分

引入相關(guān)配置文件，這是我的所有引入，你可以根據(jù)你的情況刪一刪

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、實現(xiàn)地圖展示

mounted：

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

methods：我這里提供了兩種地圖的模板，都是在線的，內(nèi)網(wǎng)的話換成你自己的地址

initMap(){
    //渲染地圖
      var layers = [
        //深藍(lán)色背景
        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
        }),
      });
      //點擊提示當(dāng)前的坐標(biāo)
      this.map.on(
        "click",
        function (evt) {
          alert(evt.coordinate[0] + ";" + evt.coordinate[1]);
        },
        map
      );
}

4、撒點功能

mounted：

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

methods：

initMap(){
    //渲染地圖
      var layers = [
         //深藍(lán)色背景
        // 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
        }),
      });
      //點擊提示當(dāng)前的坐標(biāo)
      this.map.on(
        "click",
        function (evt) {
          alert(evt.coordinate[0] + ";" + evt.coordinate[1]);
        },
        map
      );
    //我這里是寫的固定數(shù)據(jù)點，所以可以直接渲染完地址直接調(diào)用
    this.addMarker()
},
addMarker(){
    //創(chuàng)建畫板
    let sourceArr =  new SourceVec({}); 
    //定義隨機數(shù)據(jù)，這里隨機了200個
    for (var i = 1; i <= 200; i++) {
      //點的坐標(biāo)信息
      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 = [
         //深藍(lán)色背景
        // 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
        }),
      });
      //點擊提示當(dāng)前的坐標(biāo)
      this.map.on(
        "click",
        function (evt) {
          alert(evt.coordinate[0] + ";" + evt.coordinate[1]);
        },
        map
      );
    //我這里是寫的固定數(shù)據(jù)點，所以可以直接渲染完地址直接調(diào)用
    this.addMarker()
},
addMarker(){
    //創(chuàng)建畫板
    let sourceArr =  new SourceVec({}); 
    //定義隨機數(shù)據(jù)，這里隨機了200個
    for (var i = 1; i <= 200; i++) {
      //點的坐標(biāo)信息
      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);
    }
 
 
      //添加進map層-聚合點-LayerVec /VectorLayer  這兩種都可以
      var layer = new LayerVec({
          source: this.ClusterSource,
          style: function (feature, resolution) {
            var size = feature.get('features').length;
            //如果是聚合數(shù)為1也就是最底層的則是定位圖標(biāo)
            if (size == 1) {
              return new Style({
                image: new Icon({
                  anchor: [0.5, 1],
                  src: require("../../assets/Img/marker_yes.png"),
                })
              })
            }else {
              //這里設(shè)置聚合部分的樣式
              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

到此這篇關(guān)于vue+openlayer實現(xiàn)地圖聚合效果和撒點效果的文章就介紹到這了,更多相關(guān)vue openlayer地圖聚合內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: