<!DOCTYPE html>
<html lang="en">
<head>
<title>3D Terrain</title>
<meta property="og:description" content="Go beyond hillshade and show elevation in actual 3D." />
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.js">
</script>
<link href="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.css" rel="stylesheet" />
</script>
<style>
body {
margin: 0;
padding: 0;
}
html,
body,
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken =
'pk.eyJ1IjoiYXJhcGF5IiwiYSI6ImNsNXEyYXJhMDB2MWkzaWw4dWgxcWptOHYifQ.UYSWGUj_ufnOu-7KACtl4w';
const map = (window.map = new mapboxgl.Map({
//projection: { name: 'globe' },
container: 'map',
zoom: 13,
//center: [116.18846492, 39.99012992],
center: [113.8143361, 22.9670672],
pitch: 52,
hash: true,
style: {
version: 8,
sources: {
"mapbox-terrain-rgb": {
"type": "raster-dem",
"url": "mapbox://mapbox.terrain-rgb"
},
osm: {
type: 'raster',
tiles: ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'],
tileSize: 256,
//attribution: '© OpenStreetMap Contributors',
maxzoom: 19
},
amap: {
type: 'raster',
tiles: ['https://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'],
tileSize: 256,
maxzoom: 15
},
// Use a different source for terrain and hillshade layers, to improve render quality
terrainSource: {
type: 'raster-dem',
encoding: 'mapbox',
//url: 'https://demotiles.maplibre.org/terrain-tiles/tiles.json',
//tiles: ["https://tiles1.geovisearth.com/base/v1/terrain-rgb/{z}/{x}/{y}?token=6ab7ec47b2c459f37249eed880a4b8730c62dad9a7f9d05cc6665cc1cb0045ef"],
tiles: ["http:localhost:8088/tiles/{z}/{x}/{y}.png"],
tileSize: 256,
"minzoom": 10,
"maxzoom": 12,
format: "png"
},
hillshadeSource: {
type: 'raster-dem',
format: "png",
// "basename": "jaxa_terrainrgb_N047E011",
// "id": "jaxa_terrainrgb_N047E011",
// "description": "jaxa_terrainrgb_N047E011",
// "version": "1",
// "type": "baselayer",
"minzoom": 10,
"maxzoom": 12,
// "bounds": [
// -180,
// -85.05112877980659,
// 180,
// 85.0511287798066
// ],
// "center": [
// 0,
// 0,
// 6
// ],
// "tilejson": "2.0.0",
//url: 'https://demotiles.maplibre.org/terrain-tiles/tiles.json',
tiles: ["http:localhost:8088/tiles/{z}/{x}/{y}.png"],
//tiles: ["https://tiles1.geovisearth.com/base/v1/terrain-rgb/{z}/{x}/{y}?token=6ab7ec47b2c459f37249eed880a4b8730c62dad9a7f9d05cc6665cc1cb0045ef"],
//tiles: ["https://tiles1.geovisearth.com/base/v1/ter/{z}/{x}/{y}?format=png&tmsIds=w&token=6ab7ec47b2c459f37249eed880a4b8730c62dad9a7f9d05cc6665cc1cb0045ef"],
tileSize: 256
},
xingtuimg: {
type: 'raster',
tiles: ["https://tiles1.geovisearth.com/base/v1/img/{z}/{x}/{y}?format=webp&tmsIds=w&token=6ab7ec47b2c459f37249eed880a4b8730c62dad9a7f9d05cc6665cc1cb0045ef"],
tileSize: 256,
//attribution: '© OpenStreetMap Contributors',
maxzoom: 18
},
xingtunote: {
type: 'raster',
tiles: ["https://tiles1.geovisearth.com/base/v1/cia/{z}/{x}/{y}?format=png&tmsIds=w&token=6ab7ec47b2c459f37249eed880a4b8730c62dad9a7f9d05cc6665cc1cb0045ef"],
tileSize: 256,
//attribution: '© OpenStreetMap Contributors',
maxzoom: 18
},
mapboxsatellite: {
type: 'raster',
url: 'mapbox://mapbox.satellite',
tileSize: 256
}
},
layers: [
{
id: 'osm',
type: 'raster',
source: 'osm'
},
//{
// id: 'amap',
// type: 'raster',
// source: 'amap'
//},
//{
//id: 'mapboxsatellite',
//type: 'raster',
//source: 'mapboxsatellite'
//},
//{
//id: 'xingtuimg',
//type: 'raster',
//source: 'xingtuimg'
//},
//{
//id: 'xingtunote',
//type: 'raster',
//source: 'xingtunote'
//},
{
id: 'hills',
type: 'hillshade',
//source: 'mapbox-terrain-rgb',
source: 'hillshadeSource',
layout: {
visibility: 'visible'
},
//paint: { 'hillshade-shadow-color': '#473B24' }
// "paint": {
// "hillshade-illumination-direction": 183,
// "hillshade-exaggeration": 1,
// "hillshade-highlight-color": "#FFFFFF",
// "hillshade-shadow-color": "#000000",
// "hillshade-accent-color": "#000000"
// },
"paint": {
"hillshade-illumination-direction": 183,
"hillshade-exaggeration": 1,
"hillshade-highlight-color": "hsla(141, 35%, 47%, 0.75)",
"hillshade-shadow-color": "hsla(130, 43%, 11%, 0.9)",
"hillshade-accent-color": "#dcf193"
}
}
],
terrain: {
//source: 'mapbox-terrain-rgb',
source: 'terrainSource',
exaggeration: 1
}
},
maxZoom: 18,
maxPitch: 85
}));
//map.addControl(
//new maplibregl.NavigationControl({
//visualizePitch: true,
//showZoom: true,
//showCompass: true
//})
//);
//map.addControl(
//new maplibregl.TerrainControl({
//source: 'terrainSource',
//exaggeration: 1
//})
//);
</script>
</body>
</html>