关闭案件
parent
5b35535bef
commit
e6edeadc90
@ -0,0 +1,163 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Map</title>
|
||||
<link href="https://api.mapbox.com/mapbox-gl-js/v3.5.1/mapbox-gl.css" rel="stylesheet">
|
||||
<script src="https://api.mapbox.com/mapbox-gl-js/v3.5.1/mapbox-gl.js"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="map" style="width: 100%; height: 100vh;"></div>
|
||||
</body>
|
||||
<script>
|
||||
mapboxgl.accessToken = 'pk.eyJ1Ijoic2hpY2hhbzEyMyIsImEiOiJja3FobnI1aDEwNGF6Mm9vOXVhNnBzZmFhIn0.2fZKiMqCQHxVY74QShMEGQ';
|
||||
const map = new mapboxgl.Map({
|
||||
container: 'map',
|
||||
style: 'mapbox://styles/mapbox/navigation-night-v1',
|
||||
projection: 'globe', // Display the map as a globe, since satellite-v9 defaults to Mercator
|
||||
zoom: 1,
|
||||
center: [118, 50]
|
||||
});
|
||||
|
||||
map.addControl(new mapboxgl.NavigationControl());
|
||||
|
||||
map.on('style.load', () => {
|
||||
map.setFog({}); // Set the default atmosphere style
|
||||
});
|
||||
map.on('load', () => {
|
||||
map.addSource('region_info', {
|
||||
type: 'vector',
|
||||
scheme: 'tms',
|
||||
tiles: ['https://gis.certifarm.cn/geoserver/gwc/service/tms/1.0.0/wisdomOrchard:region_info@EPSG:900913@pbf/{z}/{x}/{y}.pbf'],
|
||||
})
|
||||
map.addLayer({
|
||||
//蒙版图层 //通过边界数据反选 达到挖洞效果
|
||||
id: 'mb-tag',
|
||||
type: 'fill',
|
||||
source: {
|
||||
type: 'geojson',
|
||||
data: {
|
||||
type: 'Feature',
|
||||
geometry: {
|
||||
type: 'Polygon',
|
||||
coordinates: [
|
||||
[
|
||||
// 多边形外围 需要进行遮罩的点 这里是给世界地图加遮罩 所以是世界的四个端点
|
||||
[-180, 90],
|
||||
[180, 90],
|
||||
[180, -90],
|
||||
[-180, -90],
|
||||
],
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
paint: {
|
||||
'fill-color': 'rgba(0,0,0,1)',
|
||||
// 'fill-opacity': 1 /* 透明度 */,
|
||||
},
|
||||
layout: {
|
||||
visibility: 'visible',
|
||||
},
|
||||
})
|
||||
// 添加杭州市边界线图层
|
||||
let lineOption = {
|
||||
id: `city-line-layer`,
|
||||
source: `region_info`,
|
||||
'source-layer': `region_info`,
|
||||
type: 'line',
|
||||
layout: {
|
||||
'line-cap': 'round',
|
||||
'line-join': 'round',
|
||||
},
|
||||
filter: ['match', ['get', 'code'], '330100', true, false],
|
||||
paint: {
|
||||
'line-color': '#6AF9F8',
|
||||
'line-width': 4,
|
||||
},
|
||||
}
|
||||
map.addLayer(lineOption)
|
||||
// 采用边界偏移的方式，添加杭州区域下沉模糊效果（多个图层，每个图层偏移量递增）
|
||||
const blurValueList = [0.6, 0.5, 0.5, 0.4, 0.4, 0.3, 0.3, 0.2, 0.2, 0.1, 0.1, 0.1, 0.3, 0.3]
|
||||
blurValueList.forEach(async (item, index) => {
|
||||
let tempOption = {
|
||||
id: `city-line-blur-layer${index}`,
|
||||
source: `region_info`,
|
||||
'source-layer': `region_info`,
|
||||
type: 'line',
|
||||
layout: {
|
||||
'line-cap': 'round',
|
||||
'line-join': 'round',
|
||||
},
|
||||
filter: ['match', ['get', 'code'], '330100', true, false],
|
||||
paint: {
|
||||
'line-color': `rgba(106, 249, 248, ${item})`,
|
||||
'line-width': 2,
|
||||
// 横向：左右无偏移，纵向：每一个图层向下偏移+1px
|
||||
'line-translate': [0, (index + 1) * 1],
|
||||
'line-translate-anchor': 'map',
|
||||
},
|
||||
}
|
||||
map.addLayer(tempOption)
|
||||
|
||||
})
|
||||
// 杭州市范围填充面图层
|
||||
let options = {
|
||||
id: `city-area-layer`,
|
||||
source: `region_info`,
|
||||
'source-layer': `region_info`,
|
||||
type: 'fill',
|
||||
filter: ['match', ['get', 'code'], '330100', true, false],
|
||||
paint: {
|
||||
'fill-color': '#1C4B5D',
|
||||
},
|
||||
}
|
||||
map.addLayer(options)
|
||||
// 杭州下属各区县边界线图层
|
||||
let districtLineOption = {
|
||||
id: `district-line-layer`,
|
||||
source: `region_info`,
|
||||
'source-layer': `region_info`,
|
||||
type: 'line',
|
||||
layout: {
|
||||
'line-cap': 'round',
|
||||
'line-join': 'round',
|
||||
},
|
||||
filter: ['match', ['get', 'parent_code'], '330100', true, false],
|
||||
paint: {
|
||||
'line-color': '#245D6D',
|
||||
'line-width': 1,
|
||||
},
|
||||
}
|
||||
map.addLayer(districtLineOption)
|
||||
map.addSource('raster-tiles', {
|
||||
"type": "raster",
|
||||
// type: 'vector',
|
||||
// scheme: 'tms',
|
||||
"tiles": ['https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=b6585bc41ee16251dbe6b1af64f375d9'],
|
||||
"tileSize": 256,
|
||||
})
|
||||
map.addLayer({
|
||||
"id": "tdt-img-tiles",
|
||||
"type": "raster",
|
||||
"source": "raster-tiles",
|
||||
"minzoom": 0,
|
||||
"maxzoom": 22
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue