基于vue+openlayer实现地图聚合和撒点效果
更新时间：2021年09月15日 11:00:42 作者：Ponnenult
Openlayers 是一个模块化、高性能并且功能丰富的WebGIS客户端的JavaScript包，用于显示地图及空间数据，并与之进行交互，具有灵活的扩展机制，本文给大家介绍vue+openlayer实现地图聚合效果和撒点效果，感兴趣的朋友一起看看吧
前言：
openlayer是目前我们gis常用的一款开源的，并且反馈都特别好的软件了，像之前的ol3, 风靡一时，地图实现也很简单，很实用，目前vue中使用地图也是非常多的，那么如果在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）js部分
引入相关配置文件，这是我的所有引入，你可以根据你的情况删一删
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、实现地图展示
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
);
//我这里是写的固定数据点，所以可以直接渲染完地址直接调用
this.addMarker()
},
addMarker(){
//创建画板
let sourceArr = new 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}",
// }),
// }),
//初始化背景
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
);
//我这里是写的固定数据点，所以可以直接渲染完地址直接调用
this.addMarker()
},
addMarker(){
//创建画板
let sourceArr = new 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);
}
//添加进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地图聚合内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue项目中按需引入element-ui的正确实现方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要为大家详细介绍了vue递归实现树形组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
Vue ElementUI this.$confirm async await封
这篇文章主要介绍了Vue ElementUI this.$confirm async await封装方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
VUE前端从后台请求过来的数据进行转换数据结构操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了在Vue中创建可重用的 Transition,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-06-06
下面小编就为大家分享一篇Vue的轮播图组件实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
在Web开发中，有时候需要对网页进行截图或截屏，Vue作为一个流行的JavaScript框架，提供了一些工具和库，可以方便地实现网页截图和截屏功能，本文将介绍如何在Vue中进行网页截图和截屏,需要的朋友可以参考下2023-06-06
vue框架提供了前端开发组件的思想，可以通过组件来组合成一个完整的页面，都是随着组件数量原来越多，组件之间难免需要相互通信。本文将为大家介绍四种组件间的通信方式，需要的可以参考一下2022-01-01
这篇文章主要介绍了vue-cli 配置资源引用的绝对路径的问题，本文通过图文实例相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-09-09
本篇文章主要介绍了vuejs响应用户事件（如点击），通过vuejs响应用户事件的技巧，具有一定的参考价值，有兴趣的小伙伴们可以参考一下。2017-03-03
最新评论