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

最新推荐文章于 2024-12-01 10:45:46 发布

原创最新推荐文章于 2024-12-01 10:45:46 发布 · 3.3k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Electronic Navigational Charts 专栏收录该内容

4 篇文章

订阅专栏

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

该文章已生成可运行项目，

前端使用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,
  },
  data () {
    return {
      zoom: 6,
      center:[48, -1.219482],
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      seaUrl: 'https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png',
      xxx:'http:///osm.franken.de/cgi-bin/mapserv.fcgi?',

    }
  },
  methods: {
   
  },
}
</script>
<style>
</style>

2、我自己的方法主要是通过JavaScript的方法去实现的

重点在第55行的sea.addTo(this.map);，使用叠加的方法使得两个图层的叠加

<template>
  <div>
    <div id="leaflet-map"></div>
  </div>
</template>

<script>
import Leaflet from "leaflet";
export default {
  data() {
    return {
      map: null,
      reset_btn: null,
      map_config: {
        center: [39.50404070558415, -111.533203125],
        zoom: 6,
        minZoom: 2,
        maxZoom: 18,
      },
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      var seaUrl = "http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png";
      var osmUrl = "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
      var sea = L.tileLayer(seaUrl, { subdomains: ["a", "b", "c"] });
      var OpenStreetMap = L.tileLayer(osmUrl, { subdomains: ["a", "b", "c"] });

      var baseLayers = {
        OpenStreetMap: OpenStreetMap,
      };
      
      this.map = L.map("leaflet-map", {
        zoomControl: false,
        center: this.map_config.center,
        zoom: this.map_config.zoom,
        minZoom: this.map_config.minZoom,
        maxZoom: this.map_config.maxZoom,
        layers: [OpenStreetMap],
      });

      L.control.zoom({position: "topright",}).addTo(this.map);

      this.map.on("zoomend", (event) => {
        if (this.reset_btn && this.map.getZoom() !== this.map_config.zoom) {
          this.reset_btn.enable();
        }
      });

      L.control.layers(baseLayers, null, { position: "bottomright" }).addTo(this.map);

     sea.addTo(this.map);
    },
  },
};
</script>

<style >
#leaflet-map {
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>

如果有不懂的或者调试出问题的可以联系我的邮箱：（769516427@qq.com）（希望可以多点人一起研究）