var than = this; //改变this指向
this.map = new L.Map("map", {
doubleClickZoom: false, // 禁用双击放大
center: [25.83464890951628, 116.34460676774563],
// maxZoom: 30,
// zoom: 16,
// minZoom: 15,
zoomControl: true,
attributionControl: true,
crs: L.CRS.EPSG3857,
}).setView([51.505, -0.09], 13);
var osmUrl = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
osmAttrib =
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, { maxZoom: 20, attribution: osmAttrib });
var url =
"http://IP:端口号/fcgi/gserver?map=/gssl/service/maps/grid.map";
var nexrad = L.tileLayer.wms(url, {
layers: "grid",
format: "image/png",
transparent: true,
crs: L.CRS.EPSG4326,
maxZoom: 20,
version: "1.3.0",
});
var grid = L.gridLayer({
attribution: "Grid Layer",
});
grid.setOpacity(0.2);
grid.createTile = function (coords, done) {
var tile = document.createElement("div");
tile.innerHTML = [coords.x, coords.y, coords.z].join(", ");
tile.style.outline = "2px solid black";
tile.style.background = "white";
tile.style.opacity = "0.6";
setTimeout(function () {
done(null, tile);
}, 500 + Math.random() * 500);
return tile;
};
// var bounds = new L.LatLngBounds(
// new L.LatLng(25.310076429618682, 115.9994845595961124),
// new L.LatLng(26.0428774300000292, 116.671172275477147)
// );
// var bounds = new L.LatLngBounds(
// new L.LatLng(25.5212, 116.3375),
// new L.LatLng(25.8429, 116.3532)
// );
var bounds = new L.LatLngBounds(
new L.LatLng(25.8458, 116.3387),
new L.LatLng(25.8195, 116.3393)
);
// this.map.addLayer(nexrad).fitBounds(bounds);
this.map.addLayer(osm).addLayer(nexrad).addLayer(grid).fitBounds(bounds);
1,首先把这个地图放在静态页面的图层上进行显示。
2,加载之后发现图层不是一个需要单独再定义一个加载图层的方法,而是直接可以显示的一个方法。
3,osm 这个是基础的地图。
4,url 是添加的图层。
5,加载地图的方法是L.tileLayer.wms(url, 记得使用这个,这样地图就可以加载出来了。
6,这个图层是grid ,这个可以利用软件看到这个图层的名字是什么?根据名字来加载地图。
7,
var bounds = new L.LatLngBounds(
new L.LatLng(25.8458, 116.3387),
new L.LatLng(25.8195, 116.3393)
); 这个是设置地图显示的边界,根据这个显示地图的边界。
8, this.map.addLayer(osm).addLayer(nexrad).addLayer(grid).fitBounds(bounds); 这个是把一个图层添加另外一个图层之上。这样就可以显示出来完整的地图了。