WebGL--vue+openlayers实现覆盖物＋popup

前言

最近公司有需求，需要用到openlayers实现在地图上面绘制多边形，并且轨迹回放，实现弹出框，国内资料太少了，所以在这里放上openlayers的学习教程以及这个案例的代码

基础知识的准备

openlayers中文文档:点击这里去中文文档
openlayers常用的API:点击这里去API总结处
openlayers官网：官网
//提示：用Edge可以对这个英文网站进行翻译

栗子：vue+openlayers实现覆盖物＋popup

效果:

<!--  -->
<template><div class="showOverlay"><div id="map"></div><!-- 提示框 --><div id="popup" ref="popupRef"></div></div>
</template><script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
//引入主要组件
import { Feature, Map, Overlay, View } from "ol";
//引入layer
import ImageLayer from "ol/layer/Image";
import VectorLayer from "ol/layer/Vector";
//引入source
import Static from "ol/source/ImageStatic";
import VectorSource from "ol/source/Vector";
//其他
import Projection from "ol/proj/Projection";
import { getCenter } from "ol/extent";
import { Point } from "ol/geom";
import { Style, Icon } from "ol/style";
//import { Style, Icon, Text, Fill, Stroke } from "ol/style";
//导入图片
import mapImage from "@/assets/img/map1.jpg"; //底图
import personImg from "@/assets/img/anchor.png";export default {//import引入的组件需要注入到对象中才能使用components: {},data() {//这里存放数据return {map: null, //地图//   imgW: 0, //图片的宽高//   imgH: 0,persons: [], //人员features: [], //覆盖物feature: null,vectorource: new VectorSource(), //矢量数据};},//计算属性 类似于data概念computed: {},//监控data中的数据变化watch: {persons(newVal) {if (newVal) {this.setFeature();}},},//方法集合methods: {//初始化地图initMap() {//限制范围let extent = [0, 0, 2560, 1920];//投影let projection = new Projection({//SRS 标识符代码，例如EPSG:4326code: "xkcd-image",//   单位。必需，除非 定义 PROJ4 投影。codeunits: "pixels",//SRS 的有效性范围。extent: extent,});//layers--图片底图let mapLayer = new ImageLayer({source: new Static({url: mapImage,projection: projection,imageExtent: extent,}),});//layer--矢量图层let featureLayer = new VectorLayer({source: this.vectorource,});//创建地图this.map = new Map({target: "map",layers: [mapLayer, featureLayer],view: new View({//配置投影projection: projection,//配置中心center: getCenter(extent),//配置zoomzoom: 2,//配置最大zoommaxZoom: 10,}),});//添加覆盖物let overlay = new Overlay({//OverLay元素element: document.querySelector("#popup"),//跟随平移autoPan: true,//偏移量--数组第一个元素为水平偏移，正右负左；数组第二个元素为垂直，正下负上；offset: [0, 2],//覆盖物位置// position: [0, 0],});this.map.addOverlay(overlay);//给map绑定事件this.map.on("pointermove", this.showPopup);},//hover显示覆盖物showPopup(e) {console.log(e);//   let that = this; //vue实例let oPopup = this.$refs.popupRef; //获取到popup元素//获取到图层上的feature  (pixel:像素,callback(f:根据像素返回的feature))let feature = this.map.forEachFeatureAtPixel(e.pixel, (f) => f);//   console.log(feature);if (feature) {// console.log(feature.getProperties());// 把对应的人的信息在popup中展示出来// console.log("ren", this.persons);this.persons.filter((item) => {if (item.name == feature.getProperties().name) {oPopup.innerHTML = `<p>姓名:${item.name}</p>`;// 设置popup的位置this.map.getOverlays().array_[0].setPosition(e.coordinate);}});} else {this.map.getOverlays().array_[0].setPosition(undefined);}},//设置feature人setFeature() {//   let that = this; //vue实例//   this.features = [];// this.map.getLayers();清除掉原本矢量图上的source  that.vectorSource.clear();//   this.vectorource.clear();//添加每个featurethis.persons.map((item) => {this.feature = new Feature({geometry: new Point([item.x, item.y]),name: item.name,});//设置feature的样式(使用锚点)this.feature.setStyle(new Style({image: new Icon({//设置icon的锚,默认是中心[0.5,0.5]anchor: [0, 1],//设置icon的图片src: personImg,}),// text: new Text({//   // 位置//   textAlign: "center",//   // 基准线//   textBaseline: "middle",//   // 文字样式//   font: "normal 20px 微软雅黑",//   // 文本内容//   text: item.name,//   // 文本填充样式（即文字颜色）//   fill: new Fill({ color: "#aa3300" }),//   stroke: new Stroke({ color: "#ffcc33", width: 2 }),// }),}));//添加每个feature到features数组中this.features.push(this.feature);});//将feature添加到矢量图层去this.vectorource.addFeatures(this.features);},},beforeCreate() {}, //生命周期 - 创建之前//生命周期 - 创建完成（可以访问当前this实例）created() {//在此周期给persons添加数据this.persons = [{ id: 1, name: "点-1", x: 497.08, y: 187.88, z: 0 },{ id: 2, name: "点-2", x: 725.32, y: 565.88, z: 0 },{ id: 3, name: "点-3", x: 643.24, y: 503.96, z: 0 },];},beforeMount() {}, //生命周期 - 挂载之前//生命周期 - 挂载完成（可以访问DOM元素）mounted() {//初始化地图this.initMap();// this.showPopup();},beforeUpdate() {}, //生命周期 - 更新之前updated() {}, //生命周期 - 更新之后beforeDestroy() {}, //生命周期 - 销毁之前destroyed() {}, //生命周期 - 销毁完成activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
#map {width: 1000px;height: 800px;border: 1px solid #333;margin: 0 auto;
}
#popup {width: 200px;height: 80px;padding: 0 20px;border-radius: 5px;z-index: 1;opacity: 1;position: absolute;bottom: 0;left: 0;margin: 0;background: rgba(0, 60, 136, 0.7);color: white;border: 0;transition: opacity 100ms ease-in;
}
</style>

