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学习笔记之jQuery选择器的使用
Dec 22 Javascript
js Event对象的5种坐标
Sep 12 Javascript
js正则表达式匹配数字字母下划线等
Apr 14 Javascript
Javascript中的getUTCDay()方法使用详解
Jun 10 Javascript
简单纯js实现点击切换TAB标签实例
Aug 23 Javascript
JS常见算法详解
Feb 28 Javascript
Vuejs中使用markdown服务器端渲染的示例
Nov 22 Javascript
Vue2.5通过json文件读取数据的方法
Feb 27 Javascript
vue 指令之气泡提示效果的实现代码
Oct 18 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
Apr 02 Javascript
javascript实现点击星星小游戏
Dec 24 Javascript
基于JavaScript实现表格隔行换色
May 08 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
php使用cookie显示用户上次访问网站日期的方法
2015/01/26 PHP
php通过function_exists检测函数是否存在的方法
2015/03/18 PHP
PHP DB 数据库连接类定义与用法示例
2019/03/11 PHP
Laravel修改验证提示信息为中文的示例
2019/10/23 PHP
让iframe子窗体取父窗体地址栏参数(querystring)
2009/10/13 Javascript
javaScript 关闭浏览器 (不弹出提示框)
2010/01/31 Javascript
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
2015/01/13 Javascript
详解JavaScript中的every()方法
2015/06/08 Javascript
js实现Select列表内容自动滚动效果代码
2015/08/20 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
2017/07/22 jQuery
echarts学习笔记之图表自适应问题详解
2017/11/22 Javascript
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
vue两个组件间值的传递或修改方式
2018/07/04 Javascript
少女风vue组件库的制作全过程
2019/05/15 Javascript
小程序如何写动态标签的实现方法
2020/02/05 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
[12:21]VICI vs TNC (BO3)
2018/06/07 DOTA
Python中的单继承与多继承实例分析
2018/05/10 Python
Sanic框架基于类的视图用法示例
2018/07/18 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
详解Python 中sys.stdin.readline()的用法
2019/09/12 Python
python matplotlib如何给图中的点加标签
2019/11/14 Python
Python 实现Numpy中找出array中最大值所对应的行和列
2019/11/26 Python
解决pytorch-yolov3 train 报错的问题
2020/02/18 Python
TensorFlow2.X使用图片制作简单的数据集训练模型
2020/04/08 Python
python 实现仿微信聊天时间格式化显示的代码
2020/04/17 Python
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
Staples加拿大官方网站:办公用品一站式采购
2016/09/25 全球购物
英文版区域经理求职信
2013/10/23 职场文书
网页设计个人找工作求职信
2013/11/28 职场文书
致全体运动员广播稿
2014/02/01 职场文书
企业党员公开承诺书
2014/03/26 职场文书
安全生产先进个人总结
2015/02/15 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书