forked from MapComplete/MapComplete
LayerServer: first version which can use a local MVT-server
This commit is contained in:
parent
35228daa8f
commit
ef2f1487c6
17 changed files with 1009 additions and 82 deletions
|
|
@ -1,70 +1,122 @@
|
|||
<script lang="ts">
|
||||
// Testing grounds
|
||||
import { UIEventSource } from "../Logic/UIEventSource"
|
||||
import MaplibreMap from "./Map/MaplibreMap.svelte"
|
||||
import { Map as MlMap } from "maplibre-gl"
|
||||
import { MapLibreAdaptor } from "./Map/MapLibreAdaptor"
|
||||
// Testing grounds
|
||||
import { UIEventSource } from "../Logic/UIEventSource"
|
||||
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 LayerConfig from "../Models/ThemeConfig/LayerConfig"
|
||||
import DynamicMvtileSource from "../Logic/FeatureSource/TiledFeatureSource/DynamicMvtTileSource"
|
||||
import ShowDataLayer from "./Map/ShowDataLayer"
|
||||
|
||||
let map: UIEventSource<MlMap> = new UIEventSource<MlMap>(undefined)
|
||||
let adaptor = new MapLibreAdaptor(map)
|
||||
adaptor.location.setData({
|
||||
lat: 42.5404,
|
||||
lon:1.4832
|
||||
|
||||
})
|
||||
adaptor.zoom.setData(10)
|
||||
map.addCallbackAndRunD(map => {
|
||||
map.on("load", () => {
|
||||
const tl = new LayerConfig(<any>toilet)
|
||||
|
||||
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",
|
||||
},
|
||||
},
|
||||
)
|
||||
let map: UIEventSource<MlMap> = new UIEventSource<MlMap>(undefined)
|
||||
let adaptor = new MapLibreAdaptor(map)
|
||||
|
||||
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.on('click', 'drinking_water_layer', (e) => {
|
||||
// Copy coordinates array.
|
||||
console.log(e)
|
||||
console.warn(">>>", e.features[0])
|
||||
})
|
||||
const src = new DynamicMvtileSource(tl, adaptor)
|
||||
src.features.addCallbackAndRun(f => console.log(">>> Features are", f))
|
||||
new ShowDataLayer(map, {
|
||||
layer: tl,
|
||||
features: src
|
||||
})
|
||||
|
||||
adaptor.location.setData({
|
||||
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">
|
||||
<MaplibreMap {map} />
|
||||
<MaplibreMap {map} />
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue