MapBoxGL 加载矢量服务MVT

最新推荐文章于 2024-08-13 08:19:53 发布

一碗老面i

最新推荐文章于 2024-08-13 08:19:53 发布

阅读量2.4k

点赞数

分类专栏： MapBox GL 文章标签： web gis webgl

本文链接：https://blog.csdn.net/qq_29808089/article/details/109737770

版权

MapBox GL 专栏收录该内容

11 篇文章 4 订阅

订阅专栏

效果图：

代码：

注意addLayer里面的"source-layer": "county"，county对应矢量服务的图层名！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>MapBoxGL</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<link href="./lib/mapboxdev/mapbox-gl.css" rel="stylesheet" />
		<script src="lib/mapboxdev/mapbox-gl.js"></script>
		<style>
			body {
				margin: 0;
				padding: 0;
			}

			#map {
				position: absolute;
				top: 0;
				bottom: 0;
				width: 100%;
			}
			.mapboxgl-canvas{
				outline: none;
			}
		</style>
	</head>
	<body>
		<div id="map"></div>
		<script>
			let localhost = window.location.origin;
			var map = new mapboxgl.Map({
				container: 'map',
				style: {
					"version": 8,
					"sprite": localhost + "/MapBoxGL/css/sprite",
					"glyphs": localhost + "/MapBoxGL/css/font/{fontstack}/{range}.pbf",
					"sources": {},
					"layers": [],
				},
				center: [117.110805, 36.663046],
				zoom: 4
			});
			map.on('load', function() {
				map.addSource('mapVector', {
					"type": "vector",
					'tiles': [
						'http://192.168.0.219/rscb/district/v1/region/{z}/{x}/{y}?code=410000'
					],
				});
				map.addLayer({
					"id": "背景",
					"type": "background",//背景
					"paint": {
						"background-color": "#87c2e4",//背景色		
						"background-opacity": 0.5,//背景透明度
						// "background-pattern":
						
					}
				}, )
				map.addLayer({
					"id": "mapVector1",
					"type": "fill",
					"source": "mapVector",
					"source-layer": "province",
					"paint": {
						"fill-color": "rgb(53, 175, 109)",
						"fill-opacity": 0.5,
						"fill-outline-color": "rgb(53, 175, 109)"
					}
				});
				map.addLayer({
					"id": "mapVector2",
					"type": "fill",
					"source": "mapVector",
					"source-layer": "city",
					"paint": {
						"fill-color": "rgb(53, 175, 109)",
						"fill-opacity": 1,
						"fill-outline-color": "rgb(53, 175, 109)"
					}
				});
				map.addLayer({
					"id": "mapVector3",
					"type": "fill",
					"source": "mapVector",
					"source-layer": "county",
					"paint": {
						"fill-color": "rgb(53, 175, 109)",
						"fill-opacity": 1,
						"fill-outline-color": "rgb(53, 175, 109)"
					}
				});
				map.addLayer({
					'id': '线1',
					'type': 'line',
					'source': 'mapVector',
					'source-layer': 'province',
					'layout': {
						'line-cap': 'round',
						'line-join': 'round'
					},
					'paint': {
						'line-opacity': 0.6,
						'line-color': 'rgba(255, 214, 211, 0.98)',
						'line-width': 2
					}
				})
				map.addLayer({
					'id': '线2',
					'type': 'line',
					'source': 'mapVector',
					'source-layer': 'city',
					'layout': {
						'line-cap': 'round',
						'line-join': 'round'
					},
					'paint': {
						'line-opacity': 0.6,
						'line-color': 'rgba(255, 214, 211, 0.98)',
						'line-width': 2
					}
				})
				map.addLayer({
					'id': '线3',
					'type': 'line',
					'source': 'mapVector',
					'source-layer': 'county',
					'layout': {
						'line-cap': 'round',
						'line-join': 'round'
					},
					'paint': {
						'line-opacity': 0.6,
						'line-color': 'rgba(255, 214, 211, 0.98)',
						'line-width': 2
					}
				})
				map.addLayer({
					"id": "线光晕",
					"type": "line",
					"source": "mapVector",
					"source-layer": "province",
					"minzoom": 3,
					"maxzoom": 11,
					"paint": {
						"line-offset": -3,
						"line-color": "rgba(255, 214, 211, 0.98)",
						"line-width": {
							"stops": [
								[3, 4],
								[4, 6],
								[6, 8]
							]
						}
					}
				})
				map.addLayer({
					"id": "point_name1",
					"type": "symbol",
					"source": "mapVector",
					"source-layer": "province",
					"layout": {
						"text-field": "{name}",
						// "text-font": ["DIN Offc Pro Bold", "Arial Unicode MS Bold"],
						"text-size": [
							"interpolate",
							["linear"],
							["zoom"],
							4, 9,
							6, 12
						]
					},
					"paint": {
						"text-color": "#000000",
						"text-halo-width": 2,
						// "text-halo-color": "rgba(0, 0, 0, 0.85)"
					},
					"minzoom":0,
					"maxzoom":22
				});
				
				// map.addLayer({
				// 	"id": "point_name2",
				// 	"type": "symbol",
				// 	"source": "mapVector",
				// 	"source-layer": "city",
				// 	"layout": {
				// 		"text-field": "{name}",
				// 		// "text-font": ["DIN Offc Pro Bold", "Arial Unicode MS Bold"],
				// 		"text-size": [
				// 			"interpolate",
				// 			["linear"],
				// 			["zoom"],
				// 			4, 9,
				// 			6, 12
				// 		]
				// 	},
				// 	"paint": {
				// 		"text-color": "#000000",
				// 		"text-halo-width": 2,
				// 		// "text-halo-color": "rgba(0, 0, 0, 0.85)"
				// 	},
				// 	"minzoom":4,
				// 	"maxzoom":22
				// });


				map.on('mousemove', 'point_name', function(e) {
					
				});
				map.on('mouseleave', 'mapVector', function(e) {
					let zoom = map.getZoom();
				});				
				
			});
		</script>

	</body>
</html>