Vue+OpenLayers7入门到实战：OpenLayers加载船讯网航海地图瓦片到地图上

原创 已于 2024-03-09 21:25:59 修改 · 766 阅读 · 1 ·
CC 4.0 BY-SA版权
本博客所有文章、代码和作品版权归博主eguid所有，未经博主允许不得私自改编和转载，侵权必究。关注博主微信公众号：eguid
文章标签：

#vue.js #前端 #javascript #openlayers #OpenLayers7 #航海图

于 2024-02-20 09:40:28 首次发布
本文介绍了如何使用Vue+OpenLayers7在地图上加载船讯网航海地图瓦片，适用于海洋相关行业。详细讲解了依赖安装、Vue中OpenLayers7的使用方法，以及无需船讯网官方key的航海图规则分析和代码实现。

返回《Vue+OpenLayers7》专栏目录：Vue+OpenLayers7入门到实战

前言

本章介绍如何使用OpenLayers7在地图上加载船讯网航海地图瓦片到地图上的功能。
适用于海运等海洋相关行业使用。

Vue+OpenLayers7入门到实战

二、依赖和使用

"ol": "7.5.2"
  1. 使用npm安装依赖
npm install ol@7.5.2
  1. 使用Yarn安装依赖
    2. </
了解本专栏 订阅专栏 解锁全文
openlayers：实现加载海图（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
02-12 1038
openlayers：实现加载海图（附完整源码）
OpenSeaMap-开源
04-27
OpenSeaMap的目标是将水手可能感兴趣的航海和旅游信息添加到OSM（OpenStreetMap）中，并以令人愉悦的方式进行显示。 这些信息包括信标，浮标以及其他海标和港口信息。
leaflet地图+vue 简单效果
weixin_51109349的博客
08-27 582
【代码】leaflet地图+vue 简单效果。
vue-leaflet使用教程（一）
最新发布
qq_45751819的博客
11-16 875
是一个专为 Vue 3 设计的地图组件库，它是对 Leaflet.js 的 Vue 封装。Leaflet 是一个开源的、轻量级的 JavaScript 地图库，而 vue-leaflet 让开发者能够以 Vue 组件的方式使用 Leaflet 的功能。
项目引入船讯网海图插件
那片枫叶~
06-20 3144
船讯网-海图控件使用方式 这个控制，我在百度 谷歌 知乎 掘金 思否 都搜不到一篇相关的文章-- ，太稀有了， 链接：http://api.shipxy.com/ 下面是一个demo，这个根据官网看入门使用介绍，可能像我这种小白就会踩坑，这个组件竟然要在web服务上才会加载渲染出来，不像echart那些，能直接用过cdn加载出来，原理不懂，我用html+node搞出来的，没尝试到vue项目，不知道需不要node服务，这个控件是基于JQ+layui 效果如何： 1、这是我设置的demo，通过node实现
OpenLayers 学习（四）电子海图的图层切换控件
Stonesk的博客
03-16 3117
在整理叠加图层时，发现有时需要切换地图，试用Control.LayerSwitcher实现。 源码如下： 电子海图的图层切换控件 html, body { width: 100%; height: 100%; margin: 0; padding: 0; } function init() { // 使用指定的文档元素创建地图 var map = new OpenLay
leaflet电子海图加载openseamap，使用vue
huang__c的博客
04-23 3444
前端使用vue+leafet显示openseamap openseamap是海图信息图片，而且是开源的，所以需要有一个底图，我选择的底图为openstreetmap 要在leaflet中显示正常的电子海图，需要同事加载这两个图片，openstreetmap在下面，openseamap在上面 有两种方法加载电子海图： 1、通过法国人发布的github方法snosan-tools/avurnavs.snosan.fr: Site web offrant une carte des AVURNAVs en
关于WEB端实现电子海图之Openlayers加载切片
zilvzsy的博客
11-25 2287
GeoServer完成shp文件切矢量图后，使用Openlayers加载GeoServer切片在web上展示
vue+ArcGIS API for JavaScript(1)——加载地图
子时不睡的博客
07-30 1850
前言 因为要做一个和ArcGIS相关的项目，所以记录一下自己的学习过程。 我使用的版本 ： VScode vue-cli 版本：4.5.13 ArcGIS API for JavaScript 文档（4.20版本）： ArcGIS API for JavaScript 主要还是跟着文档走 正文 有多种方式来将ArcGIS API for JavaScript引入自己的应用程序中，我是通过ES模块来构建的项目。 1. 先安装模块。 npm install @arcgis/core 安装之后看一下node_m
WebGIS实战：Vue+Openlayers实现网络地图的加载与切换
Oruizn的博客
12-13 3590
WebGIS实战：Openlayers实现网络地图的加载与切换
openlayers中海图的加载
LZUGIS
07-07 1820
概述 在openlayers中直接加载海图会有偏移，这是因为海图的坐标是做了便宜的，所以需要定义海图的坐标，本文将讲述如何实现，并对比OSM和高德。 效果 实现 <!DOCTYPE html> <html> <head> <title>XYZ</title> <meta charset="utf-8"> <link rel="stylesheet" href="https://openlayers.org/en/v4
电子海图浏览器,电子海图二次开发，电子海图源码分享
06-07
基于qt构建的电子海图浏览器，提供二次开发引擎，源码跨平台可售，完全符合电子海S57显示标准的电子海图浏览器，更多下载请前往：http://www.sailxy.com
电子海图免费版
09-21
电子海图免费版本
eLand Viewer电子海图显示软件
04-06
eLand Viewer为一款可以显示符合S-57标准的电子海图系统
web电子海图开发包，OpenLayers 4 开发包，
06-10
OpenLayers是一个用于开发WebGIS客户端的JavaScript包，最初基于BSD许可发行。OpenLayers是一个开源的项目，其设计之意是为互联网客户端提供强大的地图展示功能，包括地图数据显示与相关操作，并具有灵活的扩展机制。目前OpenLayers已经成为一个拥有众多开发者和帮助社区的成熟、流行的框架。 查看演示请前往 航易电子海图开发：http://www.sailxy.com
Vue+OpenLayers7入门到实战：OpenLayers懒加载瓦片，点击事件后才开始加载瓦片，初始化地图时不加载瓦片
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
03-12 471
本章介绍如何使用OpenLayers7怎么在地图初始化时不加载瓦片，通过事件触发才开始懒加载地图瓦片图层。
Vue+OpenLayers7入门到实战：OpenLayers7地图整合到Vue项目中的两种方式
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
01-24 724
OpenLayers本身已经是支持模块化，所以引入vue项目很简单。在vue中使用OpenLayers，最简单的是混合方式。直接在vue项目中和前端代码混在一起写，适合业务简单的项目。另一种是与前端代码分离的方式，前端写前端的代码。GIS写GIS的代码，各写各的，互不影响。最后前端以模块化的方式使用地图功能代码，这样可以实现gis地图功能代码复用，引入其他地方也可以复用。虽然两种方式最终实现功能是一样的，但是当代码越来越多，业务越来越复杂，后面代码分离方式是最优选，可以实现数据和地图功能的解耦。
Vue+OpenLayers7入门到实战目录，OpenLayers7中文文档，OpenLayers7中文手册，OpenLayers7中文教程，OpenLayers7文档pdf
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
03-04 3504
本篇作为《Vue+OpenLayers7入门到实战》所有文章的二合一汇总目录，方便查找。本专栏源码是由OpenLayers7.x版本结合Vue框架编写。本专栏从Vue搭建脚手架到如何引入OpenLayers7依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实战案例，带领大家快速上手Vue+OpenLayers7开发。
Vue+OpenLayers6从入门到实战进阶案例汇总目录，Vue+OpenLayers6地图整合教程，OpenLayers6中文文档，OpenLayers6中文手册
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
10-31 4912
本篇作为《Vue+OpenLayers入门教程》和《Vue+OpenLayers实战进阶案例》所有文章的二合一汇总目录，方便查找。 > 本专栏源码是由OpenLayers结合Vue框架编写。 > 本专栏从Vue搭建脚手架到如何引入OpenLayers依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实战案例，带领大家快速上手Vue+OpenLayers开发。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

汤姆猫不是猫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值