WebGL--vue+openlayers实现覆盖物＋popup相关推荐

050：vue+openlayers使用Popup组件显示经纬度坐标（代码示例）
第050个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中使用popup的形式来显示出经纬度坐标,本示例是采用引用扩展的方式,相比以往的添加方式,减少了不少的代码量. 直 ...
vue+openlayers实现行政边界、标注交互、效果弹窗
vue+openlayers实现行政边界.标注交互.效果弹窗需求最终效果环境安装/依赖引入 html部分逻辑部分 1.创建变量/初始化地图/常量 2.拿到后台数据/通过json加载中国区划 3 ...
Vue+Openlayers+HIKVSION实现点击摄像头进行预览
场景 SpringBoot+Vue+HIKVSION实现摄像头多选并多窗口预览(插件版): SpringBoot+Vue+HIKVSION实现摄像头多选并多窗口预览(插件版)_霸道流氓气质的博客-CS ...
Vue+Openlayers+el-radio实现切换地图显示
场景 Vue+Openlayers+el-checkbox实现多选配置图层的显示和隐藏: Vue+Openlayers+el-checkbox实现多选配置图层的显示和隐藏_BADAO_LIUMANG_ ...
Vue+Openlayers+el-checkbox实现多选配置图层的显示和隐藏
场景 Vue+Openlayers实现地图上绘制线: Vue+Openlayers实现地图上绘制线_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面实现加载多个图层的基础上,可以实现 ...
Vue+Openlayers中实现地图旋转
场景 Vue+Openlayers实现地图上绘制线: Vue+Openlayers实现地图上绘制线_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面实现的效果是这样的此地图的显示时 ...
Vue+Openlayers实现地图上绘制线
场景 Vue+Openlayers实现显示图片并分优先级多图层加载: Vue+Openlayers实现显示图片并分优先级多图层加载_BADAO_LIUMANG_QIZHI的博客-CSDN博客上面是添 ...
Vue+Openlayers实现地图缩放图标等比例缩放
场景 Vue+Openlayers实现显示图片并分优先级多图层加载: Vue+Openlayers实现显示图片并分优先级多图层加载_BADAO_LIUMANG_QIZHI的博客-CSDN博客上面实现 ...
216：vue+openlayers 加载GPX数据，导出geojson文件
第216个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中加载GPX数据,显示图形, 导出geojson文件. GPX(GPS eXchange Format,GPS交换 ...

WebGL--vue+openlayers实现覆盖物＋popup

前言

基础知识的准备

栗子：vue+openlayers实现覆盖物＋popup

WebGL--vue+openlayers实现覆盖物＋popup相关推荐

最新文章

热门文章