Add polygon merging

This commit is contained in:
Pieter Vander Vennet 2024-01-26 18:18:07 +01:00
parent ee38cdb9d7
commit ee3e000cd1
11 changed files with 460 additions and 305 deletions

View file

@ -4,20 +4,18 @@
import MaplibreMap from "./Map/MaplibreMap.svelte"
import { Map as MlMap } from "maplibre-gl"
import { MapLibreAdaptor } from "./Map/MapLibreAdaptor"
import Constants from "../Models/Constants"
import toilet from "../assets/generated/layers/toilet.json"
import shops from "../assets/generated/layers/shops.json"
import LayerConfig from "../Models/ThemeConfig/LayerConfig"
import DynamicMvtileSource from "../Logic/FeatureSource/TiledFeatureSource/DynamicMvtTileSource"
import ShowDataLayer from "./Map/ShowDataLayer"
const tl = new LayerConfig(<any>toilet)
const tl = new LayerConfig(<any>shops)
let map: UIEventSource<MlMap> = new UIEventSource<MlMap>(undefined)
let adaptor = new MapLibreAdaptor(map)
const src = new DynamicMvtileSource(tl, adaptor)
src.features.addCallbackAndRun(f => console.log(">>> Features are", f))
new ShowDataLayer(map, {
layer: tl,
features: src
@ -27,94 +25,7 @@
lat: 51.2095, lon: 3.2260,
})
adaptor.zoom.setData(13)
const loadedIcons = new Set<string>()
async function loadImage(map: MlMap, url: string, name: string): Promise<void> {
return new Promise((resolve, reject) => {
if (loadedIcons.has(name)) {
return new Promise<void>((resolve, reject) => resolve())
}
loadedIcons.add(name)
if (Constants.defaultPinIcons.indexOf(url) >= 0) {
url = "./assets/svg/" + url + ".svg"
}
map.loadImage(
url,
(error, image) => {
if (error) {
reject(error)
}
map.addImage(name, image)
resolve()
})
})
}
map.addCallbackAndRunD(map => {
map.on("load", async () => {
console.log("Onload")
await loadImage(map, "https://upload.wikimedia.org/wikipedia/commons/7/7c/201408_cat.png", "cat")
/*
map.addSource("drinking_water", {
"type": "vector",
"tiles": ["http://127.0.0.2:7800/public.drinking_water/{z}/{x}/{y}.pbf"], // http://127.0.0.2:7800/public.drinking_water.json",
})
map.addLayer(
{
"id": "drinking_water_layer",
"type": "circle",
"source": "drinking_water",
"source-layer": "public.drinking_water",
"paint": {
"circle-radius": 5,
"circle-color": "#ff00ff",
"circle-stroke-width": 2,
"circle-stroke-color": "#000000",
},
},
)*/
/*
map.addSource("toilet", {
"type": "vector",
"tiles": ["http://127.0.0.2:7800/public.toilet/{z}/{x}/{y}.pbf"], // http://127.0.0.2:7800/public.drinking_water.json",
})
map.addLayer(
{
"id": "toilet_layer",
"type": "circle",
"source": "toilet",
"source-layer": "public.toilet",
"paint": {
"circle-radius": 5,
"circle-color": "#0000ff",
"circle-stroke-width": 2,
"circle-stroke-color": "#000000",
},
},
)
map.addLayer({
"id": "points",
"type": "symbol",
"source": "toilet",
"source-layer": "public.toilet",
"layout": {
"icon-overlap": "always",
"icon-image": "cat",
"icon-size": 0.05,
},
})*/
map.on("click", "drinking_water_layer", (e) => {
// Copy coordinates array.
console.log(e)
console.warn(">>>", e.features[0])
})
})
})
</script>
<div class="h-screen w-screen">