vue后台系统管理项目-openlayers地图定位、港口数据标记功能

置顶船长在船上

已于 2023-07-24 14:25:50 修改

阅读量3.3k

点赞数 7

CC 4.0 BY-SA版权

分类专栏： vue项目非常实用的功能整理 openlayers Vue 文章标签：前端 javascript vue.js

于 2022-10-01 06:30:00 首次发布

本文链接：https://blog.youkuaiyun.com/SmartJunTao/article/details/127127497

vue项目非常实用的功能整理同时被 3 个专栏收录

27 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

Vue

198 篇文章

订阅专栏

openlayers

11 篇文章

订阅专栏

本文介绍了如何在Vue后台管理系统中利用OpenLayers实现地图定位、港口数据标记及地图操作功能。详细讲解了从接口引入、地图资源加载、数据定义到地图事件处理的全过程，并提供了关键代码示例。同时，强调了动态加载数据和优化性能的策略，以及地图拖拽和点击事件的响应。最后，鼓励读者互动交流，共同学习前端开发知识。

openlayers地图功能

使用openlayers开发实现查找的货源在地图的显示标注，点击货源图标进行当前港口信息显示；

通过查询的港口列表数据，点击当前港口在地图定位显示，添加港口选中标记功能；

OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问。

OpenLayers是一个用于开发WebGIS客户端的JavaScript包。

在操作方面，OpenLayers 除了可以在浏览器中帮助开发者实现地图浏览的基本效果，比如放大（Zoom In）、缩小（Zoom Out）、平移（Pan）等常用操作之外，还可以进行选取面、选取线、要素选择、图层叠加等不同的操作，甚至可以对已有的OpenLayers 操作和数据支持类型进行扩充，为其赋予更多的功能。

openlayers官方文档学习：

OpenLayers - Quick Start

实现效果：

channelMap.vue页面

注意事项：

定义地图id为mapDiv，方便获取实现地图渲染

<div id="mapDiv"></div>

自定义弹窗功能：

<!-- 弹窗元素 -->
<div class="popup serchPopup" ref="popup" v-show="showPopup" >
    <div class="ship-header" v-show="portName">
        <div class="cname">{
   
   {portName}}<span class="pr20"></span></div>
        <img class="icon-close" @click="closePopup" src="../../assets/sy_close.png"/>
     </div>
</div>