mpabox gl加载矢量切片服务

荣默默

于 2022-02-11 15:16:26 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/rt2016/article/details/122881339

这段代码展示了如何在地图应用中加载矢量切片服务，使用的是TMS协议和PBF格式的数据。同时，它还演示了如何将地图英文标注转换为中文，通过设置MapboxGL的RTLTextPlugin插件并切换默认语言为简体中文。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码如下：

	//加载矢量切片服务
				map.addSource('qing_', {
					'type': 'vector',
					'scheme': 'tms',
					'tiles': [
						'http://localhost:8085/geoserver/gwc/service/tms/1.0.0/myTest%3Aexport_output_1@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf'

					]
				});
				map.addLayer({
					'id': 'point1',
					'type': 'circle',
					'source': 'qing_',
					"source-layer": "export_output_1",
					'paint': {
						'circle-radius': 5,
						'circle-color': '#5500ff'
					},
					'filter': ['==', '$type', 'Point']
				});

// 英文标注转换为中文
			mapboxgl.setRTLTextPlugin(
				'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js');
			map.addControl(new MapboxLanguage({
				defaultLanguage: 'zh-Hans'
			}));