qgis-js

OpenLayers: Canvas Tile

qgis-js provides a custom «Canvas Tile» OpenLayers source for rendering a single tile with the size and pixel ratio of the ol map canvas. This is useful for rendering in the projection of the QGIS project, both in the OpenLayers view and in the qgis-js runtime.

See QgisCanvasDataSource.ts for the implementation and the olDemoCanvas-function for the demo setup used on this page.

OpenLayers: XYZ Tiles

With the qgis-js custom XYZ Tiles source for OpenLayers, the QGIS project is rendered in the common Web Mercator projection (EPSG:3857) addressed with the xyz tile scheme. This makes it convenient to mix the QGIS layer with other layer sources provided by OpenLayers.

See QgisXYZDataSource.ts for the implementation and the olDemoXYZ-function for the demo setup used on this page.

JavaScript

qgis-js can be used with plain JavaScript and can therefore be integrated into any web application. The library provides also type information and integrates nicely with TypeScript.

The example above shows how to use qgis-js with a simple canvas element and some rudimentary controls. The source code can be found in sites/dev/src/js.ts

The qgis-js API exposes also some QGIS core internals which can be used to build web GIS applications:

const rectangle = new api.Rectangle(100, 200, 150, 250);
console.dir(rectangle);

rectangle.scale(5);
console.dir(rectangle);

const center = rectangle.center();
console.dir(center);

Please note that the API surface is fairly minimal at the moment and will be extended in the future.