Deck.GL Layer

Note

The deck.gl layer is provided as a plugin. Load its script via vjmap.addScript({src: "js/deck.gl.min.js"}).

Getting Started

// Add deck layer below
if (typeof deck !== "object") {
    // If the deck environment is not available
    await vjmap.addScript({
        src: "js/deck.gl.min.js"
    });

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

For detailed usage, refer to the deck.gl (opens new window) official documentation

Example

亲手试一试

#

(async () => {
	// --Deck arc layer--
	// Map service object
	let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
	// Open map
	let res = await svc.openMap({
		mapid: env.exampleMapId, // Map ID
		mapopenway: vjmap.MapOpenWay.GeomRender, // Open with geometry data rendering
		style: vjmap.openMapDarkStyle() // Use dark background style when div has dark background
	})
	if (res.error) {
		// If open fails
		message.error(res.error)
	}
	// Get map bounds
	let mapExtent = vjmap.GeoBounds.fromString(res.bounds);
	// Create geometric projection coordinate system from map bounds
	let prj = new vjmap.GeoProjection(mapExtent);

	// Map object
	let map = new vjmap.Map({
		container: 'map', // DIV container ID
		style: svc.rasterStyle(), // Style, raster style here
		center: prj.toLngLat(mapExtent.center()), // Set map center
		zoom: 2, // Set zoom level
		pitch: 60, // Tilt angle
		renderWorldCopies: false // Do not show multi-world map
	});

	// Attach service object and projection to map
	map.attach(svc, prj);
	// Fit map to full extent
	//map.fitMapBounds();
	await map.onLoad();

	// Restrict map bounds to full extent, prevent multi-world display
	map.setMaxBounds(map.toLngLat(prj.getMapExtent()));

	const mapBounds = map.getGeoBounds(0.6);

	// Add deck layer below
	if (typeof deck !== "object") {
		// If the deck environment is not available
		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(`You clicked object ${object.id} in the Deck layer`)
		}
	});
	map.addLayer(deckLayer);
})();