devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

OpenLayers接入地图_海图vue openlayers

作者：我家自动化 | 2024-02-27 20:29:03

赞

踩

海图vue openlayers

一、安装

1、官网

（1）官网文档

        OpenLayers - Welcome

（2）参考文档

        http://linwei.xyz/ol3-primer/ch01/index.html

（3）参考示例

        http://develop.smaryun.com:81/API/JS/OL3InterfaceDemo/index.htm

2、安装openlayers
  1. // 安装最新版本
  2. npm i ol
  3.  
  4. // 安装指定版本,例如7.0.0
  5. npm i ol@7.0.0
  6.  
  7. // 注意：如果npm无法正常安装，使用cnpm安装
  8.  
  9. // 安装最新版本
  10. cnpm i ol
  11.  
  12. // 安装指定版本,例如7.0.0
  13. cnpm i ol@7.0.0

二、配置

1、模块引入

        创建一个名为ol.js的文件，引入ol中需要使用的模块

  1. // ----------------<<CSS文件>>----------------
  2. import "ol/ol.css";
  3.  
  4. // ----------------<<常用模块>>----------------
  5. import Map from "ol/Map.js";
  6. // import { XYZ } from "ol/source.js";
  7. import XYZ from "ol/source/XYZ";
  8. import View from "ol/View.js";
  9. import Fill from 'ol/style/Fill.js'
  10. import Point from 'ol/geom/Point.js';
  11. import Style from 'ol/style/Style.js';
  12. import Circle from 'ol/style/Circle.js';
  13. import Stroke from 'ol/style/Stroke.js';
  14. import Feature from 'ol/Feature.js';
  15. import TileLayer from "ol/layer/Tile.js";
  16. import LineString from 'ol/geom/LineString.js';
  17. import VectorLayer from 'ol/layer/Vector.js';
  18. import VectorSource from 'ol/source/Vector.js';
  19. import { DoubleClickZoom } from 'ol/interaction.js';
  20.  
  21. // ----------------<<其他模块>>----------------
  22. import OSM from "ol/source/OSM.js";
  23. import WFS from 'ol/format/WFS.js';
  24. import Icon from 'ol/style/Icon.js';
  25. import Tile from 'ol/layer/Tile.js';
  26. import WMTS from 'ol/source/WMTS.js';
  27. import Image from 'ol/layer/Image.js';
  28. import { buffer } from 'ol/extent.js';
  29. import Overlay from 'ol/Overlay.js';
  30. import GeoJSON from 'ol/format/GeoJSON.js';
  31. import TileWMS from 'ol/source/TileWMS.js';
  32. import ImageWMS from 'ol/source/ImageWMS.js';
  33. import ImageStyle from 'ol/style/Image.js';
  34. import ZoomToExtent from 'ol/control/ZoomToExtent.js';
  35. import { transform, fromLonLat, toLonLat } from 'ol/proj.js'
  36.  
  37.  
  38. const ols = {
  39.   Map: Map,
  40.   XYZ: XYZ,
  41.   View: View,
  42.   OSM: OSM,
  43.   WFS: WFS,
  44.   Icon: Icon,
  45.   Tile: Tile,
  46.   WMTS: WMTS,
  47.   Fill: Fill,
  48.   Point: Point,
  49.   Style: Style,
  50.   Image: Image,
  51.   buffer: buffer,
  52.   Circle: Circle,
  53.   Stroke: Stroke,
  54.   Feature: Feature,
  55.   Overlay: Overlay,
  56.   GeoJSON: GeoJSON,
  57.   TileWMS: TileWMS,
  58.   ImageWMS: ImageWMS,
  59.   toLonLat: toLonLat,
  60.   TileLayer: TileLayer,
  61.   transform: transform,
  62.   fromLonLat: fromLonLat,
  63.   ImageStyle: ImageStyle,
  64.   LineString: LineString,
  65.   VectorLayer: VectorLayer,
  66.   VectorSource: VectorSource,
  67.   ZoomToExtent: ZoomToExtent,
  68.   DoubleClickZoom: DoubleClickZoom,
  69. }
  70.  
  71. export default ols

