leaflet加载WMS数据并加载多个marker点

最新推荐文章于 2025-05-21 08:50:20 发布

gis_SSS

最新推荐文章于 2025-05-21 08:50:20 发布

阅读量2.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： GIS

本文链接：https://blog.csdn.net/gis_zzu/article/details/102706385

GIS 专栏收录该内容

15 篇文章

订阅专栏

一、加载WMS服务

 var map = L.map('map',{
	  center:[Number(45.59482210127054) ,Number(124.74)],
	  zoom:9,
	  crs:L.CRS.EPSG4326
  });
  
  const bounderLayer =L.tileLayer.wms("http://192.168.43.22:8081/geoserver/newcapec/wms", {
      layers: 'newcapec:webmc',//country
      format: "image/png",
      transparent: true,
	  // crs:L.CRS.EPSG4326
    });

	bounderLayer.addTo(map)

二、加载多个marker并存储各自的id，注意L.marker的第二个参数是用来设置maker的参数信息，但是也可以存储从后台获取关于marker的属性信息

 var markers = []
	for(var i=0;i<5;i++){
		 var data = L.marker([Number(45.0+i*0.7) ,Number(124.74)],{
			  id:"唯一值id"+i
		})
		
		data.on("click",function(e){
			console.log(this)
			console.log("++++",e)
		})
	
		markers.push(data)
	}
   
    var layers = L.layerGroup(markers)
	.addTo(map);

三、全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>leafLet加载几种地图</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="leaflet.css" />
	<script src="leaflet.js"></script>
	<style>
		html,body{
			height: 100%;
			margin: 0;
			padding: 0;
		}
		#map { height: 100%; }
	</style>
</head>
<body>
<div id="map">
</div>
<script>
	console.log(window.location.href)
	console.log(window.location.host)
  var map = L.map('map',{
	  center:[Number(45.59482210127054) ,Number(124.74)],
	  zoom:9,
	  crs:L.CRS.EPSG4326
  });
  
  const bounderLayer =L.tileLayer.wms("http://192.168.43.22:8081/geoserver/newcapec/wms", {
      layers: 'newcapec:webmc',//country
      format: "image/png",
      transparent: true,
	  // crs:L.CRS.EPSG4326
    });
	
	
	bounderLayer.addTo(map)
 
    var markers = []
	for(var i=0;i<5;i++){
		 var data = L.marker([Number(45.0+i*0.7) ,Number(124.74)],{
			  id:"唯一值id"+i
		})
		
		Object.defineProperties(data, {
		  'id': {
			value: i+"djdjdjdjdjdj1",
			writable: true
		  },
		});
		
		data.on("click",function(e){
			console.log(this)
			console.log("++++",e)
		})
	
		markers.push(data)
	}
   
    var layers = L.layerGroup(markers)
	.addTo(map);

  
</script>
</body>
</html>