vue集成openlayers加载geojson并实现点击弹窗教程本⽂实例为⼤家分享了vue+openlayers加载geojson并实现点击弹窗教程，供⼤家参考，具体内容如下第⼀步：安装vue-clicnpm install -g @vue/cli第⼆步：新建⼀个项⽬1.新建项⽬（vue-openlayers为项⽬名）,并选择default模版vue create vue-openlayers2.安装openlayerscnpm 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.0710*******,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 = fsconsole.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.coordinatevar 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;}}};<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以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
