基于vue+openlayer實(shí)現(xiàn)地圖聚合和撒點(diǎn)效果
更新時(shí)間：2021年09月15日 11:00:42 作者：Ponnenult
Openlayers 是一個(gè)模塊化、高性能并且功能豐富的WebGIS客戶(hù)端的JavaScript包，用于顯示地圖及空間數(shù)據(jù)，并與之進(jìn)行交互，具有靈活的擴(kuò)展機(jī)制，本文給大家介紹vue+openlayer實(shí)現(xiàn)地圖聚合效果和撒點(diǎn)效果，感興趣的朋友一起看看吧
前言：
openlayer是目前我們gis常用的一款開(kāi)源的，并且反饋都特別好的軟件了，像之前的ol3, 風(fēng)靡一時(shí)，地圖實(shí)現(xiàn)也很簡(jiǎn)單，很實(shí)用，目前vue中使用地圖也是非常多的，那么如果在vue中引入openlayer并且實(shí)現(xiàn)地圖撒點(diǎn)效果，甚至是更深層的地圖聚合效果呢，本文來(lái)分享下vue中地圖的實(shí)現(xiàn)。目前openlayer的 5 系列，6.5 都是通用的，經(jīng)測(cè)試可用。
實(shí)現(xiàn)效果：
1、聚合效果：
2、撒點(diǎn)效果：
具體實(shí)現(xiàn)步驟：
1、項(xiàng)目中引入openlayer
cnpm i ol --save
2、配置(按需引入)
（1）新建一個(gè)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、實(shí)現(xiàn)地圖展示
mounted：
mounted() {
this.initMap();
},
methods：我這里提供了兩種地圖的模板，都是在線的，內(nèi)網(wǎng)的話(huà)換成你自己的地址
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
}),
});
//點(diǎn)擊提示當(dāng)前的坐標(biāo)
this.map.on(
"click",
function (evt) {
alert(evt.coordinate[0] + ";" + evt.coordinate[1]);
},
map
);
}
4、撒點(diǎn)功能
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
}),
});
//點(diǎn)擊提示當(dāng)前的坐標(biāo)
this.map.on(
"click",
function (evt) {
alert(evt.coordinate[0] + ";" + evt.coordinate[1]);
},
map
);
//我這里是寫(xiě)的固定數(shù)據(jù)點(diǎn)，所以可以直接渲染完地址直接調(diào)用
this.addMarker()
},
addMarker(){
//創(chuàng)建畫(huà)板
let sourceArr = new SourceVec({});
//定義隨機(jī)數(shù)據(jù)，這里隨機(jī)了200個(gè)
for (var i = 1; i <= 200; i++) {
//點(diǎn)的坐標(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,
})
//地圖添加畫(huà)板
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
}),
});
//點(diǎn)擊提示當(dāng)前的坐標(biāo)
this.map.on(
"click",
function (evt) {
alert(evt.coordinate[0] + ";" + evt.coordinate[1]);
},
map
);
//我這里是寫(xiě)的固定數(shù)據(jù)點(diǎn)，所以可以直接渲染完地址直接調(diào)用
this.addMarker()
},
addMarker(){
//創(chuàng)建畫(huà)板
let sourceArr = new SourceVec({});
//定義隨機(jī)數(shù)據(jù)，這里隨機(jī)了200個(gè)
for (var i = 1; i <= 200; i++) {
//點(diǎn)的坐標(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層-聚合點(diǎn)-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'
})
})
})
}
}
})
//地圖添加畫(huà)板
this.map.addLayer(
layer
);
}
參考文獻(xiàn)：
js中使用openlayer: https://blog.csdn.net/HerryDong/article/details/110951955
到此這篇關(guān)于vue+openlayer實(shí)現(xiàn)地圖聚合效果和撒點(diǎn)效果的文章就介紹到這了,更多相關(guān)vue openlayer地圖聚合內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
基于Vue實(shí)現(xiàn)簡(jiǎn)單的權(quán)限控制
這篇文章主要為大家學(xué)習(xí)介紹了如何基于Vue實(shí)現(xiàn)簡(jiǎn)單的權(quán)限控制，文中的示例代碼講解詳細(xì)，具有一定的參考價(jià)值，需要的小伙伴可以了解一下2023-07-07
vue.js+element-ui的基礎(chǔ)表單實(shí)例代碼
這篇文章主要介紹了vue.js+element-ui的基礎(chǔ)表單實(shí)例代碼,技術(shù)棧即html+vue.js+element-ui,而使用它們的方法也很簡(jiǎn)單,引入對(duì)應(yīng)的js和css文件即可,需要的朋友可以參考下2024-03-03
Vue高級(jí)組件之函數(shù)式組件的使用場(chǎng)景與源碼分析
Vue提供了一種稱(chēng)為函數(shù)式組件的組件類(lèi)型,用來(lái)定義那些沒(méi)有響應(yīng)數(shù)據(jù),也不需要有任何生命周期的場(chǎng)景,它只接受一些props來(lái)顯示組件,下面這篇文章主要給大家介紹了關(guān)于Vue高級(jí)組件之函數(shù)式組件的使用場(chǎng)景與源碼分析的相關(guān)資料,需要的朋友可以參考下2021-11-11
vue使用axios訪問(wèn)本地json文件404問(wèn)題及解決
這篇文章主要介紹了vue使用axios訪問(wèn)本地json文件404問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
vue3 el-form-item如何自定義label標(biāo)簽內(nèi)容
這篇文章主要介紹了vue3 el-form-item如何自定義label標(biāo)簽內(nèi)容問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了基于iview的router常用控制方式,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
Vue封裝DateRangePicker組件流程詳細(xì)介紹
在后端管理項(xiàng)目中使用vue來(lái)進(jìn)行前端項(xiàng)目的開(kāi)發(fā)，但我們都知道Vue實(shí)際上無(wú)法監(jiān)聽(tīng)由第三方插件所引起的數(shù)據(jù)變化。也無(wú)法獲得JQuery這樣的js框架對(duì)元素值的修改的。而日期控件daterangepicker又基于JQuery來(lái)實(shí)現(xiàn)的2022-11-11
詳解Vue微信公眾號(hào)開(kāi)發(fā)踩坑全記錄
本篇文章主要介紹了詳解Vue微信公眾號(hào)開(kāi)發(fā)踩坑全記錄，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
Vue鼠標(biāo)滾輪滾動(dòng)切換路由效果的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue鼠標(biāo)滾輪滾動(dòng)切換路由效果的實(shí)現(xiàn)方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-08-08
vue elementui table編輯表單時(shí)彈框增加編輯明細(xì)數(shù)據(jù)的實(shí)現(xiàn)
在Vue項(xiàng)目中,通過(guò)使用Element UI框架實(shí)現(xiàn)表單及其明細(xì)數(shù)據(jù)的新增和編輯操作,主要通過(guò)彈窗形式進(jìn)行明細(xì)數(shù)據(jù)的增加和編輯,有效提升用戶(hù)交互體驗(yàn),本文詳細(xì)介紹了相關(guān)實(shí)現(xiàn)方法和代碼,適合需要在Vue項(xiàng)目中處理復(fù)雜表單交互的開(kāi)發(fā)者參考2024-10-10