container = html`<div style='height:${height}px; width: ${width}px'></div>`
map = {
reloadButton;
const map = new mapboxgl.Map({
container,
center: [116.3, 39.9],
zoom: 12,
maxPitch: 80,
// lang: "ch",
style: "mapbox://styles/listenzcc/cky2j3ywf13yi15nuybjj4kem"
// style: "mapbox://styles/listenzcc/clkteomkm00bv01pu2m7bcoy6"
// style: "mapbox://styles/mapbox/light-v9"
});
return map;
}
reDraw = () => {
map.getSource("gridGeometrySource").setData(geo);
}
// Initialize the mapbox
{
map.on("load", () => {
// Init source
map.addSource("gridGeometrySource", {
type: "geojson",
data: geo
});
// Init grid stroke
map.addLayer({
id: "gridLine",
type: "line",
source: "gridGeometrySource",
layout: {
"line-join": "round",
"line-cap": "round"
},
paint: {
"line-color": "white",
"line-width": 1
}
});
// Init grid fill
map.addLayer({
id: "gridHover",
type: "fill",
source: "gridGeometrySource",
layout: {},
paint: {
"fill-color": ["get", "color"],
"fill-opacity": ["get", "opacity"]
}
});
// Add handlers
{
map.on("dragend", () => {
console.log("dragend");
reDraw();
});
map.on("zoomend", () => {
console.log("zoomend");
reDraw();
});
map.on("pitchend", () => {
console.log("pitchend");
reDraw();
});
}
});
}
mapboxgl = {
const gl = await require("mapbox-gl");
if (!gl.accessToken) {
gl.accessToken =
"pk.eyJ1IjoibGlzdGVuemNjIiwiYSI6ImNrMzU5MmpxZDAxMXEzbXQ0dnd4YTZ2NDAifQ.GohcgYXFsbDqfsi_7SXdpA";
const href = await require.resolve("mapbox-gl/dist/mapbox-gl.css");
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
}
return gl;
}
geo = {
const geo = topojson1101001,
colors = {};
// const features = geo.features.map((feature) => rewind(feature));
// geo.features = features;
geo.features.map((feature) => {
var color = "black",
opacity = 0.2,
{ properties } = feature,
{ level } = properties,
landType = landTypes[level];
if (landType) {
color = colorScheme[level];
opacity = 0.5;
colors[landType] = color;
}
Object.assign(properties, {
color,
opacity
});
});
Object.assign(geo, { colors });
return geo;
}
topojson1101001 = FileAttachment("topoJson-110100@1.json").json()
landTypes = {
return {
"1": "01 Residential",
"2": "02 Commercial",
"3": "03 Industrial",
"4": "04 Transportation",
"5": "05 Public management and service",
"101": "0101 Residential",
"201": "0201 Business office",
"202": "0202 Commercial service",
"301": "0301 Industrial",
"401": "0401 Road",
"402": "0402 Transportation stations",
"403": "0403 Airport facilities",
"501": "0501 Administrative",
"502": "0502 Educational",
"503": "0503 Medical",
"504": "0504 Sport and cultural",
"505": "0505 Park and greenspace"
};
}
colorScheme = d3.schemeCategory10
d3 = require("d3")
import { rewind } from "@fil/rewind"
// feature = rewind(feature[, simple]);
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
