Skip to main content

3D contour surface

The visual expression of the spatial aggregation of continuously distributed objects in space, such as the flow of people, pollutant concentration, etc., supports the continuous animation of the migration and morphological changes of hot or cold areas.

show
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>3D Contour Surface</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
    <script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.16.0/mapmost-webgl-min.js"></script>
</head>
<body>
<div id="map"></div>
<script>
        let map = new mapmost.Map({
            container: 'map',  
            style: "<your style url>", 
            center: [120.7285892158784,31.322079341989635], 
            zoom: 13.74, 
            pitch:58.499, 
            bearing:47.2, 
            userId: '***', // Authorization code
        });
        
        map.on('load', function () {
            map.addSource('contour', {
                "type": "geojson",
                "data": data
            });
            map.addLayer({
                'id': 'contour-continuous', // layer id (needs to be unique)
                'type': 'fill-extrusion', // type
                'source': 'contour', // data source id
                "paint": {
                    "fill-extrusion-color": {
                        'property': 'property', // According to the value of property [property]
                        'type': 'exponential', // Interpolate by exponential
                        'stops': [
                            [0.02, '#4a4a8b'],
                            [0.03, '#3887be'],
                            [0.05, '#56b881'],
                            [0.08, '#f1f075'],
                            [0.30, '#f9886c'],
                            [0.70, '#f54e5e'],
                        ],
                    },
                    "fill-extrusion-height":{ // According to the value of property [property]
                        'stops': [[0, 10], [1, 1000]], // Values ​​0 to 1, height 10 to 1000
                        'property': 'property',
                        'base': 0.8,
                    },
                    "fill-extrusion-base": 0, // Bottom height
                    "fill-extrusion-opacity": 0.8 // Transparency
                }
            });
      })
</script>
</body>
</html>