310 lines
14 KiB
HTML
310 lines
14 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://t1.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);
|
|||
|
|
// addLayerConfig(geoServerConfig);
|
|||
|
|
// addMvt();
|
|||
|
|
// addGeoserverMVT();
|
|||
|
|
|
|||
|
|
// addGeoWMSLayer();
|
|||
|
|
map.jumpTo({
|
|||
|
|
center: [120.19467, 30.1564571],
|
|||
|
|
zoom: 10
|
|||
|
|
});
|
|||
|
|
addHeatMapLayer()
|
|||
|
|
});
|
|||
|
|
async function addHeatMapLayer(){
|
|||
|
|
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':{
|
|||
|
|
type:'FeatureCollection',
|
|||
|
|
features:heatFeatures
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
map.addLayer({
|
|||
|
|
"id": "myheatmap",
|
|||
|
|
"type": "heatmap",
|
|||
|
|
"source": "my-data",
|
|||
|
|
"maxzoom": 16,
|
|||
|
|
"paint": {
|
|||
|
|
//根据zoom设置热力图强度变化
|
|||
|
|
"heatmap-intensity": [
|
|||
|
|
"interpolate",
|
|||
|
|
["linear"],
|
|||
|
|
["zoom"],
|
|||
|
|
3, 1,
|
|||
|
|
16, 2
|
|||
|
|
],
|
|||
|
|
// 调整颜色
|
|||
|
|
"heatmap-color": [
|
|||
|
|
"interpolate",
|
|||
|
|
["linear"],
|
|||
|
|
["heatmap-density"],
|
|||
|
|
0,
|
|||
|
|
'rgba(33,102,172,0)',
|
|||
|
|
0.2,
|
|||
|
|
'rgb(103,169,207)',
|
|||
|
|
0.4,
|
|||
|
|
'rgb(209,229,240)',
|
|||
|
|
0.6,
|
|||
|
|
'rgb(253,219,199)',
|
|||
|
|
0.8,
|
|||
|
|
'rgb(239,138,98)',
|
|||
|
|
1,
|
|||
|
|
'rgb(178,24,43)'
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
// 根据zoom设置热力图计算半径
|
|||
|
|
"heatmap-radius": [
|
|||
|
|
"interpolate",
|
|||
|
|
["linear"],
|
|||
|
|
["zoom"],
|
|||
|
|
3, 10,
|
|||
|
|
16, 40
|
|||
|
|
],
|
|||
|
|
// 根据zoom设置热力图透明度
|
|||
|
|
"heatmap-opacity": [
|
|||
|
|
"interpolate",
|
|||
|
|
["linear"],
|
|||
|
|
["zoom"],
|
|||
|
|
3, 1,
|
|||
|
|
16, 1
|
|||
|
|
],
|
|||
|
|
}
|
|||
|
|
// 'paint': {
|
|||
|
|
// // Increase the heatmap weight based on frequency and property magnitude
|
|||
|
|
// 'heatmap-weight': [
|
|||
|
|
// 'interpolate',
|
|||
|
|
// ['linear'],
|
|||
|
|
// ['get', 'mag'],
|
|||
|
|
// 0,
|
|||
|
|
// 0,
|
|||
|
|
// 6,
|
|||
|
|
// 1
|
|||
|
|
// ],
|
|||
|
|
// // Increase the heatmap color weight weight by zoom level
|
|||
|
|
// // heatmap-intensity is a multiplier on top of heatmap-weight
|
|||
|
|
// 'heatmap-intensity': [
|
|||
|
|
// 'interpolate',
|
|||
|
|
// ['linear'],
|
|||
|
|
// ['zoom'],
|
|||
|
|
// 0,
|
|||
|
|
// 1,
|
|||
|
|
// 9,
|
|||
|
|
// 3
|
|||
|
|
// ],
|
|||
|
|
// // Color ramp for heatmap. Domain is 0 (low) to 1 (high).
|
|||
|
|
// // Begin color ramp at 0-stop with a 0-transparancy color
|
|||
|
|
// // to create a blur-like effect.
|
|||
|
|
// 'heatmap-color': [
|
|||
|
|
// 'interpolate',
|
|||
|
|
// ['linear'],
|
|||
|
|
// ['heatmap-density'],
|
|||
|
|
// 0,
|
|||
|
|
// 'rgba(33,102,172,0)',
|
|||
|
|
// 0.2,
|
|||
|
|
// 'rgb(103,169,207)',
|
|||
|
|
// 0.4,
|
|||
|
|
// 'rgb(209,229,240)',
|
|||
|
|
// 0.6,
|
|||
|
|
// 'rgb(253,219,199)',
|
|||
|
|
// 0.8,
|
|||
|
|
// 'rgb(239,138,98)',
|
|||
|
|
// 1,
|
|||
|
|
// 'rgb(178,24,43)'
|
|||
|
|
// ],
|
|||
|
|
// // Adjust the heatmap radius by zoom level
|
|||
|
|
// 'heatmap-radius': [
|
|||
|
|
// 'interpolate',
|
|||
|
|
// ['linear'],
|
|||
|
|
// ['zoom'],
|
|||
|
|
// 0,
|
|||
|
|
// 2,
|
|||
|
|
// 9,
|
|||
|
|
// 20
|
|||
|
|
// ],
|
|||
|
|
// // Transition from heatmap to circle layer by zoom level
|
|||
|
|
// 'heatmap-opacity': [
|
|||
|
|
// 'interpolate',
|
|||
|
|
// ['linear'],
|
|||
|
|
// ['zoom'],
|
|||
|
|
// 7,
|
|||
|
|
// 1,
|
|||
|
|
// 9,
|
|||
|
|
// 0
|
|||
|
|
// ]
|
|||
|
|
// }
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function addLayerConfig(layerConfig){
|
|||
|
|
const {code, source,layer} = layerConfig;
|
|||
|
|
map.addSource(code, source);
|
|||
|
|
const layerParams = {
|
|||
|
|
...layer,
|
|||
|
|
source: code
|
|||
|
|
};
|
|||
|
|
// 添加图层
|
|||
|
|
map.addLayer(layerParams);
|
|||
|
|
}
|
|||
|
|
function addMvt(){
|
|||
|
|
map.addLayer({
|
|||
|
|
id: 'lines',
|
|||
|
|
type: 'fill',
|
|||
|
|
source: {
|
|||
|
|
type: 'vector',
|
|||
|
|
url: 'http://localhost:3000/zhujiang_river'
|
|||
|
|
},
|
|||
|
|
'source-layer': 'zhujiang_river',
|
|||
|
|
paint: {
|
|||
|
|
'fill-color': 'red'
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
function addGeoserverMVT(){
|
|||
|
|
// map.addSource('geoserver-vt',);
|
|||
|
|
|
|||
|
|
map.addLayer({
|
|||
|
|
'id': 'ce-rural-330500',
|
|||
|
|
'source': {
|
|||
|
|
'type':'vector',
|
|||
|
|
'scheme':'tms',
|
|||
|
|
'tiles':['http://192.168.4.199:9090/AgServer/gwc/service/tms/1.0.0/rural_330000%3Arisk_census_house_330100_example@EPSG%3A3857@pbf/{z}/{x}/{y}.pbf']
|
|||
|
|
// 'tiles':['http://localhost:8080/geoserver/gwc/service/tms/1.0.0/test%3Arisk_census_house_330100_example_new@EPSG%3A4326@pbf/{z}/{x}/{y}.pbf']
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
'source-layer':'risk_census_house_330100_example',
|
|||
|
|
'type': 'fill',
|
|||
|
|
'paint': {
|
|||
|
|
'fill-color': 'red'
|
|||
|
|
},
|
|||
|
|
'minzoom': 13,
|
|||
|
|
'maxzoom': 18,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
function addGeoWMSLayer(){
|
|||
|
|
// map.addSource('wms-test-source', {
|
|||
|
|
// 'type': 'raster',
|
|||
|
|
// // use the tiles option to specify a WMS tile source URL
|
|||
|
|
// // https://docs.mapbox.comhttps://docs.mapbox.com/style-spec/reference/sources/
|
|||
|
|
// 'tiles': [
|
|||
|
|
// 'https://img.nj.gov/imagerywms/Natural2015?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&layers=Natural2015'
|
|||
|
|
// ],
|
|||
|
|
// 'tileSize': 256
|
|||
|
|
// });
|
|||
|
|
// map.addLayer(
|
|||
|
|
// {
|
|||
|
|
// 'id': 'wms-test-layer',
|
|||
|
|
// 'type': 'raster',
|
|||
|
|
// 'source': 'wms-test-source',
|
|||
|
|
// 'paint': {}
|
|||
|
|
// },
|
|||
|
|
// 'building' // Place layer under labels, roads and buildings.
|
|||
|
|
// );
|
|||
|
|
let sld = `<StyledLayerDescriptor xmlns="http://www.opengis.net/sld" xmlns:ogc="http://www.opengis.net/ogc" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="1.0.0" xsi:schemaLocation="http://www.opengis.net/sld http://schemas.opengis.net/sld/1.0.0/StyledLayerDescriptor.xsd"><UserLayer><Name>rural_330000:risk_census_house_330100_example</Name><UserStyle><Title>custom create style</Title><FeatureTypeStyle><Rule><Name>1</Name><Description><Title>1</Title></Description><Filter><And><PropertyIsEqualTo><PropertyName>sgzt</PropertyName><Literal>1</Literal></PropertyIsEqualTo></And></Filter><PolygonSymbolizer><Fill><CssParameter name="fill">#f7d200</CssParameter><CssParameter name="fill-opacity">0</CssParameter></Fill><Stroke><CssParameter name="stroke">#f7d200</CssParameter><CssParameter name="stroke-width">2</CssParameter><CssParameter name="stroke-opacity">1</CssParameter></Stroke></PolygonSymbolizer></Rule><Rule><Name>2</Name><Description><Title>2</Title></Description><Filter><And><PropertyIsEqualTo><PropertyName>sgzt</PropertyName><Literal>2</Literal></PropertyIsEqualTo></And></Filter><PolygonSymbolizer><Fill><CssParameter name="fill">#f49bdc</CssParameter><CssParameter name="fill-opacity">0</CssParameter></Fill><Stroke><CssParameter name="stroke">#f49bdc</CssParameter><CssParameter name="stroke-width">2</CssParameter><CssParameter name="stroke-opacity">1</CssParameter></Stroke></PolygonSymbolizer></Rule><Rule><Name>3</Name><Description><Title>3</Title></Description><Filter><And><PropertyIsEqualTo><PropertyName>sgzt</PropertyName><Literal>3</Literal></PropertyIsEqualTo></And></Filter><PolygonSymbolizer><Fill><CssParameter name="fill">#40c563</CssParameter><CssParameter name="fill-opacity">0</CssParameter></Fill><Stroke><CssParameter name="stroke">#40c563</CssParameter><CssParameter name="stroke-width">2</CssParameter><CssParameter name="stroke-opacity">1</CssParameter></Stroke></PolygonSymbolizer></Rule></FeatureTypeStyle></UserStyle></UserLayer></StyledLayerDescriptor>`
|
|||
|
|
sldData = encodeURIComponent(sld)
|
|||
|
|
map.addSource('wms-source', {
|
|||
|
|
'type': 'raster',
|
|||
|
|
'tiles': [
|
|||
|
|
`http://192.168.4.199:9090/AgServer/rural_330000/ows?service=WMS&version=1.1.0&request=GetMap&layers=rural_330000:risk_census_house_330100_example&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE&SLD_BODY=${sldData}`,
|
|||
|
|
],
|
|||
|
|
'tileSize': 256,
|
|||
|
|
// 'srs':'EPSG:4326'
|
|||
|
|
});
|
|||
|
|
map.addLayer({
|
|||
|
|
'id': 'wms-layer',
|
|||
|
|
'type': 'raster',
|
|||
|
|
'source': 'wms-source',
|
|||
|
|
// 'paint': {
|
|||
|
|
// "raster-opacity": 1, // 图片的不透明度（可选，取值范围为 0 ~ 1，默认值为 1）
|
|||
|
|
// "raster-hue-rotate": 0, // 在色轮上旋转色相的角度（可选，默认值为 0，单位：角度）
|
|||
|
|
// "raster-brightness-min": 0, // 图片的最小亮度（可选，取值范围为 0 ~ 1，默认值为 0）
|
|||
|
|
// "raster-brightness-max": 1, // 图片的最大亮度（可选，取值范围为 0 ~ 1，默认值为 1）
|
|||
|
|
// "raster-saturation": 0, // 图片的饱和度（可选，取值范围为 -1 ~ 1，默认值为 0）
|
|||
|
|
// "raster-contrast": 0, // 图片的对比度（可选，取值范围为 -1 ~ 1，默认值为 0）
|
|||
|
|
// "raster-resampling": "linear", // 采样方式（可选，可选值为 linear、nearest，默认值为 linear）
|
|||
|
|
// "raster-fade-duration": 300 // 切换瓦片时的渐隐时间（可选，默认值为 300，单位：毫秒）
|
|||
|
|
// }
|
|||
|
|
},
|
|||
|
|
// 'aeroway-line'
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|