Skip to main content

3DContour surface

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

show
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>3DContour 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/lite/v9.1.0/mapmost-lite-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,This parameter must be added
    });
    
      map.on('load', function () {
            map.addSource('contour', {
                     "type": "geojson",
                     "data": data
                 });
                 map.addLayer({
                     'id': 'contour-continuous',             // Layersid（need to be unique)
                     'type': 'fill-extrusion',               // type
                     'source': 'contour',                    // data sourceid
                     "paint": {
                         "fill-extrusion-color": {
                             'property': 'property',          // According to attributes[property]value
                             'type': 'exponential',           // Interpolate exponentially
                             'stops': [
                                 [0.02, '#4a4a8b'],
                                 [0.03, '#3887be'],
                                 [0.05, '#56b881'],
                                 [0.08, '#f1f075'],
                                 [0.30, '#f9886c'],
                                 [0.70, '#f54e5e'],
                             ],
                         },
                         "fill-extrusion-height":{              // According to attributes[property]value
                             'stops': [[0, 10], [1, 1000]],     // value0arrive1，high10arrive1000
                             'property': 'property',
                             'base': 0.8,
                         },
                         "fill-extrusion-base": 0,             // bottom height
                         "fill-extrusion-opacity": 0.8         // transparency
                     }
                 });
      })
</script>
</body>
</html>