Published
Edited
Mar 23, 2020
md`# HK Map`
L7 = require('@antv/l7')
data = fetch('https://services8.arcgis.com/PXQv9PaDJHzt8rp0/ArcGIS/rest/services/StayBuildingWithHistory_View/FeatureServer/0/query?where=1%3D1&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&resultType=none&distance=0.0&units=esriSRUnit_Meter&returnGeodetic=false&outFields=*&returnGeometry=true&featureEncoding=esriDefault&multipatchOption=xyFootprint&maxAllowableOffset=&geometryPrecision=&outSR=4326&datumTransformation=&applyVCSProjection=false&returnIdsOnly=false&returnUniqueIdsOnly=false&returnCountOnly=false&returnExtentOnly=false&returnQueryGeometry=false&returnDistinctValues=false&cacheHint=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&having=&resultOffset=&resultRecordCount=&returnZ=false&returnM=false&returnExceededLimitFeatures=true&quantizationParameters=&sqlFormat=none&f=pgeojson&token=').then(response => response.json());
map = {
const container = html`<div style="height: 500px;">`;
yield container; // Give the container dimensions.
const scene = new L7.Scene({
id: container,
map: new L7.Mapbox({
center: [114.23,22.3401469],
zoom: 0,
maxZoom:20,
style: "normal"
})
});
const colors = [
'#732200',
'#CC3D00',
'#FF6619',
'#FF9466',
'#FFC1A6',
'#FCE2D7',
'#ffffff',
].reverse();
scene.on("loaded", () => {
const pointLayer = new L7.PointLayer({
autoFit:true
})
.source(data)
.shape('circle')
.size(5)
.active(true)
.color('red')
.style({
opacity: 0.3,
strokeWidth: 2
});
scene.addLayer(pointLayer);
pointLayer.on('mousemove', e => {
const popup = new L7.Popup({
offsets: [ 0, 0 ],
closeButton: false
})
.setLnglat(e.lngLat)
.setHTML(`<span>${e.feature.properties.大廈名單}: ${e.feature.properties.相關確診個案}</span>`);
scene.addPopup(popup);
});
});
}
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.
