OpenLayers6入门，OpenLayers加载船讯网航海地图

已于 2024-02-20 09:41:42 修改
阅读量596 收藏 2
点赞数 1
分类专栏： # Vue+OpenLayers6入门 Vue+OpenLayers6入门到实战 OpenLayers6一本通 文章标签： vue.js 前端 OpenLayers 船讯网 海图 航海地图
于 2023-08-17 17:50:46 首次发布
本博客所有文章、代码和作品版权归eguid所有，未经博主允许不得私自改编和转载，侵权必究。
本文链接：https://blog.csdn.net/eguid/article/details/132346350
版权
OpenLayers6一本通 同时被 3 个专栏收录 该专栏为热销专栏榜 第30名
132 篇文章 13 订阅 ¥159.90 ¥299.90
订阅专栏
Vue+OpenLayers6入门到实战
121 篇文章 64 订阅 ¥119.90 ¥299.90
订阅专栏
Vue+OpenLayers6入门
69 篇文章 93 订阅 ¥69.90 ¥99.00
订阅专栏
本文档介绍了如何使用OpenLayers6在vue项目中加载船讯网的航海地图，详细解析了航海图的瓦片规则，并提供了代码实现和测试效果演示。
摘要由CSDN通过智能技术生成

专栏目录：
OpenLayers6入门教程汇总目录

前言

本章使用OpenLayers6实现加载船讯网航海地图。
openlayers

二、依赖和使用

"ol": "^6.15.1"
  1. 使用npm安装依赖
npm install ol@6.15.1
  1. 使用Yarn安装依赖
yarn add ol

vue中如何使用：

vue项目使用请参考这篇文章：

