leaflet插件imageOverlay简单用法

最新推荐文章于 2024-09-07 09:44:24 发布

耳东二丰一心

最新推荐文章于 2024-09-07 09:44:24 发布

阅读量4.8k

点赞数 1

文章标签： leaflet 地图

<html><head>
	
	<title>Leaflet class diagram - Leaflet</title>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico">

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="">
    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>


	<style>
		html, body {
			height: 100%;
			margin: 0;
		}
		#map {
			width: 600px;
			height: 400px;
		}
	</style>

	<style>#map { width: 100vw; height: 100%; }</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">

    var w = 1200,
        h = 224,
        url = 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2390091895,3621563906&fm=200&gp=0.jpg';
    var map = L.map('map', {
        // crs: L.CRS.Simple,
        maxZoom: 0,
        minZoom: -4,
        center: [0, 0],
        zoom: 1
    });

    var southWest = map.unproject([0, h], map.getMaxZoom() - 1);
    var northEast = map.unproject([w, 0], map.getMaxZoom() - 1);
    var bounds = new L.LatLngBounds(southWest, northEast);
    L.imageOverlay(url, bounds).addTo(map);
    map.setMaxBounds(bounds);
	
	
	进行改造: 背景图上添加自定义标记:
	
	var shadowUrl = "http://leafletjs.com/examples/custom-icons/leaf-shadow.png";
    var orangeUrl = "http://leafletjs.com/examples/custom-icons/leaf-orange.png";
    var redUrl = "http://leafletjs.com/examples/custom-icons/leaf-red.png";
    var greenUrl = "http://leafletjs.com/examples/custom-icons/leaf-green.png";

    var w = 1200,
        h = 224,
        url = 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2390091895,3621563906&fm=200&gp=0.jpg';
    var map = L.map('map', {
        // crs: L.CRS.Simple,
        maxZoom: 0,
        minZoom: -4,
        center: [0, 0],
        zoom: 1
    });

    var southWest = map.unproject([0, h], map.getMaxZoom() - 1);
    var northEast = map.unproject([w, 0], map.getMaxZoom() - 1);
    var bounds = new L.LatLngBounds(southWest, northEast);
	var LeafIcon = L.Icon.extend({
        options: {
            shadowUrl: shadowUrl,
            iconSize: [38, 95],
            shadowSize: [50, 64],
            iconAnchor: [22, 94],
            shadowAnchor: [4, 62],
            popupAnchor: [-3, -76]
        }
    });

    var greenIcon = new LeafIcon({
        iconUrl: greenUrl
    });
    var redIcon = new LeafIcon({
        iconUrl: redUrl
    });
    var orangeIcon = new LeafIcon({
        iconUrl: orangeUrl
    });
    L.marker([0, 0], {
        icon: greenIcon
    }).bindPopup("I am a green leaf.").addTo(map);
    L.marker([0, 100], {
        icon: redIcon
    }).bindPopup("I am a red leaf.").addTo(map);
    L.marker([0, 200], {
        icon: orangeIcon
    }).bindPopup("I am an orange leaf.").addTo(map);

    var image = L.imageOverlay(url, bounds,{interactive:true}).addTo(map);
    // var marker = L.marker([0, 0]).addTo(map);
    map.setMaxBounds(bounds);
	
</script>
</body>
</html>