欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2021年09月15日 11:00:42   作者：Ponnenult  
Openlayers 是一個模塊化、高性能并且功能豐富的WebGIS客戶端的JavaScript包，用于顯示地圖及空間數(shù)據(jù)，并與之進(jìn)行交互，具有靈活的擴(kuò)展機(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({}); 
    //定義隨機(jī)數(shù)據(jù)，這里隨機(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({}); 
    //定義隨機(jī)數(shù)據(jù)，這里隨機(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);
    }
 
 
      //添加進(jìn)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
      );  
    
}

參考文獻(xiàn)：

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)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • three.js實現(xiàn)vr全景圖功能實例(vue)

    three.js實現(xiàn)vr全景圖功能實例(vue)

    去年全景圖在微博上很是火爆了一陣,正好我也做過一點全景相關(guān)的項目,下面這篇文章主要給大家介紹了關(guān)于three.js實現(xiàn)vr全景圖功能的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2024-05-05
  • vue3使用vue-cli引入windicss報錯Can‘t resolve windi.css問題

    vue3使用vue-cli引入windicss報錯Can‘t resolve windi.css問題

    這篇文章主要介紹了vue3使用vue-cli引入windicss報錯Can‘t resolve windi.css問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • vue3在jsx中使用component組件方式

    vue3在jsx中使用component組件方式

    這篇文章主要介紹了vue3在jsx中使用component組件方式,具有很好的 參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • vue中@change兼容問題詳解

    vue中@change兼容問題詳解

    這篇文章主要介紹了vue中@change兼容問題詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-10-10
  • vue.js實現(xiàn)請求數(shù)據(jù)的方法示例

    vue.js實現(xiàn)請求數(shù)據(jù)的方法示例

    這篇文章主要給大家介紹了vue.js實現(xiàn)請求數(shù)據(jù)的方法示例，文中分別介紹了vue1.0和vue2.0的示例方法，需要的朋友可以參考借鑒，下面來一起看看吧。
    2017-02-02
  • vue中post請求以a=a&b=b 的格式寫遇到的問題

    vue中post請求以a=a&b=b 的格式寫遇到的問題

    這篇文章主要介紹了vue中post請求以a=a&b=b 的格式寫遇到的問題,需要的朋友可以參考下
    2018-04-04
  • Vue3中ref與toRef的區(qū)別淺析

    Vue3中ref與toRef的區(qū)別淺析

    我們知道ref可以用于創(chuàng)建一個響應(yīng)式數(shù)據(jù),而toRef也可以創(chuàng)建一個響應(yīng)式數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于Vue3中ref與toRef區(qū)別的相關(guān)資料,需要的朋友可以參考下
    2021-06-06
  • vue實現(xiàn)簡單滑塊驗證

    vue實現(xiàn)簡單滑塊驗證

    這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)簡單滑塊驗證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-08-08
  • vue實現(xiàn)一個移動端屏蔽滑動的遮罩層實例

    vue實現(xiàn)一個移動端屏蔽滑動的遮罩層實例

    本篇文章主要介紹了vue實現(xiàn)一個移動端屏蔽滑動的遮罩層實例，具有一定的參考價值，有興趣的可以了解一下
    2017-06-06
  • vue+vue-fullpage實現(xiàn)整屏滾動頁面的示例代碼(直播平臺源碼)

    vue+vue-fullpage實現(xiàn)整屏滾動頁面的示例代碼(直播平臺源碼)

    這篇文章主要介紹了vue+vue-fullpage實現(xiàn)整屏滾動頁面,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2022-06-06

最新評論