vue上用leaflet自适应加载自己的geoserver上的高清地图

目录

一、leaflet地图加载

1.新建div，id为map

2.在method里面新建初始化方法

3.在mouted中调用初始化方法，initmap（）

二、加载自己的高清地图，通过geoserver的wms服务

1.获取名称

2.wms服务加载

3.绑定事件

---

一、leaflet地图加载

1.新建div，id为map

<template>
  <div class="map-container" id="map"></div>
</template>

2.在method里面新建初始化方法

data() {
    return {
    map:"",
    layerGroups:"",

    }
}

methods:{
initmap(){
    this.map = L.map('map',{
        center: [23.15763794413284, 113.34546817452538], // 地图中心
        maxNativeZoom: 18,
        maxZoom: 100,  //最大放大倍数
        minZoom: 3, //最小缩小倍数
        zoom: 18, //默认放大倍数
        zoomControl: false,
        attributionControl: false,
        crs: L.CRS.EPSG3857,
      })
    L.tileLayer(url, {
        zoomOffset: -1,
        tileSize: 512,
        maxZoom: 100,
        minNativeZoom: 0,
        maxNativeZoom: 100
      }).addTo(this.map) //加载底图，url为底图瓦片地址，tips：不同瓦片底图可能有偏移
}
this layerGroups = new L.FeatureGroup({}).addTo(this.map) //初始化图层组，用于放自己的高清地图（或者路径点信息之类）

}

3.在mouted中调用初始化方法，initmap（）

 mounted() {
    this.initmap();
  },

二、加载自己的高清地图，通过geoserver的wms服务

1.获取名称

首先要做的是跟自己后端请求需要加载的地图或者点图路径图的wms服务名称，这里指的是在geoserver上传后，图层预览里面能看到的名称

2.wms服务加载

通过leaflet的wms服务获取图层然后加载到地图里面

var url ='示例：http：//110.110.110.110:8888/geoserver/mylayer/wms' //geoserver的地址（可能有的需要端口号）+‘/geoserver/’+geoserver工作区的名称+‘/wms’
var a = L.tileLayer
              .wms(url, {
                layers: '请求到的地图名称',
                service: "WMS",
                transparent: true,
                format: "image/png",
                crs: L.CRS.EPSG4326,
                maxZoom: 100
              })
              .addTo(this.map);
 this.layerGroups.addLayer(a);

3.绑定事件

一般可以绑定点击事件去触发加载，例如绑定 mouseup（鼠标松开时触发）

this.map.on('mouseup', e =>{
//触发事件
})
// map是放在data里的map