console
<html>
<head>
<meta charset='utf-8' />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>pg_tileserv: public.BHD_JSYDZYZC</title>
<script src="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style type="text/css">
body {margin:0;padding:0;font-family:sans-serif;}
#map {position:absolute;top:0;bottom:0;left:0;right:0;}
#meta {z-index:2;color:black;background:rgba(255,255,255,0.6);position:absolute;top:10;left:20;padding:10 20;margin:0;width:min-content;}
#meta h1 {margin:0;}
#meta .properties {font-size:90%; width:auto;}
</style>
</head>
<body>
<div id="meta">
<h1>public.BHD_JSYDZYZC</h1>
<hr/><p class="properties">bz crtdqygs ejdlbm ejdlmc frdbs gjjzl1 gybmqygs gyfs gynx gysj hbtdqygs htbh htjk id jjjzl2 oid_ qsxz qtfsqygs qyqcjgsp rjl shape_area shape_leng stbhhxmj syzqyxs tbdlmj tbgblx tbgbmj tdyt wgyqygs xzqcdjsp xzqdm xzqmc yjdlbm yjdlmc ysdm ysynx zcqcbsm zdbh zdmj zrbhdhxqmj ztbmj </p>
</div>
<div id="map"></div>
<script>
var map;
var mapcolor = "blue";
let layer = {"id":"public.BHD_JSYDZYZC","schema":"public","name":"BHD_JSYDZYZC","properties":[{"name":"id","type":"int4","description":""},{"name":"oid_","type":"int4","description":""},{"name":"zcqcbsm","type":"varchar","description":""},{"name":"ysdm","type":"varchar","description":""},{"name":"xzqmc","type":"varchar","description":""},{"name":"xzqdm","type":"varchar","description":""},{"name":"qsxz","type":"varchar","description":""},{"name":"tbdlmj","type":"float8","description":""},{"name":"ztbmj","type":"float8","description":""},{"name":"yjdlbm","type":"varchar","description":""},{"name":"yjdlmc","type":"varchar","description":""},{"name":"ejdlbm","type":"varchar","description":""},{"name":"ejdlmc","type":"varchar","description":""},{"name":"stbhhxmj","type":"float8","description":""},{"name":"zrbhdhxqmj","type":"float8","description":""},{"name":"zdbh","type":"varchar","description":""},{"name":"zdmj","type":"float8","description":""},{"name":"tdyt","type":"varchar","description":""},{"name":"htbh","type":"varchar","description":""},{"name":"htjk","type":"float8","description":""},{"name":"rjl","type":"float8","description":""},{"name":"gyfs","type":"varchar","description":""},{"name":"gysj","type":"date","description":""},{"name":"gynx","type":"float8","description":""},{"name":"ysynx","type":"float8","description":""},{"name":"qyqcjgsp","type":"float8","description":""},{"name":"gjjzl1","type":"float8","description":""},{"name":"xzqcdjsp","type":"float8","description":""},{"name":"jjjzl2","type":"float8","description":""},{"name":"syzqyxs","type":"float8","description":""},{"name":"crtdqygs","type":"float8","description":""},{"name":"hbtdqygs","type":"float8","description":""},{"name":"qtfsqygs","type":"float8","description":""},{"name":"wgyqygs","type":"float8","description":""},{"name":"gybmqygs","type":"float8","description":""},{"name":"tbgblx","type":"varchar","description":""},{"name":"tbgbmj","type":"float8","description":""},{"name":"frdbs","type":"varchar","description":""},{"name":"bz","type":"varchar","description":""},{"name":"shape_leng","type":"float8","description":""},{"name":"shape_area","type":"float8","description":""}],"geometrytype":"MultiPolygon","center":[106.48273849487305,27.182808876037598],"bounds":[104.16099548339844,25.171709060668945,108.80448150634766,29.19390869140625],"minzoom":5,"maxzoom":20,"tileurl":"http://192.168.3.238:7800/public.BHD_JSYDZYZC/{z}/{x}/{y}.pbf"}
console.log("public.BHD_JSYDZYZC.json");
console.log(layer);
var mapConfig = {
'container': 'map',
'bounds': layer['bounds'],
'style': {
'version': 8,
'sources': {
'carto-dark': {
'type': 'raster',
'tiles': [
"https://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png",
"https://b.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png",
"https://c.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png",
"https://d.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png"
]
},
'carto-light': {
'type': 'raster',
'tiles': [
"https://a.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png",
"https://b.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png",
"https://c.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png",
"https://d.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png"
]
},
'wikimedia': {
'type': 'raster',
'tiles': [
"https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png"
]
}
},
'layers': [{
'id': 'carto-light-layer',
'source': 'carto-light',
'type': 'raster',
'minzoom': 0,
'maxzoom': 22
}]
}
};
var paints = {
"circle":{
"circle-color": mapcolor,
"circle-radius": 3
},
"line":{
"line-color": mapcolor,
"line-width": 1.5
},
"fill":{
"fill-color": mapcolor,
"fill-outline-color": mapcolor,
"fill-opacity": 0.1
}
};
var painttypes = {
"Point":"circle",
"MultiPoint":"circle",
"LineString":"line",
"MultiLineString":"line",
"Polygon":"fill",
"MultiPolygon":"fill",
};
function layerSource(tileurl) {
return {
"type": "vector",
"tiles": [tileurl],
"minzoom": layer["minzoom"],
"maxzoom": layer["maxzoom"]
}
};
function layerId(id, gtype, paint) {
return id+"."+gtype+"."+paint;
}
function layerConfig(id, gtype, paint) {
return {
"id": layerId(id, gtype, paint),
"source": id,
"source-layer": id,
"type": paint,
"paint": paints[paint],
"filter": ["match", ["geometry-type"], [gtype, "Multi"+gtype], true, false]
}
};
function featureHtml(f) {
var p = f.properties;
var h = "<p>";
for (var k in p) {
h += "<b>" + k + ":</b> " + p[k] + "<br/>"
}
h += "</p>";
return h
}
function addLayerBehavior(id) {
map.on('click', id, function(e) {
new maplibregl.Popup()
.setLngLat(e.lngLat)
.setHTML(featureHtml(e.features[0]))
.addTo(map);
});
map.on('mouseenter', id, function() {
map.getCanvas().style.cursor = 'pointer';
});
map.on('mouseleave', id, function() {
map.getCanvas().style.cursor = '';
});
}
function addOneLayer(id, gtypebasic) {
map.addLayer(layerConfig(id, gtypebasic, painttypes[gtypebasic]));
addLayerBehavior(layerId(id, gtypebasic, painttypes[gtypebasic]));
if (gtypebasic == "Polygon") {
console.log(123,layerConfig(id, gtypebasic, "line"))
map.addLayer(layerConfig(id, gtypebasic, "line"));
}
}
function addLayers(id, gtype, url) {
map.addSource(id, layerSource(url));
var gtypebasic = gtype.replace("Multi", "");
var gtypes = ["Point", "LineString", "Polygon"];
if (gtypes.includes(gtypebasic)) {
addOneLayer(id, gtypebasic);
}
else {
gtypes.forEach(gt => {
addOneLayer(id, gt);
});
}
}
map = new maplibregl.Map(mapConfig);
map.addControl(new maplibregl.NavigationControl());
map.on("load", function() {
queryParam = new URLSearchParams(window.location.search).toString();
if (queryParam.length <= 1) {
queryParam = "";
}
tileUrl = layer["tileurl"] + "?" + queryParam;
addLayers(layer["id"], layer["geometrytype"], tileUrl);
});
</script>
</body>
</html>