三、地图渲染 & 模型添加

1、初始化地图
  1. <template>
  2.   <div id="openLayers">
  3.     <!-- map -->
  4.     <div id="openLayerContainer"></div>
  5.   </div>
  6. </template>
  7.  
  8. <script>
  9. // 引入模块文件
  10. import ols from "../js/ol";
  11.  
  12. export default {
  13.   name: "",
  14.   components: {},
  15.   props: {},
  16.   data() {
  17.     return {
  18.     // 点位ID
  19.     pointId:0,
  20.     // 所有点位坐标集合
  21.     pointCoord:[],
  22.     // 所有点位图层集合-清除使用
  23.     pointVector:[],
  24.     // 线条ID
  25.     lineId:0,
  26.     // 所有线条图层集合-清除使用
  27.     lineVector:[],
  28.     }
  29.   },
  30.   computed: {},
  31.   created() {},
  32.   mounted() {
  33.     this.initMap();
  34.   },
  35.   methods: {
  36.     // 初始化地图
  37.     initMap() {
  38.       const tileMap = new ols.TileLayer({
  39.         source: new ols.XYZ({
  40.           // 官网在线地图（可以添加在线和离线地图）
  41.           url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
  42.         }),
  43.       });
  44.  
  45.       // 初始化地图
  46.       window.openLayers = new ols.Map({
  47.         layers: [tileMap], // 直接在配置上加载
  48.         target: "openLayerContainer", // 地图容器
  49.         view: new ols.View({
  50.           projection: "EPSG:4326", // 坐标系
  51.           center: [110, 30], // 地图中心点
  52.           zoom: 6, // 默认缩放比例
  53.           minZoom: 2, // 缩放最小级别 2
  54.           maxZoom: 20, // 缩放最大级别 20
  55.         }),
  56.       });
  57.  
  58.       // 清除默认的左键双击缩放
  59.       const dblClickInteraction = openLayers
  60.         .getInteractions()
  61.         .getArray()
  62.         .find((interaction) => {
  63.           return interaction instanceof ols.DoubleClickZoom;
  64.         });
  65.       openLayers.removeInteraction(dblClickInteraction);
  66.  
  67.       // 左键双击
  68.       openLayers.on("dblclick", (e) => {
  69.         // 添加点位
  70.         this.addPoint(e.coordinate);
  71.  
  72.         // 保存点位坐标位置
  73.         this.pointCoord.push(e.coordinate);
  74.       });
  75.     },
  76.   },
  77. };
  78. </script>
  79.  
  80. <style lang="less" scoped>
  81. #openLayers {
  82.   width: 100%;
  83.   height: 100vh;
  84.  
  85.   #openLayerContainer {
  86.     width: 100%;
  87.     height: 100%;
  88.   }
  89. }
  90. </style>

