基于vue+openlayer实现地图聚合和撒点效果

目录
  • 前言:
  • 实现效果:
    • 1、聚合效果:
    • 2、撒点效果:
  • 具体实现步骤:
    • 1、项目中引入openlayer
    • 2、配置(按需引入)
    • 3、实现地图展示
    • 4、撒点功能
    • 5、聚合效果

前言:

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地图聚合内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-09-13

Vue+Openlayer批量设置闪烁点的实现代码(基于postrender机制)

效果图: 实现代码: <template> <div id="map" style="width: 100vw; height: 100vh" /> </template> <script> import "ol/ol.css"; import TileLayer from "ol/layer/Tile"; import VectorLayer from "ol/lay

VUE + OPENLAYERS实现实时定位功能

前言 本系列文章介绍一个简单的实时定位示例,示例的组成主要包括: 服务后端,使用 Java 语言编写,模拟生成 GeoJSON 数据. 前端展示,使用 Vue + OpenLayers ,负责定时向后端服务请求 GeoJSON 数据,并在以标签的形式展现定位数据. 实现的效果: 一.定义标签样式 var image = new CircleStyle({ radius: 5, fill: new Fill({ color: "rgba(255, 0, 0, 1)" }), stroke

vue使用openlayers实现移动点动画

本文实例为大家分享了vue使用openlayers实现移动点动画的具体代码,供大家参考,具体内容如下 做项目时,本来打算仿照官网的Example中动画制作,引入vue中后,发现它引用的库函数一直报错,最后我去vue中安装的依赖库中去查找这个函数,果然没有.也就是说官方例子使用的库和我安装的OL库存在一定差异. 后来我还是用笨方法去解决了,最终效果如下: 总体思路是将移动目标实例一个Overlay对象,然后将如图5个经纬度点没两点之间分割成多个(200个),之后通过定时器不断setPositon.

Vue+Openlayer使用modify修改要素的完整代码

Vue+Openlayer使用modify修改要素,具体内容如下所示: import { Modify } from "ol/interaction"; 可自动捕捉 可修改点.线.面.不用自己声明要修改的要素类型 直接修改要素 核心代码: // 修改要素核心代码 modifyFeature() { this.modify = new Modify({ source: this.lineStringLayer.getSource(), }); this.map.addInteractio

vue-openlayers实现地图坐标弹框效果

本文实例为大家分享了vue-openlayers实现地图坐标弹框的具体代码,供大家参考,具体内容如下 openlayers 这个效果是点击地图,弹出坐标信息. 点击地图边缘时,底图会跟着移动,使弹窗能完整显示出来. <template> <div class="vm"> <h2 class="h-title">弹窗 popup</h2> <div id="map" class="ma

vue项目中仿element-ui弹框效果的实例代码

最近要写个弹框,发现element-ui弹框样式还可以,就copy下来改吧改吧.也不分步骤详细介绍了直接上代码. 在组件目录中新建文件夹message 我把message目录里的东西给大家贴出来 message文件夹 src文件夹 index.js import Message from './src/main.js'; export default Message; mian.js import Vue from 'vue'; import Main from './main.vue'; le

Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)

1. 实现效果 2.实现原理 在父组件中点击编辑按钮,将当前点击对象的id传给子组件,子组件根据id修改相应的内容 父组件中代码: //放置编辑按钮的位置 <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" v-on:click="edit(manage.id)"><i class="layui-icon"><

Vue自定义render统一项目组弹框功能

一.本文收获 pick 二.为什么要统一封装弹框: 要封装成怎样 通过举例常规弹框的写法.我们可以体会到,通常要弹出一个页面,需要创建一个页面 normalDialog.vue 包裹 dialogBody.vue (弹框主体):需要 parent.vue 设置flag控制弹框显示隐藏, normalDialog.vue 关闭的时候设置 parent.vue 对应 flag .缺点: 流程繁杂.配置繁琐.不灵活.样式不统一和参数传递麻烦等 .如果一个项目弹框较多的时候,弊端将会更明显,大量的 is

ionic 自定义弹框效果

在工作过程中往往需要自定义的弹框.因此,将内容整理如下,以方便学习.若有不当之处,敬请斧正! 思路 利用ionic自带的弹框$ionicPopup. 隐藏头部和尾部,只保留body部分 在利用templateUrl或者template,引入需要的模板 代码 $ionicPopup.show({ cssClass:'team-popup', template: "<div class='list popup-form'>" + "<div class = 'f

Vue.js仿Select下拉框效果

本文实例为大家分享了Vue.js仿Select下拉框效果的具体代码,供大家参考,具体内容如下 废话少说,直接上图上代码: 效果图: HEML: <div id="demo"> <h2 class="title">自定义下拉框</h2> <imitate-select h2-value="第一个 Select" v-bind:list="list1"></imitate-se

vue项目中使用vue-layer弹框插件的方法

vue-layer弹框插件 安装 npm i --save vue-layer 引用 import layer from 'vue-layer' Vue.prototype.$layer = layer(Vue); 参数说明 { type: 0, //0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层) title: '信息', content: '', area: 'auto', offset: 'auto', icon: -1, btn: '确定', time: 0

Android 实现抖音头像底部弹框效果的实例代码

布局文件 activity_test.xml <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"

微信小程序实现弹框效果

本文实例为大家分享了微信小程序实现弹框效果的具体代码,供大家参考,具体内容如下 先上代码 wxml部分: <view class='top' bindtap='powerDrawer' data-statu="open" data-num='300'> <text>向上弹起</text> </view> <view class='top' bindtap='powerDrawer' data-statu="open&quo

用jquery中插件dialog实现弹框效果实例代码

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu