vue集成openlayers加载geojson并实现点击弹窗教程


Posted in Javascript onSeptember 24, 2020

本文实例为大家分享了vue+openlayers加载geojson并实现点击弹窗教程,供大家参考,具体内容如下

第一步:安装vue-cli

cnpm install -g @vue/cli

第二步:新建一个项目

1.新建项目 (vue-openlayers为项目名),并选择default模版

vue create vue-openlayers

2.安装openlayers

cnpm i -S ol

第三步:写业务代码

1.删除掉HelloWorld.vue 新建 olmap.vue组件

components/olmap.vue代码:

<template>
 <div id="map" ref="rootmap">
  <div class="vm">
  <!-- <h2 class="h-title">弹窗 popup</h2> -->
  
  <!-- 弹窗元素 -->
  <div id="popup" class="ol-popup" ref="popup">
   <a href="#" id="popup-close" class="ol-popup-closer" @click="closePopup"></a>
   <div class="popup-content">
   <table id="routeBox">
    <tbody>
     <tr>
     </tr>
     <tr>
      <td>所在图层:</td>
      <td>{{layerName}}</td>
     </tr>
     <tr>
      <td>handle:</td>
      <td>{{handle}}</td>
     </tr>
     <tr>
      <td>块名称:</td>
      <td>{{blockName}}</td>
     </tr>
    </tbody>
   </table>
   </div>
  </div>
  </div>
 </div>
</template>

<script>
import "ol/ol.css";
import { Map, View } from "ol";
// import TileLayer from "ol/layer/Tile";

import VectorLayer from "ol/layer/Vector";