2、添加模型
（1）官网示例

        每一个点位和线条都会创建一个图层

        ① 添加、清除点位
  1. // 添加点位
  2. addPoint(coordinate) {
  3.   // 创建点位
  4.   const point = new ols.Feature({
  5.     geometry: new ols.Point([coordinate[0], coordinate[1]]),
  6.   });
  7.  
  8.   // 设置点位id
  9.   point.setId(this.pointId);
  10.  
  11.   // 设置点位样式
  12.   point.setStyle(
  13.     new ols.Style({
  14.       // 形状
  15.       image: new ols.Circle({
  16.         radius: 3,
  17.         fill: new ols.Fill({
  18.           color: "rgba(255,0,0,1)",
  19.         }),
  20.       }),
  21.     })
  22.   );
  23.  
  24.   //实例化一个矢量图层Vector作为绘制层
  25.   const source = new ols.VectorSource({
  26.     features: [point],
  27.   });
  28.  
  29.   //创建一个图层
  30.   const vector = new ols.VectorLayer({
  31.     source: source,
  32.   });
  33.  
  34.   //将绘制层添加到地图容器中
  35.   openLayers.addLayer(vector);
  36.  
  37.   // 图层中添加点
  38.   vector.getSource().addFeature(point);
  39.  
  40.   //存储图层
  41.   this.pointVector.push(vector);
  42.  
  43.   // 点位id加1，下次创建点位使用
  44.   this.pointId++;
  45. },
  46.  
  47.  
  48. // 清除点位
  49. clearPoint() {
  50.   // 移除点位
  51.   this.pointCoord.forEach((item) => {
  52.     item
  53.       .getSource()
  54.       .getFeatures()
  55.       .forEach((feature) => {
  56.         item.getSource().removeFeature(feature);
  57.       });
  58.  
  59.     // 从地图容器重删除绘制层
  60.     openLayers.removeLayer(item);
  61.   });
  62.  
  63.   // 点位ID
  64.   this.pointId = 0;
  65.   // 所有点位坐标集合
  66.   this.pointCoord = [];
  67.   // 所有点位图层集合-清除使用
  68.   this.pointVector = [];
  69. },

        ② 添加、清除线条
  1. // 添加线条
  2. addLine() {
  3.   if (!this.pointCoord || this.pointCoord.length < 2) {
  4.     this.$message.warning("至少需要2个点");
  5.   } else {
  6.     // 创建线条
  7.     const line = new ols.Feature({
  8.       geometry: new ols.LineString(this.pointCoord),
  9.     });
  10.  
  11.     // 设置线条id
  12.     line.setId(this.lineId);
  13.  
  14.     // 设置线条样式
  15.     line.setStyle(
  16.       new ols.Style({
  17.         // 边线
  18.         stroke: new ols.Stroke({
  19.           color: "#ffffff",
  20.           width: 2,
  21.         }),
  22.       })
  23.     );
  24.  
  25.     // 实例化一个矢量图层Vector作为绘制层
  26.     const source = new ols.VectorSource({
  27.       features: [line],
  28.     });
  29.  
  30.     // 创建一个图层
  31.     const vector = new ols.VectorLayer({
  32.       source: source,
  33.     });
  34.  
  35.     // 将绘制图层添加到地图容器中
  36.     openLayers.addLayer(vector);
  37.  
  38.     // 图层中添加线
  39.     vector.getSource().addFeature(line);
  40.  
  41.     // 存储图层
  42.     this.lineVector.push(vector);
  43.  
  44.     // 线条id加1，下次创建线条使用
  45.     this.lineId++;
  46.   }
  47. },
  48.  
  49.  
  50. // 清除线条
  51. clearLine() {
  52.   // 移除线条
  53.   this.lineVector.forEach((item) => {
  54.     item
  55.       .getSource()
  56.       .getFeatures()
  57.       .forEach((feature) => {
  58.         item.getSource().removeFeature(feature);
  59.       });
  60.  
  61.     // 从地图容器重删除绘制层
  62.     openLayers.removeLayer(item);
  63.   });
  64.  
  65.   // 线条ID
  66.   this.lineId = 0;
  67.   // 所有线条图层集合-清除使用
  68.   this.lineVector = [];
  69. },