了解本专栏 订阅专栏 解锁全文
汤姆猫不是猫
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
订阅专栏
59.（leaflet之家）leaflet动态画线
GIS之家家长
05-19 477
听老人家说：多看美女会长寿 leaflet之家总目录（订阅之前建议先查看该博客） 文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。 效果如下所示： 下面献上完整代码，代码重要位置会做相应解释 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <ti
船讯网API典型应用场景介绍
04-27
船讯网API典型应用场景介绍
Vue项目-OpenLayers地图初始化
StupidlyGrass的博客
11-20 662
定义相机的初始显示位置// fromDegrees() 参数依次为：经度，纬度，相机高度});
openlayers入门教程
weixin_43239880的博客
06-06 1万+
openlayers基础入门到实战平铺图层。对于提供预呈现、平铺的网格图像的层源，这些网格按特定分辨率的缩放级别组织。图像图层。服务器呈现的映像，可用于任意范围和分辨率。(3)ol.layer.Vector()很常用矢量图层。矢量平铺图层。图层用于客户端呈现矢量平铺数据。
vue2和vue3中使用openlayers离线地图（一）
林依.的博客
07-20 5038
vue使用openlayers离线地图
【开源WebGIS】08-Openlayers+Vue 热力图
老靳的WebGIS
11-07 1011
【开源WebGIS】08-Openlayers+Vue 热力图
openlayers入门学习
weixin_45031595的博客
01-22 2967
参考文档 Openlayers官网 EPSG:3857和EPSG:4326区别详解 npm安装 cnpm i -S ol OSM地图服务 参考文档01 参考文档02 组件使用 <template> <div class="home"> <div id="map"></div> </div> </template> <script> import "ol/ol.css"; import { Map, Vi
使用openlayers加载离线地图实例
10-06
本实例将详细介绍如何利用OpenLayers加载离线地图，并通过mui将其打包成移动应用。 首先，理解OpenLayers的核心概念至关重要。OpenLayers是一个开源的JavaScript库，它允许开发者在网页中嵌入地图，支持多种地图...
openlayers加载瓦片地图并手动标记坐标点
04-29
本教程将详细介绍如何使用OpenLayers加载瓦片地图以及手动在地图上标记坐标点。 一、OpenLayers 瓦片地图 瓦片地图是一种常见的地图展示方式，它将大尺寸的地图分割成多个小块（即“瓦片”），每个瓦片都是一个较...
openlayers 加载天地图示例
02-24
本示例将详细讲解如何使用OpenLayers来加载并操作天地图。 首先，我们需要理解OpenLayers的基本结构。一个OpenLayers地图应用通常由以下几个主要部分组成：地图容器、投影、图层和控制。地图容器是地图显示的地方，...
openlayers5加载天地图影像.zip
06-23
本文将深入探讨如何使用OpenLayers 5加载天地图影像，这是一个中国本土的、提供丰富地理信息的在线地图服务。 首先，了解基本概念。天地图是中国测绘科学研究院开发的地理信息系统，它提供了多种地图服务，包括影像...
openlayers加载静态图片地图
10-31
本教程将详细介绍如何使用OpenLayers加载静态图片地图，并探讨其流畅操作、可控显示范围和等级设置。 首先，为了加载静态图片，我们需要准备好图片资源。这些图片通常是一系列按照特定比例尺分块的图像，每一块对应...
OpenLayers入门（一）
jcxxs_xm的博客
01-07 8299
Openlayers入门教程OpenLayers入门（一）新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 OpenLayers入门（一） 大家好，由于最近开始做webgis方面的东西，所以对openlayers需要了解学
关于WEB端实现电子海图之Openlayers加载切片
zilvzsy的博客
11-25 1819
GeoServer完成shp文件切矢量图后，使用Openlayers加载GeoServer切片在web上展示
VUE+OpenLayer动态显示船舶位置信息
github_31946551的博客
05-23 571
特此来总结一下开发心得。使用的是openlayer组件库来实现海图的展示，底图为离线瓦片地图。获取后端数据，判断坐标物是否已存在，存在则更新位置信息、无需新增图层（首次为新增图层。目标：实现前端定时发请求给后端，依据后端返回数据，在地图中展示物体实时坐标信息。目前项目中需要使用海图来展示船舶位置信息。
OpenLayers入门-第一篇、基本概念与核心组件
球球不吃虾WHR2349博客
04-24 1万+
学习一下openlayers里面的一些基本概念，npm地址。 npm install ol OpenLayers是一个高性能、功能丰富的库，用于在web上创建交互式地图。它可以显示地图瓷砖，矢量数据和标记加载从任何来源在任何网页。OpenLayers的开发是为了进一步使用各种地理信息。它是完全免费的，开源JavaScript。 1.Map A map is made of layers, a view to visualize them, interactions to modify map co
vue+openLayers入门教程
热门推荐
ScoloveCode的博客
09-14 2万+
介绍: OpenLayers官网 OpenLayers插件类型 可以理解为专门处理地图的一个库 其中有两大类 map和view,map是ol中的核心组件,初始化一副地图(map),时,至少需要一个可视化区域(view),一个或多个图层(layer)和一个地图加载的挂载点(target) 1.vue中使用Openlayers 注意:地图容器需要设置宽高,否则看不到初始化的地图效果 地图介绍 一.关于投影 ​ 1.投影,地球不是正圆的球体,是一个不规则的椭圆体,所以我们要是想让它展开在桌面上,就会发现地图都会和
【开源WebGIS】06-Openlayers+Vue 画点、线、面
老靳的WebGIS
11-01 1441
【开源WebGIS】06-Openlayers+Vue 画点、线、面
Element学习（布局组件、案例操作）（4）
最新发布
m0_74363339的博客
08-08 459
value：表示输入的值，提交表单后传给服务器的值——>"男"表示1，"女"表示2。定义数据模型时，对象要使用大括号。像这里searchForm: {....}3、这一步之后的效果展示（只是空有一个布局——>目前还没有任何的内容）2、找到这种布局对应的代码（复制——>粘贴到标签<div>中）5、 在主展示区域的上方添加"员工查询"的（且独占一行）表单。还有一个当点击"查询"按钮时，会触发一个方法，也要去声明。7、给表格增加一个边框——>加入border属性即可。6、日期选择器——>(官网中组件中找)
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

汤姆猫不是猫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值