• vue结合openlayers根据返回的经纬度坐标完成锚地标记、绘制多边形区域

    ⭐️ 作者：船长在船上
    🚩主页：来访地址船长在船上的博客
    🔨 简介：高级前端开发工程师，专注前端开发，欢迎咨询交流，共同学习！

    👉👉👉 欢迎来访船长在船上的博客，如有疑问可以留言、评论，看到后会及时回复。 

    本文介绍vue结合openlayers实现 根据返回的经纬度坐标完成锚地标记、绘制多边形区域；

    注意点：

    1.根据返回的经纬度取第一个坐标作为锚地图标位置；

    2.根据返回的经纬度坐标数据，这里的后台数据需要处理（根据返回的数据处理成需要的格式），得到坐标数组渲染绘制区域画图显示在航道图层上。

    3.关于数据渲染的问题：

            这里前端采用的是获取左下角和右上角经纬度作为参数传递给后台获取当前屏幕显示的区域的数据。利用滑动地图区域来请求接口渲染数据，这样就很好的解决了一次性加载很多的数据的问题。

    文章内容较长，花费时间需要一些时间，如果有疑问可留言、评论；以往也有发布关于openlayers的其它文章，可在本博客订阅搜索查看。

     openlayers官方文档学习：

    OpenLayers - Quick Start

    实现效果图预览：

     

     

    目录

    1.安装openlayers：

    2.引入模块

    3.地图、弹窗html 样式

    4. data数据定义，根据需要的自己补充

    5.methods方法

    6.mounted数据加载

    7.锚地数据获取，重要代码

    实现步骤：

    1.安装openlayers：

    1. cnpm i -S ol
    2. #或者
    3. npm install ol

    2.引入模块

    1. // openlayers地图
    2. import "ol/ol.css";
    3. import { Icon, Style ,Text,Fill,Stroke,Circle as CircleStyle} from "ol/style";
    4. import Map from "ol/Map";
    5. import View from "ol/View";
    6. // import OSM from "ol/source/OSM";
    7. import TileLayer from "ol/layer/Tile";
    8. import XYZ from "ol/source/XYZ";
    9. import { get as getProjection ,fromLonLat} from "ol/proj.js";
    10. import { getBottomLeft, getTopRight } from "ol/extent.js";
    11. import { Vector as SourceVec } from "ol/source";
    12. import { Vector as LayerVec } from "ol/layer";
    13. import Overlay from "ol/Overlay"; //弹窗
    14. import { Point } from "ol/geom";
    15. import { Feature } from "ol";
    16. import Observable from 'ol/Observable';
    17. import { defaults as defaultControls } from "ol/control"; //默认缩放
    18. import { FullScreen, ScaleLine, ZoomSlider } from "ol/control"; //全屏，比例尺控件
    19. import TileGrid from "ol/tilegrid/TileGrid";
    20. import { LineString, Polygon } from "ol/geom.js";
    21. import {defaults as defaultInteractions} from 'ol/interaction';//旋转

    3.地图、弹窗html 样式

    2. <div style="width:100%;height:100%">
    3.     <div id="mapDiv">div>
    4.     
    5.     <div class="popup serchPopup" ref="popup" v-show="shopPopup" >
    6.                 <div class="ship-header">
    7.                   <div class="cname">{{anchorageName?anchorageName:""}}div>
    8.                       <img class="icon-close" @click="closePopup" src="../../assets/img/sy_close.png"/>
    9.                 div>
    10.     div>
    11. div>

     

    1. /* 弹窗样式 */
    2. .popup {
    3.   font-family: "微软雅黑";
    4.   // min-width: 280px;
    5.   position: relative;
    6.   display: flex;
    7.   flex-direction: column;
    8.   transform: translate(-50%, calc(-100% - 12px));
    9.   opacity: 0.95;
    10.   background: #ffffff;
    11.   border-radius: 24px;
    12.   box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.15);
    13.   // overflow: hidden;
    14.   .content {
    15.     margin-top: 6px;
    16.   }
    17.   .ship-header {
    18.     padding: 20px 30px;
    19.     display: flex;
    20.     justify-content: space-between;
    21.     align-items: center;
    22.     .cname {
    23.       font-weight: 600;
    24.       font-size: 32px;
    25.       color: #024ee0;
    26.     }
    27.   }
    28.   .ship-content {
    29.     padding: 30px;
    30.     border-top: 1px solid #ececec;
    31.     font-size: 24px;
    32.     font-weight: 500;
    33.     color: #535f8b;
    34.     .con-sx {
    35.       display: flex;
    36.       justify-content: space-between;
    37.       .txt-margin {
    38.         margin-right: 60px;
    39.       }
    40.     }
    41.   }
    42. }
    43. /* 弹窗下方的小三角形 */
    44. .serchPopup::after {
    45.     display: block;
    46.     content: "";
    47.     width: 0;
    48.     height: 0;
    49.     position: absolute;
    50.     border: 12px solid transparent;
    51.     border-top-color: #fff;
    52.     bottom: -23px;
    53.     left: 50%;
    54.     transform: translateX(-50%);
    55. } 
    56. /* 关闭弹窗按钮 */
    57. .icon-close {
    58.   cursor: pointer;
    59.   width: 24px;
    60.   height: 24px;
    61. }

     

    4. data数据定义，根据需要的自己补充

    1. data(){
    2.      // 地图
    3.      map：null,
    4.      cjinobeaconMap:null,
    5.     //默认加载中心点
    6.     center: {
    7.         longitude: "114.293726",//114.293726   113.306100
    8.         latitude: "30.577845",//30.577845  29.629998
    9.     },
    10.     anchorageIcon:require("../../assets/img/anchorage_icon.png"),//锚地图标
    11.     
    12.     anchorageVector:false,
    13.     anchorageVectorLayer:null,
    14.     anchorageFeatures:[],
    15.     drawSource: null,
    16.  
    17. }

    5.methods方法

    初始化

    1. initMap() {
    2.       let defaultsMap = {
    3.         tileUrl1:"图层数据地址",
    4.         origin: [-400, 400],
    5.         zoom: 7,
    6.         resolutions: [
    7.           //根据需求添加区域
    8.         ],
    9.         fullExtent: [
    10.           //根据需求添加区域
    11.         ],
    12.         inters: [1000, 100],
    13.         center: [this.center.longitude, this.center.latitude],
    14.         projection: getProjection("EPSG:4326")
    15.       };
    16.  
    17.       // 航道图层
    18.       this.cjinobeaconMap = new TileLayer({
    19.         source: new XYZ({
    20.           tileGrid: tileGrid,
    21.           projection: defaultsMap.projection,
    22.           url: defaultsMap.tileUrl1
    23.         }),
    24.         zIndex: 9
    25.       });
    26.       
    27.  
    28.       // 弹窗
    29.       this.overlay = new Overlay({
    30.         element: this.$refs.popup, // 弹窗标签，在html里
    31.         autoPan: true, // 如果弹窗在底图边缘时，底图会移动
    32.         autoPanAnimation: {
    33.           // 底图移动动画
    34.           duration: 250
    35.         },
    36.         stopEvent: false,
    37.         offset: [0, -10],
    38.         className:"popupOverlay",
    39.       });
    40.  
    41.       // 加载地图
    42.       this.map = new Map({
    43.         target: "mapDiv",
    44.         controls: defaultControls().extend([
    45.           new FullScreen(),
    46.           new ScaleLine({
    47.             units: "metric"
    48.           })
    49.           // new ZoomSlider()
    50.         ]),
    51.         interactions: defaultInteractions({
    52.           pinchRotate: false // 移动端禁止地图旋转
    53.         }),
    54.         loadTilesWhileAnimating: true,
    55.        
    56.         layers: [this.cjinobeaconMap],//保留航道图层
    57.         overlays: [this.overlay], // 把弹窗加入地图
    58.         view: new View({
    59.           projection: defaultsMap.projection,
    60.           center: defaultsMap.center,  center: [114.272172,30.564646],
    61.           extent: defaultsMap.fullExtent,
    62.           // resolutions: defaultsMap.resolutions,
    63.           zoom: 14,
    64.           // minZoom: 12,
    65.           // maxZoom:17,
    66.           //设置缩放级别为整数 
    67.           // constrainResolution: true, 
    68.           //关闭无级缩放地图
    69.           smoothResolutionConstraint: false
    70.         })
    71.       });
    72.       this.mapClick(); // 初始化地图成功后，给地图添加点击事件
    73.  
    74.       this.map.addEventListener("moveend", this.showView);//监听地图区域滑动
    75.     },

     动态显示图层 

    1.  
    2.     showView() {
    3.  
    4.       let zoom = this.map.getView().getZoom();
    5.       console.log(zoom,"缩放")
    6.       this.map.getLayers().getArray().forEach((item) => {
    7.  
    8.           if (item.get("name") == "anchorageVectorLayer") {
    9.                 // 锚地，这里根据获取的层级显示隐藏数据
    10.                 if (zoom>13) {
    11.                       item.setVisible(true);
    12.                       this.getAnchorageData();
    13.                     } else {
    14.                       this.shopPopup = false;
    15.                       item.setVisible(false);
    16.                       this.map.removeLayer(this.mdVectorLayer);//锚地图标
    17.                     }
    18.                 }
    19.          
    20.         });
    21.     },

    弹窗mapClick

    1. // 弹窗
    2.     mapClick() {
    3.       this.map.on("singleclick", evt => {
    4.         this.isShowSerchList = false;
    5.         let pixel = this.map.getEventPixel(evt.originalEvent);
    6.         let feature = this.map.forEachFeatureAtPixel(
    7.           evt.pixel,
    8.           feature => feature
    9.         );
    10.         if (feature) {
    11.           console.log(feature,"feature")
    12.           
    13.           this.shipName = feature.values_.shipName; //Feature对象集合中的
    14.           this.portName = feature.values_.portName?feature.values_.portName:feature.values_.name;//港口
    15.           this.portId = feature.values_.portId;
    16.           this.mmsi = feature.values_.mmsi;
    17.           this.nature = feature.values_.nature;
    18.           this.csx = feature.values_.csx;
    19.           this.speed = feature.values_.speed;
    20.           this.updateTime = feature.values_.updateTime;
    21.  
    22.           this.shipStatus=feature.values_.shipStatus;
    23.           this.vipStatus=feature.values_.vipStatus;
    24.           this.shipType = feature.values_.shipType;
    25.  
    26.           this.areaName = feature.values_.areaName;
    27.           console.log(this.areaName,"this.areaName");
    28.           this.lonAndLatData = feature.values_.lonAndLatData;
    29.  
    30.           // 锚地名字
    31.           this.anchorageName = feature.values_.anchorageName;
    32.           console.log(this.anchorageName,"this.anchorageName");
    33.  
    34.           let coordinates = feature.getGeometry().getCoordinates();
    35.           console.log(coordinates, "coordinates当前坐标");
    36.           this.longitude = coordinates[0];
    37.           this.latitude = coordinates[1];
    38.           // 锚地
    39.           if(this.anchorageName){
    40.             setTimeout(() => {
    41.               this.overlay.setPosition(coordinates);
    42.             }, 0);
    43.           }
    44.  
    45.         
    46.           if(this.anchorageName){
    47.             this.shopPopup = true;
    48.           }else{
    49.             this.shopPopup = false;
    50.           }
    51.  
    52.           
    53.         } else {
    54.           this.shopPopup = false;
    55.         }
    56.       });
    57.     },

    6.mounted数据加载

    1. mounted(){
    2.  
    3.     this.initMap(); //加载地图
    4.     this.getAnchorageData();//锚地
    5. }

    7.锚地数据获取，重要代码

     

     

    1. // 获取锚地数据
    2.     getAnchorageData(){
    3.       let arr = this.map.getView().calculateExtent(this.map.getSize());//获取左下角和右上角经纬度
    4.       let params = {
    5.         leftLongitude: arr[0],
    6.         leftLatitude: arr[1],
    7.         rightLongitude: arr[2],
    8.         rightLatitude: arr[3],
    9.       }
    10.  
    11.       this.mdFeatures = [];
    12.       this.mdMarker = [];
    13.  
    14.       homePageAnchorageData(params).then(res=>{
    15.         if(res.code == 200){
    16.               //
    17.                 //
    18.                 
    19.               this.anchorageFeatures = res.data.map(item=>{
    20.                 return item.lonAndLatDatas;
    21.               });
    22.  
    23.               //取第一个坐标
    24.               const selectOneData = res.data.map(item=>{
    25.                   return item.lonAndLatDatas[0];
    26.               });
    27.               const selectOneName = res.data.map(item=>{
    28.                   return item.anchorageName;
    29.               });
    30.               console.log(selectOneName,"取第一个坐标名字");
    31.               // 添加图标
    32.               this.mdFeatures = selectOneData;
    33.               this.mdFeatures.map((item, index) => {
    34.                   this.mdMarker.push(
    35.                       new Feature({
    36.                         geometry: new Point([item[0], item[1]], "XY"),
    37.                         anchorageName:selectOneName[0],
    38.                         index: index
    39.                       })
    40.                   );
    41.               });
    42.               let mdIconStyles = [];
    43.               this.mdMarker.forEach(item => {
    44.                     mdIconStyles.push(
    45.                         new Style({
    46.                           image: new Icon({
    47.                             src: this.anchorageIcon,
    48.                             scale: 0.6,
    49.                             anchor: [0.5, 0.9],// 偏移的 x 与 y 方向值，注意此值与 Cesium 等GIS库偏向方向正好相反
    50.                           }),
    51.                         
    52.                         })
    53.                     );   
    54.               });
    55.               let mdVectorSource = new SourceVec({
    56.                 features: this.mdMarker
    57.               });
    58.               this.mdVectorLayer = new LayerVec({
    59.                 name: "mdVectorLayer",
    60.                 source: mdVectorSource,
    61.                 style: (feature)=> {
    62.                   let iconStyle = mdIconStyles[feature.values_.index];
    63.                   return [iconStyle];
    64.                 },
    65.                 zIndex: 13
    66.               });
    67.               this.map.addLayer(this.mdVectorLayer);
    68.               this.mdVector = true;
    69.  
    70.               // this.anchorageFeatures = [
    71.               //   ["113.306100", "29.629998"],
    72.               //   ["113.296623", "29.619303"],
    73.               //   ["113.294041", "29.620805"],
    74.               //   ["113.302937", "29.631876"]
    75.               // ];
    76.               
    77.               // 画图层
    78.               this.drawSource = new SourceVec({ wrapX: false })
    79.               this.anchorageVectorLayer = new LayerVec({
    80.                 name: "anchorageVectorLayer",
    81.                 source: this.drawSource,
    82.                 style: function (feature) {
    83.                   let styles = [
    84.                     new Style({
    85.                       stroke: new Stroke({
    86.                         width: 2,
    87.                         color: '#ff4e4e'
    88.                       }),
    89.                       fill: new Fill({
    90.                         color: 'rgba(255, 78, 78, 0.2)'
    91.                       }),
    92.                     })
    93.                   ]
    94.                   var geometry = feature.getGeometry()
    95.                   if (geometry instanceof LineString) {
    96.                     geometry.forEachSegment(function (start, end) {
    97.                       console.log(start,"start")
    98.                       styles.push(new Style({
    99.                         geometry: new Point(start),
    100.                         image: new CircleStyle({
    101.                           radius: 4,
    102.                           snapToPixel: false,
    103.                           fill: new Fill({
    104.                             color: 'white'
    105.                           }),
    106.                           stroke: new Stroke({
    107.                             color: '#FF0F0F',
    108.                             width: 2
    109.                           }),
    110.                         })
    111.                       }))
    112.                     })
    113.                   }
    114.                   return styles
    115.                 },
    116.                 zIndex:12
    117.               });
    118.               this.anchorageFeatures.forEach(item=>{
    119.                 this.drawSource.addFeature(new Feature({
    120.                   geometry: new Polygon([item])
    121.                 }));
    122.               })
    123.  
    124.               this.map.addLayer(this.anchorageVectorLayer);
    125.               this.anchorageVector = true;
    126.  
    127.         }
    128.       })
    129.     },

    console.log打印的地方截图：

     

     

     

     

    🔔  感谢：如果觉得博主的文章不错或者对你的工作有帮助或者解决了你的问题，可以关注、支持一下博主，如果三连收藏支持就会更好，在这里博主不胜感激！！！如有疑问可以留言、评论，看到后会及时回复。  

  • 相关阅读:
    flutter产物以aar形式嵌入android原生工程
    【开发心得】Jaxb使用珠玑
    力扣labuladong——一刷day04
    [第七届蓝帽杯全国大学生网络安全技能大赛 蓝帽杯 2023]——Web方向部分题 详细Writeup
    虚拟机上安装集群kafka
    复制东方甄选？顺丰再战直播电商
    自学雅思的教程
    MariaDB简介
    opencv dnn模块 示例(18) 目标检测 object_detection 之 pp-yolo、pp-yolov2和pp-yolo tiny
    css 占位隐藏
  • 原文地址：https://blog.csdn.net/SmartJunTao/article/details/126027751