（2）个人示例

        点位和线条各一个图层

        ① 添加、清除点位
  1. // 添加点位
  2. addPoint(coordinate) {
  3.   if (!this.pointVector) {
  4.     //实例化一个矢量图层Vector作为绘制层
  5.     const source = new ols.VectorSource();
  6.     this.pointVector = new ols.VectorLayer({
  7.       source: source,
  8.     });
  9.   }
  10.  
  11.   // 创建点位
  12.   const point = new ols.Feature({
  13.     geometry: new ols.Point([coordinate[0], coordinate[1]]),
  14.   });
  15.  
  16.   // 设置点位id
  17.   point.setId(this.pointId);
  18.  
  19.   // 设置点位样式
  20.   point.setStyle(
  21.     new ols.Style({
  22.       // 形状
  23.       image: new ols.Circle({
  24.         radius: 3,
  25.         fill: new ols.Fill({
  26.           color: "rgba(255,0,0,1)",
  27.         }),
  28.       }),
  29.     })
  30.   );
  31.  
  32.   //将绘制层从地图容器中移除
  33.   openLayers.removeLayer(this.pointVector);
  34.   //将绘制层添加到地图容器中
  35.   openLayers.addLayer(this.pointVector);
  36.   //更新地图
  37.   openLayers.updateSize();
  38.  
  39.   // 图层中添加点位
  40.   this.pointVector.getSource().addFeature(point);
  41.  
  42.   // 存储点位
  43.   this.pointArr.push(point);
  44.  
  45.   // 点位id加1，下次创建点位使用
  46.   this.pointId++;
  47. },
  48.  
  49.  
  50. // 清除点位
  51. clearPoint() {
  52.   // 移除点位
  53.   this.pointArr.forEach((item) => {
  54.     this.pointVector.getSource().removeFeature(item);
  55.   });
  56.  
  57.   // 从地图容器中删除绘制层
  58.   openLayers.removeLayer(this.pointVector);
  59.  
  60.   // 点位ID
  61.   (this.pointId = 0),
  62.     // 所有点位坐标集合
  63.     (this.pointCoord = []);
  64.   // 所有点位图层集合-清除使用
  65.   this.pointVector = [];
  66. },

        ② 添加、清除线条
  1. // 添加线条
  2. addLine() {
  3.   if (!this.pointCoord || this.pointCoord.length < 2) {
  4.     this.$message.warning("至少需要2个点");
  5.   } else {
  6.     //实例化一个矢量图层Vector作为绘制层
  7.     if (!this.lineVector) {
  8.       const source = new ols.VectorSource();
  9.       this.lineVector = new ols.VectorLayer({
  10.         source: source,
  11.       });
  12.     }
  13.  
  14.     // 创建线条
  15.     const line = new ols.Feature({
  16.       geometry: new ols.LineString(this.pointCoord),
  17.     });
  18.  
  19.     // 设置线条id
  20.     line.setId(this.lineId);
  21.  
  22.     // 设置线条样式
  23.     line.setStyle(
  24.       new ols.Style({
  25.         // 边线
  26.         stroke: new ols.Stroke({
  27.           color: "#ffffff",
  28.           width: 2,
  29.         }),
  30.       })
  31.     );
  32.  
  33.     //将绘制层从地图容器中移除
  34.     openLayers.removeLayer(this.lineVector);
  35.     //将绘制层添加到地图容器中
  36.     openLayers.addLayer(this.lineVector);
  37.     //更新地图
  38.     openLayers.updateSize();
  39.  
  40.     // 图层中添加线
  41.     this.lineVector.getSource().addFeature(line);
  42.  
  43.     // 存储线条
  44.     this.lineArr.push(line);
  45.  
  46.     // 线条id加1，下次创建线条使用
  47.     this.lineId++;
  48.   }
  49. },
  50.  
  51.  
  52. // 清除线条
  53. clearLine() {
  54.   // 移除线条
  55.   this.lineArr.forEach((item) => {
  56.     this.lineVector.getSource().removeFeature(item);
  57.   });
  58.  
  59.   // 从地图容器中删除绘制层
  60.   openLayers.removeLayer(this.lineVector);
  61.  
  62.   // 线条ID
  63.   this.lineId = 0;
  64.   // 所有线条图层集合-清除使用
  65.   this.lineVector = [];
  66. },

四、其他操作

1、鼠标事件
  1. // 清除默认的左键双击缩放
  2. const dblClickInteraction = openLayers
  3.   .getInteractions()
  4.   .getArray()
  5.   .find((interaction) => {
  6.     return interaction instanceof ols.DoubleClickZoom;
  7.   });
  8. openLayers.removeInteraction(dblClickInteraction);
  9.  
  10. //左键单击
  11. openLayers.on("singleclick", (e) => {
  12.   console.log("左键单击", e);
  13. });
  14.  
  15. // 左键双击
  16. openLayers.on("dblclick", (e) => {
  17. 	console.log("左键双击", e);
  18. });
  19.  
  20. // 单击（左右键）
  21. openLayers.on("click", (e) => {
  22.   console.log("单击", e);
  23. });
  24.  
  25. // 鼠标移动
  26. openLayers.on("pointermove", (e) => {
  27.   console.log("鼠标移动", e);
  28. });
  29.  
  30. // 鼠标拖拽
  31. openLayers.on("pointerdrag", (e) => {
  32.   console.log("鼠标拖拽", e);
  33. });
  34.  
  35. // 地图移动事件
  36. openLayers.on("moveend", (e) => {
  37.   console.log("地图移动事件", e);
  38. });

