(编辑:jimmy 日期: 2024/10/30 浏览:2)
本文实例为大家分享了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"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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。