前端使用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)(希望可以多点人一起研究)

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

被折叠的 条评论
为什么被折叠?



