leaflet.js开源地图

最新推荐文章于 2024-07-18 22:00:00 发布

dragonzoebai

最新推荐文章于 2024-07-18 22:00:00 发布

阅读量3.1k

点赞数

分类专栏： javascript ArcGIS API 文章标签： leaflet JavaScript 开源地图

本文链接：https://blog.csdn.net/dragonzoebai/article/details/17462719

版权

javascript 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

ArcGIS API

3 篇文章 0 订阅

订阅专栏

http://leafletjs.com/

leaflet.js基础知识

<!DOCTYPE html>
<html>
<head>
	<title>Leaflet Quick Start Guide Example</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<!-- 引用 -->
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css" />
	<script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
	
	<!-- 引用本地 -->
	<!-- <link rel="stylesheet" href="debug/leaflet.css" />
	<script type="text/javascript" src="debug/deps.js"></script>
	<script src="debug/leaflet-include.js"></script> -->
	
	<script>
		window.οnlοad=function(){
			//初始化地图控件
			//var map = L.map('map').setView([51.505, -0.09], 13);
			var map = L.map('map', {center: [51.505, -0.09],zoom: 15});
			//添加图层
			L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
				maxZoom: 18,
				attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
			}).addTo(map);
			//添加点标记
			L.marker([51.5, -0.09]).addTo(map).bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
			//添加circle
			L.circle([51.508, -0.11], 500, {
				color: 'red',
				fillColor: '#f03',
				fillOpacity: 0.5
			}).addTo(map).bindPopup("I am a circle.");
			//添加polygon
			L.polygon([
				[51.509, -0.08],
				[51.503, -0.06],
				[51.51, -0.047]
			]).addTo(map).bindPopup("I am a polygon.");
			//给地图点击添加弹窗事件
			var popup = L.popup();
			function onMapClick(e) {
				popup
					.setLatLng(e.latlng)
					.setContent("You clicked the map at " + e.latlng.toString())
					.openOn(map);
			}
			map.on('click', onMapClick);
		};
	</script>
</head>
<body>
	<div id="map" style="width: 1500px; height: 900px"></div>
</body>
</html>

-----------------------------------------------------------------------------------------------------------------------------------------

添加点样式的一些

<!DOCTYPE html>
<html>
<head>
	<title>marker test</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<!-- <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css" />
	<script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script> -->
	
	<link rel="stylesheet" href="debug/leaflet.css" />
	<script type="text/javascript" src="debug/deps.js"></script>
	<script src="debug/leaflet-include.js"></script>
	
	<script>
		window.οnlοad=function(){
			//初始化地图控件
			//var map = L.map('map').setView([51.505, -0.09], 13);
			var map = L.map('map', {center: [51.505, -0.09],zoom: 15});
			//map.attributionControl.addAttribution("Earthquake data © GeoNames");
			//添加图层
			L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
				maxZoom: 18,
				attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
			}).addTo(map);
			//添加点标记
			L.marker([51.5, -0.09]).addTo(map).bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
			//添加自定义图标的点标记
			var greenIcon = L.icon({
				iconUrl: 'debug/images/leaf-green.png',
				shadowUrl: 'debug/images/leaf-shadow.png',

				iconSize:     [38, 95], // size of the icon
				shadowSize:   [50, 64], // size of the shadow
				iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
				shadowAnchor: [4, 62],  // the same for the shadow
				popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
			});
			L.marker([51.502, -0.093], {icon: greenIcon,title:"hello world"}).addTo(map).bindPopup("I am a marker.");
			//添加自定类图标的点标记
			var LeafIcon = L.Icon.extend({
				options: {
					shadowUrl: 'debug/images/leaf-shadow.png',
					iconSize:     [38, 95],
					shadowSize:   [50, 64],
					iconAnchor:   [22, 94],
					shadowAnchor: [4, 62],
					popupAnchor:  [-3, -76]
				}
			});
			var greenIcon = new LeafIcon({iconUrl: 'debug/images/leaf-green.png'}),
				redIcon = new LeafIcon({iconUrl: 'debug/images/leaf-red.png'}),
				orangeIcon = new LeafIcon({iconUrl: 'debug/images/leaf-orange.png'});
			L.icon = function (options) {
				return new L.Icon(options);
			};
			L.marker([51.499, -0.1], {icon: greenIcon}).addTo(map).bindPopup("I am a green leaf.");
			L.marker([51.496, -0.1], {icon: redIcon}).addTo(map).bindPopup("I am a red leaf.");
			L.marker([51.493, -0.1], {icon: orangeIcon}).addTo(map).bindPopup("I am an orange leaf.");
		};
	</script>
</head>
<body>
	<div id="map" style="width: 1500px; height: 900px"></div>
</body>
</html>