《 Leaflet 》显现

不倒翁丶

已于 2022-10-19 11:35:05 修改

阅读量577

点赞数 1

分类专栏：前端文章标签： javascript

于 2021-12-23 16:41:38 首次发布

本文链接：https://blog.csdn.net/weixin_46059971/article/details/122110943

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1. 效果

在这里插入图片描述

2. 外部资源

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/leaflet/1.7.1/leaflet.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/leaflet/1.7.1/leaflet.min.js"></script>
<style>
	*{
		margin:0;
		padding:0;
		box-sizing: border-box;
	}
	body{
		position: absolute;
		width: 100%;
		height: 100%;
	}
	#map{
		width: 100%;
		height: 100%;
		border: 1px solid rgba(22,22,22,0.7);
	}
</style>
<script type="text/javascript">
	/** 
	 * leaflet chinese.js 配置 leaflet 中国地图数据源
	 */
	!function(){
		L.TileLayer.ChinaProvider = L.TileLayer.extend({
		    initialize: function(type, options) { 
		        var providers = L.TileLayer.ChinaProvider.providers
		          , parts = type.split('.')
		          , providerName = parts[0]
		          , mapName = parts[1]
		          , mapType = parts[2]
		          , url = providers[providerName][mapName][mapType];

		        options.subdomains = providers[providerName].Subdomains;
		        L.TileLayer.prototype.initialize.call(this, url, options);
		    }
		});
		L.TileLayer.ChinaProvider.providers = {
		    GaoDe: {
		        Normal: {
		            Map: 'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
		        },
		        Subdomains: ["1", "2", "3", "4"]
		    },
		};

		L.tileLayer.chinaProvider = function(type, options) {
		    return new L.TileLayer.ChinaProvider(type, options);
		};
	}();
</script>

3. DOM 元素

<body style="padding:10px;">
	<div id="map"></div>
</body>

4. JS

// 简易版地图生成器
function createMap(){
	var map = L.map('map', {
      	center: [ 39.904179,116.407387 ],
      	zoom: 10,
      	zoomControl: false,
      	attributionControl: false,
  	});
   	var normalm = L.tileLayer.chinaProvider('GaoDe.Normal.Map',{
      	minZoom: 3,
        maxZoom: 17,
   	});
	map.addLayer(normalm);
	return map;
}

var map = createMap();

5. 完整代码

<!DOCTYPE html>
<html>
<head>
	<title>Leaflet 显现</title>
	<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/leaflet/1.7.1/leaflet.min.css">
	<script src="https://cdn.bootcdn.net/ajax/libs/leaflet/1.7.1/leaflet.min.js"></script>
	<style>
		*{
			margin:0;
			padding:0;
			box-sizing: border-box;
		}
		body{
			position: absolute;
			width: 100%;
			height: 100%;
		}
		#map{
			width: 100%;
			height: 100%;
			border: 1px solid rgba(22,22,22,0.7);
		}
	</style>
	<script type="text/javascript">
		/** 
		 * leaflet chinese.js 配置 leaflet 中国地图数据源
		 */
		!function(){
			L.TileLayer.ChinaProvider = L.TileLayer.extend({
			    initialize: function(type, options) { 
			        var providers = L.TileLayer.ChinaProvider.providers
			          , parts = type.split('.')
			          , providerName = parts[0]
			          , mapName = parts[1]
			          , mapType = parts[2]
			          , url = providers[providerName][mapName][mapType];

			        options.subdomains = providers[providerName].Subdomains;
			        L.TileLayer.prototype.initialize.call(this, url, options);
			    }
			});
			L.TileLayer.ChinaProvider.providers = {
			    GaoDe: {
			        Normal: {
			            Map: 'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
			        },
			        Subdomains: ["1", "2", "3", "4"]
			    },
			};

			L.tileLayer.chinaProvider = function(type, options) {
			    return new L.TileLayer.ChinaProvider(type, options);
			};
		}();
	</script>
</head>
<body style="padding:10px;">
	<div id="map"></div>	
</body>

<script type="text/javascript">
	// 简易版地图生成器
   	function createMap(){
		var map = L.map('map', {
	        center: [ 39.904179,116.407387],
	        zoom: 10,
	        zoomControl: false,
	        attributionControl: false,
	    });
      	var normalm = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {
	        minZoom: 3,
	        maxZoom: 17,
      	});
		map.addLayer(normalm);
		return map;
	}
	var map = createMap();
	</script>
</html>