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的.animate()函数在IE6下的问题
Dec 03 Javascript
javascript数字数组去重复项的实现代码
Dec 30 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
Jul 09 Javascript
使用pjax实现无刷新更改页面url
Feb 05 Javascript
JavaScript中对JSON对象的基本操作示例
May 21 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
Jan 05 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
May 10 Javascript
使用proxy实现一个更优雅的vue【推荐】
Jun 19 Javascript
使用Angular-CLI构建NPM包的方法
Sep 07 Javascript
VUE实现图片验证码功能
Nov 18 Javascript
node静态服务器实现静态读取文件或文件夹
Dec 03 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
MySQL 日期时间函数常用总结
2012/06/12 PHP
php function用法如何递归及return和echo区别
2014/03/07 PHP
php采用curl访问域名返回405 method not allowed提示的解决方法
2014/06/26 PHP
PHP遍历XML文档所有节点的方法
2015/03/12 PHP
如何使用GDB调试PHP程序
2015/12/08 PHP
php简单实现短网址(短链)还原的方法(测试可用)
2016/05/09 PHP
CodeIgniter记录错误日志的方法全面总结
2016/05/17 PHP
JS提交并解析后台返回的XML的代码
2008/11/03 Javascript
jquery插件制作简单示例说明
2012/02/03 Javascript
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
2014/03/17 Javascript
Iframe实现跨浏览器自适应高度解决方法
2014/09/02 Javascript
js实现从数组里随机获取元素
2015/01/12 Javascript
详解AngularJS Filter(过滤器)用法
2015/12/28 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
SVG动画vivus.js库使用小结(实例代码)
2017/09/14 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
2019/12/17 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
js实现筛选功能
2020/11/24 Javascript
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
Python使用xlrd模块操作Excel数据导入的方法
2015/05/26 Python
PyTorch上搭建简单神经网络实现回归和分类的示例
2018/04/28 Python
python生成密码字典的方法
2018/07/06 Python
Python设计模式之迭代器模式原理与用法实例分析
2019/01/10 Python
10行Python代码计算汽车数量的实现方法
2019/10/23 Python
python读写文件write和flush的实现方式
2020/02/21 Python
python如何写try语句
2020/07/14 Python
CSS3 实现发光边框特效
2020/11/11 HTML / CSS
Expedia挪威官网:酒店、机票和租车
2018/03/03 全球购物
毕业生就业推荐表导师评语
2014/12/31 职场文书
欠款纠纷起诉状
2015/05/19 职场文书
《这片土地是神圣的》教学反思
2016/02/16 职场文书
2016年学校“3.12”植树节活动总结
2016/03/16 职场文书
创业的9条正确思考方式
2019/08/26 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书
奥特曼十大神器:奥特手镯在榜,第一是贝利亚的神器
2022/03/18 日漫