// import OSM from "ol/source/OSM";
import VectorSource from "ol/source/Vector";
// import Feature from "ol/Feature";
import GeoJSON from "ol/format/GeoJSON";
import Style from "ol/style/Style";
import Stroke from "ol/style/Stroke";
import Fill from "ol/style/Fill";
// import Select from "ol/interaction/Select"
// import {bbox} from 'ol/loadingstrategy';
import Point from "ol/geom/Point";
import { transform } from "ol/proj";
import Text from "ol/style/Text";
import Overlay from "ol/Overlay";
export default {
 data() {
 return {
  map: null,
  allFeatures: null,
  layerName: null,
  blockName: null,
  handle: null,
  overlayer: null,
 };
 },
 mounted() {
 this.initMap()
 },
 methods: {
 initMap(){
  var extent = [11285.07103919199,20056.574012374178,61290.31172946711,33996.47243386325];
  var wfsVectorSource = new VectorSource({
  url: 'http://localhost:8082/geoserver/workhome/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=workhome%3A28f&outputFormat=application%2Fjson',
  format: new GeoJSON(),
  // features: Feature,
  // strategy: bbox
  })

  var wfsVectorLayer = new VectorLayer({
  style: new Style({
   stroke: new Stroke({
    // color: 'blue',
    color: 'rgba(30,144,255)',
    width: 3
   }),
   fill: new Fill({
    color: 'rgba(0, 0, 255, 0.1)'
   })
  }),
  source: wfsVectorSource,
  visible:true,
  })
  
  this.map = new Map({
  target: "map",
  layers: [
   wfsVectorLayer
  ],
  view: new View({
   center: [31955.4551374715, 28165.253430237015],
   projection: 'EPSG:3857',
   zoom: 14
  }),
  });
  // this.map.addLayer()
  this.map.getView().fit(extent, this.map.getSize());
  // this.map.getView().setZoom(14);
  var that = this

  // 2. 创建Overlay图层
  that.overlayer = new Overlay({
   element: this.$refs.popup, // 弹窗标签,在html里
   autoPan: true, // 如果弹窗在底图边缘时,底图会移动
   autoPanAnimation: { // 底图移动动画
   duration: 250
   }
  })

  if(timer){
   clearInterval(timer)
  }

  var timer = setTimeout(() =>{
   var fs = wfsVectorSource.getFeatures()

   that.allFeatures = fs

   console.log('allFeatures',that.allFeatures)
  },3000);

 

  //Vector第一种单击事件
  // var selectSingleClick = new Select();
  // this.map.addInteraction(selectSingleClick);

  // selectSingleClick.on('select', function(e) {
  //  // var p = e.mapBrowserEvent.coordinate
  //  // console.log('p',p)
  //  console.log(e)
  //  var features=e.target.getFeatures().getArray();
  //  if (features.length>0)
  //  {
  //   console.log('length',features.length)
  //   var feature=features[0];
  //   console.log('feature',feature)
  //  }
  // })

  //Vector第二种单击事件
  this.map.on('singleclick',mapClick);

  function mapClick(e){
   var p = e.coordinate
   var p1 = new Point(transform(p, 'EPSG:3857', 'EPSG:4326')).getCoordinates();
   console.log(p)
   console.log('this.allFeatures.length',that.allFeatures)
   for(let j=0;j<that.allFeatures.length-1;j++){
    var b1 = new Point(transform(that.allFeatures[j].getGeometry().getClosestPoint(p), 'EPSG:3857', 'EPSG:4326')).getCoordinates();
    var b2 = new Point(transform(that.allFeatures[j+1].getGeometry().getClosestPoint(p), 'EPSG:3857', 'EPSG:4326')).getCoordinates();
    var x1 = that.getDistance(p1[0],p1[1],b1[0],b1[1]);
    var x2 = that.getDistance(p1[0],p1[1],b2[0],b2[1]);
    let fea = that.allFeatures[j+1]
    if(x1<x2){
     that.allFeatures[j+1] = that.allFeatures[j]
     that.allFeatures[j] = fea
    }
   }
   
   let a = that.allFeatures[that.allFeatures.length-1]
   that.overlayer.setPosition(p)
   that.map.addOverlay(that.overlayer)
   a.setStyle(that.polygonStyle())
   that.map.getView().setCenter(p)
   console.log(a)
  }

 },
 // 关闭弹窗
 closePopup: function(){
  console.log(this)
  // 把弹窗位置设置为undefined,并清空坐标数据
  this.overlayer.setPosition(undefined)
  this.currentCoordinate = null
 },
 //计算两点之间距离
 getDistance: (lat1, lng1, lat2, lng2)=>{

  lat1 = lat1 || 0;

  lng1 = lng1 || 0;

  lat2 = lat2 || 0;

  lng2 = lng2 || 0;

  var rad1 = lat1 * Math.PI / 180.0;

  var rad2 = lat2 * Math.PI / 180.0;

  var a = rad1 - rad2;

  var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;

  var r = 6378137;

  return r * 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) * Math.cos(rad2) * Math.pow(Math.sin(b / 2), 2)))

 },
 //设置高亮样式
 polygonStyle: ()=>{
  var style = new Style({
   fill: new Fill({ //矢量图层填充颜色,以及透明度
    color: 'rgba(220, 20, 60, 1)'
   }),
   stroke: new Stroke({ //边界样式
    lineDash:[6],//注意:该属性为虚线效果,在IE10以上版本才有效果
    color: '#FF0000',
    width: 2
   }),
   text: new Text({ //文本样式
    font: '20px Verdana,sans-serif',
    // text:feature.attr.dmaName,
    fill: new Fill({
     color: '#FF0000'
    })
   })
  });
  return style;
 }
 }
};
</script>

<style>
#map{height:100%;}
/*隐藏ol的一些自带元素*/
.ol-attribution,.ol-zoom { display: none;}


.ol-popup {
 position: absolute;
 background-color: #fff;
 -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
 filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
 padding: 15px;
 border-radius: 10px;
 border: 1px solid #cccccc;
 bottom: 12px;
 left: -50px;
 min-width: 280px;
}
.ol-popup:after,
.ol-popup:before {
 top: 100%;
 border: solid transparent;
 content: " ";
 height: 0;
 width: 0;
 position: absolute;
 pointer-events: none;
}
.ol-popup:after {
 border-top-color: #fff;
 border-width: 10px;
 left: 48px;
 margin-left: -10px;
}
.ol-popup:before {
 border-top-color: #cccccc;
 border-width: 11px;
 left: 48px;
 margin-left: -11px;
}
.ol-popup-closer {
 text-decoration: none;
 position: absolute;
 top: 2px;
 right: 8px;
}
.ol-popup-closer:after {
 content: "✖";
}
</style>

