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

leaflet电子海图加载openseamap，使用vue相关推荐

leaflet入门——地图加载（以arcgis服务为例）
最近由于项目需求,于是开始了leaflet的学习,leaflet在加载地图上具有自己独特的优势,能够在各种浏览器(包括手机)下面很好的运行,并且具有很多的插件供我们选择.在该教程中, 我们使用了除le ...
Leaflet中使用Leaflet.Spin插件实现地图加载等待效果
场景 Leaflet快速入门与加载OSM显示地图: Leaflet快速入门与加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面的基础上,怎样使用插件实现地图加载等待 ...
vue+ol实现 ol 地图加载geojson
一.背景公司需要个简单的二维底图,加载点线面数据,为了省时间就用openlayers框架写一个简单的加载方法,openlayers核心包含Map对象.View视图.Layer图层.Source来源. ...
leaflet地图加载点击获取经纬度
今天刚刚学习leaflet 1.地图加载成功 2.点击获取经纬度信息 https://download.csdn.net/download/qq_38729621/12732189
SuperMap iClient for Leaflet对EPSG:4509图加载滑动查询
作者:John SuperMap iClient for Leaflet对EPSG:4509地图加载&滑动查询在WebGIS开发使用中,我们会遇到地图显示不了,以及查询到数据显示不出的问题, ...
vue使用高德地图加载kml文件
在使用 Vue 的项目中使用高德地图加载 kml 文件,你可以这么做: 在高德地图官网上注册开发者账号并申请应用密钥. 在项目中安装高德地图的 JavaScript API,你可以直接在 HTML 文 ...
vue动图加载图片不能正确显示的解决方法
vue动图加载图片不能正确显示的解决方法解决核心代码运行结果上次解决过一次,没有记录,后来发现有小伙伴问我这个问题,我今天就顺手记录一下,具体的原因我这里就不详细说, 加载不出来简略的原因是v ...
leaflet加载geojson热力图加载坐标组热力图
通过SuperMap Leaflet加载geojson热力图,geojson通过数据服务查询获取到. geojson需要转换为4326坐标. geojson热力图加载 <!DOCTYPE htm ...
geoserver 发布矢量切片（pbf）并用openlayers 6.14 /leaflet 1.8 加载展示（二）（小白必备：超详细教程）
上一篇讲了如何利用geoserver 发布矢量切片,接下来我们说如何去展示,既然做我们就作全面吧,谁让我们gis 就是这么苦逼呢,哈哈. 环境: geoserver 2.21 vue 2.0 op ...

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

前端使用vue+leafet显示openseamap

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

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

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

leaflet电子海图加载openseamap，使用vue相关推荐

最新文章

热门文章