Deck.GL图层

提示

deckgl图层以插件形式提供，需要通过 vjmap.addScript({src: "js/deck.gl.min.js"}) 加载其脚本。

开始

// 下面增加deck的图层
if (typeof deck !== "object") {
    // 如果没有deck环境
    await vjmap.addScript({
        src: "js/deck.gl.min.js"
    });

}
const deckLayer = new vjmap.DeckLayer({
    id: 'deck',
    type: deck.ArcLayer,
    ...
});
map.addLayer(deckLayer);

具体用法请参考deck.gl (opens new window)官网

示例

亲手试一试

#

(async () => {
	// --deck弧线图层--
	// 地图服务对象
	let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
	// 打开地图
	let res = await svc.openMap({
		mapid: env.exampleMapId, // 地图ID
		mapopenway: vjmap.MapOpenWay.GeomRender, // 以几何数据渲染方式打开
		style: vjmap.openMapDarkStyle() // div为深色背景颜色时，这里也传深色背景样式
	})
	if (res.error) {
		// 如果打开出错
		message.error(res.error)
	}
	// 获取地图范围
	let mapExtent = vjmap.GeoBounds.fromString(res.bounds);
	// 根据地图范围建立几何投影坐标系
	let prj = new vjmap.GeoProjection(mapExtent);

	// 地图对象
	let map = new vjmap.Map({
		container: 'map', // DIV容器ID
		style: svc.rasterStyle(), // 样式，这里是栅格样式
		center: prj.toLngLat(mapExtent.center()), // 设置地图中心点
		zoom: 2, // 设置地图缩放级别
		pitch: 60, // 倾斜角度
		renderWorldCopies: false // 不显示多屏地图
	});

	// 关联服务对象和投影对象
	map.attach(svc, prj);
	// 根据地图本身范围缩放地图至全图显示
	//map.fitMapBounds();
	await map.onLoad();

	// 限制地图范围为全图范围，防止多屏地图显示
	map.setMaxBounds(map.toLngLat(prj.getMapExtent()));

	const mapBounds = map.getGeoBounds(0.6);

	// 下面增加deck的图层
	if (typeof deck !== "object") {
		// 如果没有deck环境
		await vjmap.addScript({
			src: "js/deck.gl.min.js"
		});

	}
	const data = [];
	for(let i = 0; i < 10; i++) {
		data.push({
			id: i + 1,
			from: {
				coordinates: map.toLngLat(mapBounds.randomPoint()),
				color: [vjmap.randInt(0, 255), vjmap.randInt(0, 255), vjmap.randInt(0, 255)]
			},
			to: {
				coordinates: map.toLngLat(mapBounds.randomPoint()),
				color: [vjmap.randInt(0, 255), vjmap.randInt(0, 255), vjmap.randInt(0, 255)]
			}
		})
	}


	const deckLayer = new vjmap.DeckLayer({
		id: 'deck',
		type: deck.ArcLayer,
		data,
		getWidth: 12,
		getSourcePosition: d => d.from.coordinates,
		getTargetPosition: d => d.to.coordinates,
		getSourceColor: d => d.from.color,
		getTargetColor: d => d.to.color,
		pickable: true,
		autoHighlight: true,
		onClick: ({object}) => {
			message.info(`您点击了 Deck图层中的 第 ${object.id} 个对象`)
		}
	});
	map.addLayer(deckLayer);
})();