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 相关文章推荐
关于实现代码语法标亮 dp.SyntaxHighlighter
Feb 02 Javascript
Javascript表格翻页效果的具体实现
Oct 05 Javascript
node.js下when.js 的异步编程实践
Dec 03 Javascript
BootStrap按钮标签及基本样式
Nov 23 Javascript
ES6通过babel转码使用webpack使用import关键字
Dec 13 Javascript
详解Angular的数据显示优化处理
Dec 26 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
Mar 14 Javascript
vue2.0 如何在hash模式下实现微信分享
Jan 22 Javascript
微信小程序 wxParse插件显示视频问题
Sep 27 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
Jun 16 Javascript
vue实现数字滚动效果
Jun 29 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
学习ExtJS 访问容器对象
2009/10/07 Javascript
一个原生的用户等级的进度条
2010/07/03 Javascript
基于Jquery的简单图片切换效果
2011/01/06 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
2014/05/05 Javascript
jQuery实现统计复选框选中数量
2014/11/24 Javascript
js实现图片和链接文字同步切换特效的方法
2015/02/20 Javascript
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
jquery实现两边飘浮可关闭的对联广告
2015/11/27 Javascript
angularjs使用directive实现分页组件的示例
2017/02/07 Javascript
通过命令行生成vue项目框架的方法
2017/07/12 Javascript
js 只比较时间大小的实例
2017/10/26 Javascript
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
微信小程序picker组件两列关联使用方式
2020/10/27 Javascript
[04:16]DOTA2全国高校联赛16强抽签
2018/05/02 DOTA
使用Python进行新浪微博的mid和url互相转换实例(10进制和62进制互算)
2014/04/25 Python
Python自动调用IE打开某个网站的方法
2015/06/03 Python
Python简单实现网页内容抓取功能示例
2018/06/07 Python
Python设计模式之迭代器模式原理与用法实例分析
2019/01/10 Python
Python操作远程服务器 paramiko模块详细介绍
2019/08/07 Python
Python中url标签使用知识点总结
2020/01/16 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
python库skimage给灰度图像染色的方法示例
2020/04/27 Python
Python numpy大矩阵运算内存不足如何解决
2020/11/19 Python
印度领先的在线时尚商店:Koovs
2016/08/28 全球购物
MVMT手表官方网站:时尚又实惠的高品质手表
2016/12/04 全球购物
美国知名保健品网站:LuckyVitamin(支持中文)
2017/08/09 全球购物
解释一下抽象方法和抽象类
2016/08/27 面试题
护理专科毕业生自荐书范文
2014/02/19 职场文书
党员带头倡议书
2015/04/29 职场文书
介绍信范文大全
2015/05/07 职场文书
班主任开场白
2015/06/01 职场文书
遗嘱格式范本
2015/08/07 职场文书
Python 流媒体播放器的实现(基于VLC)
2021/04/28 Python
浅谈Python 中的复数问题
2021/05/19 Python
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js