五、完整案例

1、代码（ol@6.15.1）
  1. <template>
  2.   <div class="openLayers">
  3.     <!-- map -->
  4.     <div id="openLayerContainer"></div>
  5.   </div>
  6. </template>
  7.  
  8. <script>
  9. // ----------------<<CSS文件>>----------------
  10. import "ol/ol.css";
  11. import imgUrl from "@assets/img/car.png"; // 引入图片
  12.  
  13. // ----------------<<常用模块>>----------------
  14. import Map from "ol/Map.js";
  15. import XYZ from "ol/source/XYZ.js";
  16. import View from "ol/View.js";
  17. import TileLayer from "ol/layer/Tile.js";
  18. import { fromLonLat, transform } from "ol/proj.js";
  19. import styleCircle from "ol/style/Circle.js";
  20. import Style from "ol/style/Style.js";
  21. import Icon from "ol/style/Icon.js";
  22. import Stroke from "ol/style/Stroke.js"; // 线条颜色
  23. import Fill from "ol/style/Fill.js"; // 填充色
  24. import Feature from "ol/Feature.js";
  25. import VectorSource from "ol/source/Vector.js";
  26. import VectorLayer from "ol/layer/Vector.js";
  27. import { LineString, Point, Circle, LinearRing, Polygon } from "ol/geom";
  28.  
  29. export default {
  30.   name: "",
  31.   components: {},
  32.   props: {},
  33.   data() {
  34.     return {
  35.       // 地图对象
  36.       openLayers: null,
  37.       // 绘制层
  38.       sourceVector: null,
  39.       // 图层
  40.       layerVector: null,
  41.       // 位置信息
  42.       position: {
  43.         localDoa: 0, // 方位
  44.         localROA: 30, // 夹角
  45.         localHeight: 0, // 高度
  46.         localLon: 130, // 经度
  47.         localLat: 30, // 纬度
  48.       },
  49.       // timer
  50.       timer: null,
  51.     };
  52.   },
  53.   computed: {},
  54.   created() {},
  55.   mounted() {
  56.     this.queryLocalPos(); // 获取实时位置
  57.     this.initMap();
  58.     this.changeTowardParams();
  59.   },
  60.   methods: {
  61.     // ---------------------<<请求>>---------------------
  62.     queryLocalPos() {
  63.       this.$API.queryLocalPosRequest().then((res) => {
  64.         if (res.code == 1000) {
  65.           this.position = res.data;
  66.  
  67.           // this.initMap();
  68.         }
  69.       });
  70.     },
  71.  
  72.     // ---------------------<<地图>>---------------------
  73.     // 初始化地图
  74.     initMap() {
  75.       const tileMap = new TileLayer({
  76.         source: new XYZ({
  77.           // 官网在线地图（可以添加在线和离线地图）
  78.           // url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
  79.           url: "https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
  80.         }),
  81.       });
  82.  
  83.       // 初始化地图;
  84.       window.openLayers = new Map({
  85.         target: "openLayerContainer", // 地图容器
  86.         layers: [tileMap], // 直接在配置上加载
  87.         view: new View({
  88.           projection: "EPSG:3857", // 坐标系
  89.           center: fromLonLat([this.position.localLon, this.position.localLat]),
  90.           zoom: 9, // 默认缩放比例
  91.           minZoom: 5, // 缩放最小级别 1
  92.           maxZoom: 10, // 缩放最大级别 20
  93.         }),
  94.       });
  95.  
  96.       // 画圆
  97.       this.drawCircle(this.position, 50000);
  98.  
  99.       // 设置地图中心点-定位功能
  100.       // openLayers.getView().setCenter(fromLonLat([this.position.localLon, this.position.localLat]));
  101.  
  102.       // openLayers.on("pointerdrag", function (e) {
  103.       //   console.log("鼠标拖拽", e);
  104.       // });
  105.  
  106.       // openLayers.on("singleclick", function (e) {
  107.       //   console.log("左键单击", e);
  108.       //   // const coordinate = transform(e.coordinate, "EPSG:3857", "EPSG:4326");
  109.       // });
  110.  
  111.       // openLayers.on("click", function (e) {
  112.       //   console.log("鼠标点击", e);
  113.       //   // const coordinate = transform(e.coordinate, "EPSG:3857", "EPSG:4326");
  114.       // });
  115.  
  116.       // // 清除默认的左键双击缩放
  117.       // const dblClickInteraction = openLayers
  118.       //   .getInteractions()
  119.       //   .getArray()
  120.       //   .find((interaction) => {
  121.       //     return interaction instanceof ols.DoubleClickZoom;
  122.       //   });
  123.       // openLayers.removeInteraction(dblClickInteraction);
  124.  
  125.       // openLayers.on("dblclick", function (e) {
  126.       //   console.log("左键双击", e);
  127.       //   // const coordinate = transform(e.coordinate, "EPSG:3857", "EPSG:4326");
  128.       // });
  129.     },
  130.  
  131.     // 画圆
  132.     drawCircle(ps, range) {
  133.       var newCircle = new Feature({
  134.         geometry: new Circle(fromLonLat([ps.localLon, ps.localLat]), range),
  135.       });
  136.  
  137.       // 设置id
  138.       newCircle.setId("newCircle");
  139.  
  140.       newCircle.setStyle(
  141.         new Style({
  142.           //填充色
  143.           fill: new Fill({
  144.             color: "rgba(255,228,181,0.5)",
  145.           }),
  146.           //边线颜色
  147.           stroke: new Stroke({
  148.             color: "#FE9E28",
  149.             width: 3,
  150.           }),
  151.           //形状
  152.           image: new styleCircle({
  153.             radius: 7,
  154.             fill: new Fill({
  155.               color: "rgba(255,228,181,0.5)",
  156.             }),
  157.           }),
  158.         })
  159.       );
  160.  
  161.       //实例化一个矢量图层Vector作为绘制层
  162.       this.sourceVector = new VectorSource({
  163.         features: [newCircle],
  164.       });
  165.  
  166.       //创建一个图层
  167.       this.layerVector = new VectorLayer({
  168.         source: this.sourceVector,
  169.       });
  170.  
  171.       //将图层添加到地图容器中
  172.       openLayers.addLayer(this.layerVector);
  173.  
  174.       // 添加中心点
  175.       this.drawPoint({
  176.         lon: ps.localLon,
  177.         lat: ps.localLat,
  178.         angle: ps.localDoa,
  179.       });
  180.       // 添加扇形
  181.       this.drawCurve(
  182.         fromLonLat([ps.localLon, ps.localLat]),
  183.         range,
  184.         ps.localDoa,
  185.         ps.localROA
  186.       );
  187.     },
  188.  
  189.     // 位置：origin
  190.     // 范围：radius
  191.     // 朝向：angle
  192.     // 角度：range
  193.     drawCurve(origin, radius, angle, range) {
  194.       const feature = new Feature({
  195.         geometry: new Polygon([this.addCurve(origin, radius, angle, range)]),
  196.       });
  197.  
  198.       // 设置id
  199.       feature.setId("myCurve");
  200.  
  201.       feature.setStyle(
  202.         new Style({
  203.           //填充色
  204.           fill: new Fill({
  205.             color: "rgba(255,0,0,.5)",
  206.           }),
  207.           //边线颜色
  208.           stroke: new Stroke({
  209.             color: "#FF0000",
  210.             width: 1,
  211.           }),
  212.         })
  213.       );
  214.  
  215.       this.layerVector.getSource().addFeatures([feature]);
  216.     },
  217.     addCurve(origin, radius, angle, range) {
  218.       let pointList = [];
  219.       /**
  220.        * 添加起始点位
  221.        */
  222.       pointList.push(origin);
  223.       /**
  224.        * 开始角度
  225.        */
  226.       let startAngle = angle - range / 2 + 90;
  227.       /**
  228.        * 根据传进来的角度范围绘制
  229.        */
  230.       for (let i = 0; i < range; i++) {
  231.         startAngle += 1;
  232.         /**
  233.          * 利用余弦计算出维度，因为在二维地图中正北方向是朝上的，同理经度有正弦可以计算出来
  234.          */
  235.         let lon = Math.cos((startAngle * Math.PI) / 180) * radius + origin[0];
  236.         let lat = Math.sin((startAngle * Math.PI) / 180) * radius + origin[1];
  237.         /**
  238.          * 添加进数组中
  239.          */
  240.  
  241.         pointList.push([lon, lat]);
  242.       }
  243.       return pointList;
  244.     },
  245.  
  246.     // 画点
  247.     drawPoint(ps) {
  248.       // 创建点位
  249.       const point = new Feature({
  250.         geometry: new Point(fromLonLat([ps.lon, ps.lat])),
  251.       });
  252.  
  253.       // 设置id
  254.       point.setId("myPoint");
  255.  
  256.       // 设置点位样式
  257.       point.setStyle(
  258.         new Style({
  259.           image: new Icon({
  260.             src: imgUrl,
  261.             scale: 0.1,
  262.             rotation: -(ps.angle * (6.3 / 360)),
  263.           }),
  264.         })
  265.       );
  266.  
  267.       // 添加到图层
  268.       this.layerVector.getSource().addFeatures([point]);
  269.     },
  270.  
  271.     // 重新添加所有实体
  272.     addAll() {
  273.       // 清除所有实体
  274.       this.clearAll();
  275.  
  276.       // 添加所有实体
  277.       this.drawCircle(this.position, 50000);
  278.  
  279.       // 设置地图中心点
  280.       openLayers
  281.         .getView()
  282.         .setCenter(
  283.           fromLonLat([this.position.localLon, this.position.localLat])
  284.         );
  285.     },
  286.  
  287.     // 清除所有
  288.     clearAll() {
  289.       // 删除所有feature
  290.       this.layerVector
  291.         .getSource()
  292.         .getFeatures()
  293.         .forEach((feature) => {
  294.           this.layerVector.getSource().removeFeature(feature);
  295.         });
  296.  
  297.       // 删除图层
  298.       openLayers.removeLayer(this.layerVector);
  299.     },
  300.  
  301.     // 调整方位
  302.     changeToward(ps, range) {
  303.       this.addAll();
  304.     },
  305.  
  306.     // 调整方位参数
  307.     changeTowardParams() {
  308.       // 自动调整方位
  309.       if (this.timer) {
  310.         clearInterval(this.timer);
  311.       }
  312.  
  313.       this.timer = setInterval(() => {
  314.         if (this.position.localDoa == 360) {
  315.           this.position.localDoa = 0;
  316.         }
  317.         this.position.localDoa -= 6;
  318.       }, 500);
  319.     },
  320.   },
  321.   watch: {
  322.     position: {
  323.       handler(newVal, oldVal) {
  324.         this.changeToward(newVal, 50000);
  325.       },
  326.       deep: true,
  327.     },
  328.   },
  329.   beforeDestroy() {
  330.     clearInterval(this.timer);
  331.   },
  332. };
  333. </script>
  334.  
  335. <style lang="less" scoped>
  336. .openLayers {
  337.   width: 100%;
  338.   height: 100%;
  339.  
  340.   #openLayerContainer {
  341.     width: 100%;
  342.     height: 100%;
  343.     background-color: #2f4f4f;
  344.   }
  345. }
  346. </style>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/155765?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号