leaflet电子海图加载openseamap，使用vue

最新推荐文章于 2025-06-08 22:17:12 发布

huang__c

最新推荐文章于 2025-06-08 22:17:12 发布

阅读量3.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Electronic Navigational Charts 文章标签： vue

本文链接：https://blog.youkuaiyun.com/huang__c/article/details/116049867

本文介绍如何在前端使用Vue和Leaflet显示OpenSeaMap电子海图，包括两种加载方法：一种通过法国人的GitHub项目，另一种利用JavaScript实现图层叠加。同时提到了底图选择OpenStreetMap，并提供了遇到问题时的联系方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端使用vue+leafet显示openseamap

openseamap是海图信息图片背景为灰色，而且是开源的，所以需要有一个底图，我选择的底图为openstreetmap，也是一个开源地图

要在leaflet中显示正常的电子海图，需要同事加载这两个图片，openstreetmap在下面，openseamap在上面

有两种方法加载电子海图：

1、通过法国人发布的github方法 (https://github.com/snosan-tools/avurnavs.snosan.fr)

以下为vue的代码，唯一需要的是安装vue2-leaflet的插件和leaflet插件，两个是不同插件，所以要多安装vue2-leaflet的插件，他是通过html方法去实现的

<template>
  <div class="map">
    <l-map :zoom="zoom" :center="center">
      <l-tile-layer :url="url"></l-tile-layer>
      <l-tile-layer :url="xxx"></l-tile-layer>
    </l-map>
  </div>
</template>

<script>
import { LMap, LTileLayer} from 'vue2-leaflet';

export default {
  name: 'example',
  components: {
    LMap,
    LTileLayer,
  },
  da