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