App.vue代码:

<template>
 <div id="app">
 <olmap />
 </div>
</template>

<script>
import olmap from './components/olmap.vue'

export default {
 name: 'app',
 components: {
 olmap
 }
}
</script>

<style>
*{padding:0; margin:0;}
html,body{
 height: 100%;
}
#app {
 height: 100%;
}
</style>

2.运行

npm run serve

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery制作迷你背词汇工具
Jul 27 Javascript
javascript通过元素id和name直接取得元素的方法
Apr 28 Javascript
javascript实现数字倒计时特效
Mar 30 Javascript
网页挂马方式整理及详细介绍
Nov 03 Javascript
手机软键盘弹出时影响布局的解决方法
Dec 15 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 Javascript
JavaScript的六种继承方式(推荐)
Jun 26 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 Javascript
react结合bootstrap实现评论功能
May 30 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
Jul 26 Javascript
在vue中嵌入外部网站的实现
Nov 13 Javascript
Vue+Openlayers自定义轨迹动画
Sep 24 #Javascript
vue使用openlayers实现移动点动画
Sep 24 #Javascript
Openlayers实现点闪烁扩散效果
Sep 24 #Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 24 #Javascript
vue3.0生命周期的示例代码
Sep 24 #Javascript
js 将多个对象合并成一个对象 assign方法的实现
Sep 24 #Javascript
Vue3不支持Filters过滤器的问题
Sep 24 #Javascript
You might like
AM/FM收音机的安装与调试
2021/03/02 无线电
asp和php下textarea提交大量数据发生丢失的解决方法
2008/01/20 PHP
Codeigniter操作数据库表的优化写法总结
2014/06/12 PHP
PHP使用Session遇到的一个Permission denied Notice解决办法
2014/07/30 PHP
CodeIgniter框架URL路由总结
2014/09/03 PHP
PHP时间相关常用函数用法示例
2020/06/03 PHP
Javascript 入门基础学习
2010/03/10 Javascript
JavaScript对象创建及继承原理实例解剖
2013/02/28 Javascript
JS中FRAME的操作问题实例分析
2014/10/21 Javascript
JavaScript获取当前网页最后修改时间的方法
2015/04/03 Javascript
JQuery插件jcarousellite的参数中文说明
2015/05/11 Javascript
JS模态窗口返回值兼容问题的完美解决方法
2016/05/28 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
JS常用正则表达式总结【经典】
2017/05/12 Javascript
基于Bootstrap分页的实例讲解(必看篇)
2017/07/04 Javascript
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
node中的session的具体使用
2018/09/14 Javascript
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
leaflet加载geojson叠加显示功能代码
2020/02/21 Javascript
[05:04]完美世界携手游戏风云打造 卡尔工作室地图界面篇
2013/04/23 DOTA
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
在Pycharm中项目解释器与环境变量的设置方法
2018/10/29 Python
pandas读取csv文件,分隔符参数sep的实例
2018/12/12 Python
Python提取支付宝和微信支付二维码的示例代码
2019/02/15 Python
Python面向对象程序设计多继承和多态用法示例
2019/04/08 Python
Python使用mongodb保存爬取豆瓣电影的数据过程解析
2019/08/14 Python
Python单元测试与测试用例简析
2019/11/09 Python
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
潘婷洗发水广告词
2014/03/14 职场文书
我的中国梦演讲稿400字
2014/08/19 职场文书
教师评职称工作总结2015
2015/04/20 职场文书
2019奶茶店创业计划书范本,值得你借鉴
2019/08/14 职场文书
Mysql 用户权限管理实现
2021/05/25 MySQL
windows server 2016 域环境搭建的方法步骤(图文)
2022/06/25 Servers