Windows下,使用Cesium+Mapbox 制作加载矢量瓦片

一、矢量瓦片生成

在这篇博客windows下使用tippecanoe把GeoJSON制作成矢量切片vectortile_十月的秋的专栏-CSDN博客详细介绍了如何在Windows中利用tippecanoe进行切片。

二、矢量瓦片发布

将利用下面命令生成的离线离线pbf瓦片部署到Tomcat下面:

tippecanoe -e lakepbf -pC -Z8 -z14 -f lake.geojson

 三、Cesium调用矢量瓦片服务

该方法是借鉴了github上的源码,使用的Cesium+mapbox-gl,这种方法比Cesium+ol+geoserver方法快太多,只能说Cesium+ol+geoserver数据大一点完全用不了,卡顿到吐血……

github地址:https://github.com/kikitte/MVTImageryProvider.git

将源码下载了之后,按照作者说的

Example

There is an simple example, see example folder. run:

git clone https://github.com/kikitte/MVTImageryProvider.git
cd MVTImageryProvider/example
npm i
npm start

安装node_modules后,文件组织如下:

 接下来就是修改数据地址和配置style了,在index.js中修改下面的代码,主要是style的修改和配置:

var style = {
	version: 8,
	sources: {
		ksdq_tdql: {
			type: "vector",
			tiles: ["http://localhost:8090/ksdq_tdql/{z}/{x}/{y}.pbf"],
			maxzoom: 8,
		},
	},
	layers: [
		{
			id: "land",
			type: "fill",
			source: "ksdq_tdql",
			"source-layer": "ksdq_tdql_4326",
			layout: {},
			paint: {
				"fill-color": "#fff",
				"fill-opacity": 0.5,
			},
		},
	],
};

然后npm start运行就可看到了,运行还是很流畅的!

申明转载请标明出处,不要随手复制粘贴 ,请大家支持原创。

  • 1
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 20
    评论
Cesium是一个基于WebGL的3D地图引擎,可以加载各种类型的地理数据。要加载Mapbox矢量瓦片,您可以按照以下步骤进行操作: 1. 获取Mapbox矢量瓦片的URL。您可以在Mapbox Studio中创建和发布矢量瓦片,然后获取其URL。 2. 创建一个Cesium的ImageryProvider对象。您可以使用Cesium的UrlTemplateImageryProvider类来实现这一点,该类可以从一个URL模板加载图像数据。例如: ```javascript var imageryProvider = new Cesium.UrlTemplateImageryProvider({ url: 'https://api.mapbox.com/styles/v1/{username}/{style_id}/tiles/256/{z}/{x}/{y}?access_token={access_token}', credit: 'Mapbox', minimumLevel: 0, maximumLevel: 22, subdomains: ['a', 'b', 'c'], tilingScheme: new Cesium.WebMercatorTilingScheme(), rectangle: Cesium.Rectangle.fromDegrees(-180.0, -85.06, 180.0, 85.06), customTags: { username: 'mapbox', style_id: 'styleid', access_token: 'your_access_token' } }); ``` 在上面的代码中,您需要将URL模板替换为您的Mapbox矢量瓦片的URL,以及您的Mapbox用户名、样式ID和访问令牌。 3. 创建一个Cesium的ImageryLayer图像图层对象,并将ImageryProvider对象作为参数传递给它。例如: ```javascript var imageryLayer = new Cesium.ImageryLayer(imageryProvider); ``` 4. 将ImageryLayer对象添加到Cesium的Viewer视图器中,以便在地图上显示它。例如: ```javascript viewer.imageryLayers.add(imageryLayer); ``` 通过上述步骤,您就可以将Mapbox矢量瓦片加载Cesium中,实现在3D地图上显示矢量数据的效果。
评论 20
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值