Canvas マップ -データビジュアライゼーションのための
npm install @cieloazul310/canvasmap
const { CanvasMap } = require("@cieloazul310/canvasmap");
const width = 1000;
const height = 1000;
const map = new CanvasMap(width, height, {
center: [140.4602, 36.3703],
zoom: 13,
});
map
.renderVectorMap()
.then((canvas) => {
canvas.exportPng("./dist/basic.png");
})
.catch((err) => console.error(err));
const { CanvasMap } = require("@cieloazul310/canvasmap");
const width = 1000;
const height = 1000;
const map = new CanvasMap(width, height, {
center: [140.4602, 36.3703],
zoom: 13,
});
map
.renderRasterMap({
tileUrl: "https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg",
})
.then((canvas) => {
canvas.exportPng("./dist/basic.png");
})
.catch((err) => console.error(err));
import { CanvasMap } from "@cieloazul310/canvasmap/browser";
const width = 1000;
const height = 1000;
const map = new CanvasMap(width, height, {
center: [140.4602, 36.3703],
zoom: 13,
});
async function onClick() {
await map.renderVectorMap();
const canvas = map.getCanvas();
const contaienr = document.querySelector("#map");
container?.appendChild(container);
}
const button = document.querySelector("#rbutton");
button?.addEventListener("click", onClick);
const map = new CanvasMap(width, height, options);
- width (required)
number
: 生成する地図の横幅 - height (required)
number
: 生成する地図の縦幅 - options (optional):
Partial<object>
name | type | |
---|---|---|
title | string |
Map title |
center | [number, number] |
The center of map view |
zoom | number |
Zoom level of map view |
theme | Partial<Theme> |
Map theme including padding, palette and fontSizes |
zoomDelta | number |
(if the zoom is 12 and the zoomDelta is 1, the tile zoom level will be 13 ; default to 1). |
zoomDelta: https://observablehq.com/@d3/tile-zoomdelta?collection=@d3/d3-tile
- arguments:
[number, number]
- returns:
this
- arguments:
number
- returns:
this
- arguments:
number
- returns:
this
- arguments:
Feature | FeatureCollection
- returns:
this
- arguments:
bbox
([minX, minY, maxX, maxY]) - returns:
this
- arguments:
string
- returns:
this
- arguments:
string
- returns:
this
- arguments:
Partial<{ padding: Partial<Padding>; palette: Partial<Palette> }>
- returns:
this
- returns:
this
- returns:
object { width: number; height: number }
- returns:
Projection
(d3-geo)
- returns:
number
- returns:
Tiles
(d3-tile)
- returns:
Canvas
(node-canvas)
- returns:
CanvasRenderingContext2D
(node-canvas)
- returns:
GeoPath
(d3-geo)
- arguments: Options (optional)
- returns:
Promise<this>
name | types | |
---|---|---|
background | string |
Background color |
backgroundFeature | Feature | FeatureCollection |
Emphasized feature as background. |
layers | VectorLayerNames[] |
VectorLayerNames to render. |
VectorLayerNames
: "boundary"
| "building" | "contour" | "label" | "railway" | "road" | "symbol" | "waterarea"
- arguments: Options(optional)
- returns:
Promise<this>
name | types | |
---|---|---|
tileUrl | string |
Raster tile url (default to https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png ) |
tileSize | number |
Tile image size (default to 256) |
- arguments:
- fileName:
string
- options:
PngOptions
(sharp)
- fileName:
- returns:
Promise<this>
(CanvasMap class)
- arguments:
- filename:
string
- options:
JpegOptions
(sharp)
- filename:
- returns:
Promise<this>
(CanvasMap class)
- arguments:
- filename:
string
- options:
WebpOptions
(sharp)
- filename:
- returns:
Promise<this>
(CanvasMap class)
- returns:
HTMLCanvasElement
- returns:
CanvasRenderingContext2D
- returns:
GeoPath
(d3-geo)
- arguments: Options (optional)
- returns:
Promise<this>
name | types | |
---|---|---|
background | string |
Background color or none |
backgroundFeature | Feature | FeatureCollection |
Emphasized feature as background. |
layers | VectorLayerNames[] |
VectorLayerNames to render. |
VectorLayerNames
: "boundary"
| "building" | "contour" | "label" | "railway" | "road" | "symbol" | "waterarea"
- arguments: Options(optional)
- returns:
Promise<this>
name | types | |
---|---|---|
tileUrl | string |
Raster tile url (default to https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png ) |
tileSize | number |
Tile image size (default to 256) |
const width = 1000;
const height = 1000;
const map = new CanvasMap(width, height);
map.renderVectorMap()
.then((map) => {
map.exportPng('map.png');
});
(async () => {
const width = 1000;
const height = 1000;
const map = new CanvasMap(width, height);
await map.renderVectorMap();
map.exportPng('map.png');
})();
const geojson = JSON.parse(fs.readFileSync('gj.geojson', 'utf8'));
const width = 1000;
const height = 1000;
const map = new CanvasMap(width, height, geojson);
await map.renderVectorMap();
const context = map.getContext();
const path = map.getPath();
// draw features
geojson.features.forEach((feature) => {
context.beginPath();
path(feature);
context.fillStyle = '#aaf';
context.fill();
});
map.exportPng('map.png');
Browse example codes