前言

openlayers的使用

一、使用步骤

1.引入库

代码如下（示例）：npm install ol

import "ol/ol.css"; //样式
import Map from "ol/Map"; //地图对象
import Feature from "ol/Feature"; //标记
import Overlay from "ol/Overlay";
import View from "ol/View"; //视图
import { Point, LineString } from "ol/geom"; //标点,画线
import {OSM,XYZ,TileArcGISRest,Vector as VectorSource,WMTS,
} from "ol/source"; //图源
import { Vector as VectorLayer, Tile as TileLayer } from "ol/layer"; //图层
import { fromLonLat, transform } from "ol/proj"; //坐标系维度转换
import {Circle as CircleStyle,Fill,Icon,Stroke,Style,RegularShape,
} from "ol/style"; //填充图标描边等之类用来标记打点使用

2.方法里使用

<template><div><div id="container"><audiocontrols="controls"ref="audiod"style="display: none"src="../audio/alert.mp3"></audio>
</div></div>
</template>props: ["shipData"],mounted() {this.initMap();},watch: {checkmsgModal() {},shipData: {deep: true,handler() {this.vectorSource.clear();this.shipData.forEach((item, index) => {item.customSortId = index;this.setMarker(item);});},},},
methods:{initMap() {let that = this;//地图瓦片let tileLayer = new TileLayer({source: new XYZ({url: "写入地图瓦片地址",}),});// 绘制点let featureLayer = new VectorLayer({source: that.vectorSource,});// 绘制线that.vectorLineSource = new VectorSource({ wrapX: false });let featureLineLayer = new VectorLayer({source: that.vectorLineSource,});let sourceSatelliteMark = new TileLayer({source: new XYZ({url: "瓦片地址",}),});this.map = new Map({//olMap为map的地图容器target: "container", // DOM容器// 设置地图图层layers: [tileLayer, featureLayer, featureLineLayer], //地图源的瓦片图层// 设置显示地图的视图view: new View({// projection: 'EPSG:4326',center: transform(this.jwd, "EPSG:4326", "EPSG:3857"), //地图中心点 经纬度zoom: this.zoom, // 缩放级别-显示层级maxZoom: 16,}),});// this.map.addLayer(tileLayer);//这个是点击出现弹窗let overlayForm = new Overlay({// 创建一个图层element: this.$refs.msgForm.$el, // 图层绑定我们上边的弹窗autoPan: true,autoPanAnimation: {duration: 250,},autoPanMargin: 100,positioning: "center-center",});overlayForm.setPosition(undefined); // 设置弹窗位置，刚开始我们不让他显示，就是undefined就行this.map.addOverlay(overlayForm); // 然后把弹窗的图层加载到地图上this.map.on("click", (ev) => {let pixel = ev.pixel; // 鼠标点击的位置，这个应该是像素// let mouse = ev.coordinate  // 鼠标点击的坐标位置let mouse = ev.coordinate; // 鼠标点击的坐标位置const hdms = transform(mouse, "EPSG:3857", "EPSG:4326"); // 转换坐标格式let feature = this.map.forEachFeatureAtPixel(pixel, (feature) => {return feature; // 查找出点击的哪个坐标});console.log(feature);// console.log(feature)if (feature) {this.buoyData.forEach((item) => {// console.log(item.buoyId);if (item.buoyId == feature.values_.idName) {overlayForm.setPosition(mouse); // 设置弹窗的位置});}});}//  else {//   this.msgModal = false;//   overlayForm.setPosition(undefined); // 如果没有点击坐标点，就隐藏弹窗// }});},//标记setMarker(item) {let feature = new Feature({id: item.customSortId,geometry: new Point(transform([item.target.position.lon, item.target.position.lat],"EPSG:4326","EPSG:3857")),});feature.setStyle(new Style({image: new Icon({src: require("../components/screenHeader/images/greenShip.svg"),scale: 1.1,// rotation: (item.heading * Math.PI) / 180,}),}));this.vectorSource.addFeature(feature);// 使用Overlay添加GIF动态图标点位信息 (我这个要打动图，试了下还是加个图层，方法在下面，用了iview组件，里面的一个通知提醒，有预警的话就弹出，由于里面的内容不好改，就使用了render函数)addGif(lon, lat, id) {const that = this;let mapDom = that.$refs.container;var oDiv = document.createElement("div");oDiv.id = id;oDiv.style.width = "40px";oDiv.style.height = "40px";oDiv.style.backgroundImage ="url( " + require("../components/screenHeader/images/run.gif") + ")";oDiv.style.backgroundSize = "100%";mapDom.appendChild(oDiv);this.markerPoint = new Overlay({position: fromLonLat([lon, lat]),positioning: "center-center",element: document.getElementById(id),id: id,stopEvent: true,});this.map.addOverlay(this.markerPoint);mapDom.removeChild(oDiv);},}//弹出预警信息warning() {const that = this;this.$refs.audiod.play();//弹出预警伴随有声音提醒this.$Notice.open({render: (h) => {return h("div",{style: {width: "100%",fontSize: "14px",},},[h("Button",{style: {marginTop: "10px",marginLeft: "10px",width: "21%",},on: {click: () => {that.map.removeOverlay(that.markerPoint);this.addGif(lon, lat, that.warnList.warnId);},},},["定位"]),},duration: 0,onClose() {that.map.removeOverlay(that.markerPoint);//关闭时清除gif图层},});// var div = document.querySelector(".ivu-notice");// console.log(div, "111");},

3.图片:

总结

完成！

vue+openlayers实现地图打点相关推荐

Vue+Openlayers实现地图上绘制线
场景 Vue+Openlayers实现显示图片并分优先级多图层加载: Vue+Openlayers实现显示图片并分优先级多图层加载_BADAO_LIUMANG_QIZHI的博客-CSDN博客上面是添 ...
Vue+Openlayers实现地图缩放图标等比例缩放
场景 Vue+Openlayers实现显示图片并分优先级多图层加载: Vue+Openlayers实现显示图片并分优先级多图层加载_BADAO_LIUMANG_QIZHI的博客-CSDN博客上面实现 ...
155：vue+openlayers 设置地图的反转色、复古色、灰度图、原始图
第155个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中设置地图的反转色.复古色.灰度,原始状态等.采用的是CSS filter的形式. 直接复制下面的 vue+ope ...
SpringBoot+Vue+Openlayers实现地图上新增和编辑坐标并保存提交
场景若依前后端分离版手把手教你本地搭建环境并运行项目: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662 Vue ...
vue+openlayers在地图添加图标
参考帖子:https://blog.csdn.net/feiteyizu/article/details/81133845 有两种方式,介绍第二种,第一种太简单,,而且不能动态增加dom元素从而添加图 ...
Vue+Openlayers中实现地图旋转
场景 Vue+Openlayers实现地图上绘制线: Vue+Openlayers实现地图上绘制线_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面实现的效果是这样的此地图的显示时 ...
WebGIS实战：Vue+Openlayers实现网络地图的加载与切换
目录前言 1.效果图 2.实现步骤 3.下一步计划相关Web GIS实战信息: 上一篇博客:WebGIS实战:Web GIS开发环境配置下一篇博客:WebGIS实战:Vue+Openlayers ...
Vue+Openlayers+HIKVSION实现点击摄像头进行预览
场景 SpringBoot+Vue+HIKVSION实现摄像头多选并多窗口预览(插件版): SpringBoot+Vue+HIKVSION实现摄像头多选并多窗口预览(插件版)_霸道流氓气质的博客-CS ...
Vue+Openlayers+el-checkbox实现多选配置图层的显示和隐藏
场景 Vue+Openlayers实现地图上绘制线: Vue+Openlayers实现地图上绘制线_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面实现加载多个图层的基础上,可以实现 ...

vue+openlayers实现地图打点

前言

一、使用步骤

1.引入库

2.方法里使用

3.图片:

总结

vue+openlayers实现地图打点相关推荐

最新文章

热门文章