136 lines
4.8 KiB
HTML
136 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>mapbox gl 加载 geoserver 的矢量瓦片</title>
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/mapbox-gl/1.9.1/Archive/mapbox-gl.min.js"></script>
|
||
<script src="https://unpkg.com/@turf/turf/turf.min.js"></script>
|
||
<link href="https://cdn.bootcdn.net/ajax/libs/mapbox-gl/1.9.1/mapbox-gl.css"/>
|
||
<style>
|
||
html,body{
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
#map{
|
||
height: 100vh;
|
||
width: 100%;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="map"></div>
|
||
<script>
|
||
|
||
const TIANDITU_URL = 'http://t0.tianditu.gov.cn';
|
||
const tdtKey = "118c7ba0ae0b3e35a0164dca56551ee8";
|
||
const tdtConfig = {
|
||
code: 'tdt_img',
|
||
name: '天地图影像',
|
||
toolName: '天地图影像底图',
|
||
// icon: tdtSatellite,
|
||
source: {
|
||
type: 'raster',
|
||
tiles: [
|
||
`${TIANDITU_URL}/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${tdtKey}`
|
||
],
|
||
tileSize: 256,
|
||
minzoom: 0,
|
||
maxzoom: 22
|
||
},
|
||
layer: {
|
||
id: 'tdt-img-tiles',
|
||
type: 'raster',
|
||
minzoom: 0,
|
||
maxzoom: 22,
|
||
layout: { visibility: 'visible' }
|
||
}
|
||
}
|
||
let map = new mapboxgl.Map({
|
||
container:'map',
|
||
style:{
|
||
"version":8,
|
||
"sources":{},
|
||
"layers":[],
|
||
glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
|
||
},
|
||
// center: [112.39747, 22.908823], // 广东
|
||
center:[(120.0369873046875+120.05465698242188)/2,(30.05849266052246+30.05849266052246)/2],//example
|
||
// center:[119.47220,30.25497],
|
||
|
||
// center:[(119.2369155883789+120.4836196899414)/2,(30.39223289489746+31.177017211914062)/2],
|
||
zoom: 15, // starting zoom 地图初始的拉伸比例
|
||
pitch: 0, // 地图的角度，不写默认是0，取值是0-85度，一般在3D中使用
|
||
bearing: 0, // 地图的初始方向，值是北的逆时针度数，默认是0，即是正北
|
||
antialias: true, // 抗锯齿，通过false关闭提升性能
|
||
minZoom: 3,
|
||
maxZoom: 17.36
|
||
});
|
||
map.on('load', () => {
|
||
// 天地图底图加载
|
||
addLayerConfig(tdtConfig);
|
||
map.jumpTo({
|
||
center: [120.19467, 30.1564571],
|
||
zoom: 10
|
||
});
|
||
// addStyleLayer()
|
||
});
|
||
async function addStyleLayer(){
|
||
const url = 'http://192.168.4.199:9090/AgServer/rural_330000/ows?service=WFS&request=GetFeature&maxFeatures=99999&srsname=EPSG:4490&outputFormat=application/json&typeName=rural_330000:risk_census_house_330100_jffx_view1&filter=%3CFilter%20xmlns=%22http://www.opengis.net/ogc%22%3E%3CPropertyIsEqualTo%3E%3CPropertyName%3Exzqdm%3C/PropertyName%3E%3CLiteral%3E330109%3C/Literal%3E%3C/PropertyIsEqualTo%3E%3C/Filter%3E&propertyname=geom'
|
||
const result = await fetch(url).then(res=>res.json());
|
||
console.log('---------',result)
|
||
|
||
// const heatFeatures = []
|
||
// result.features.map(feature=>{
|
||
// heatFeatures.push(turf.pointOnFeature(feature))
|
||
// })
|
||
// map.addSource('my-data', {
|
||
// 'type':'geojson',
|
||
// 'data':result
|
||
// });
|
||
// map.addLayer({
|
||
// "id": "styleLayer",
|
||
// "type": "fill",
|
||
// "source": "my-data",
|
||
// "maxzoom": 16,
|
||
// "paint": {
|
||
// 'fill-color': '#088',
|
||
// 'fill-opacity': 0.25
|
||
// }
|
||
// });
|
||
|
||
map.addSource('colorado', {
|
||
'type': 'geojson',
|
||
'data': {
|
||
'type': 'FeatureCollection',
|
||
'features': result.features
|
||
}
|
||
});
|
||
|
||
map.addLayer({
|
||
'id': 'colorado',
|
||
'type': 'fill',
|
||
'source': 'colorado',
|
||
'layout': {},
|
||
'paint': {
|
||
'fill-color': '#088',
|
||
'fill-opacity': 0.25
|
||
}
|
||
});
|
||
}
|
||
|
||
function addLayerConfig(layerConfig){
|
||
const {code, source,layer} = layerConfig;
|
||
map.addSource(code, source);
|
||
const layerParams = {
|
||
...layer,
|
||
source: code
|
||
};
|
||
// 添加图层
|
||
map.addLayer(layerParams);
|
||
}
|
||
|
||
</script>
|
||
</body>
|
||
</html> |