Mapbox tasting value cloud animation

summary

Received yesterday mapbox Chinese push , I saw it mapboxgl Update , This updated version adds globa, Finally, there is a ball , So I can't wait to taste fresh today .

Tasting effect

Mainly achieved ：1. Source code compilation , The latest version is 2.10.0-dev;2、 Three dimensional ball display ;3、 Due to the recent frequent typhoon activities , So we added cloud animation . The effect diagram after implementation is as follows ：

Realization

1. Source code compilation

from github On clone Source code , Installation dependency , Modify source code , Cancel accessToken Certification of . modify src/ui/map.js, notes 3258 Just line .

Run the command npm run build-css compile css, Run the command npm run build-dev Compile the development version , Run the command npm run build-prod-min Compile the compressed deployment version .

2. Three dimensional ball display

In the previous version map Added during initialization projection This parameter , In this update , To realize the three-dimensional ball, you only need to change the value of this parameter to globe that will do .

const center = [116.391442, 39.903173]
map = new mapboxgl.Map({
    
    container: 'map',
    maxZoom: 18,
    minZoom: 0,
    zoom: 3,
    center: center,
    style: mapStyle,
    attributionControl: false,
    projection: 'globe' // Three dimensional spherical projection 
});

3、 Cloud animation
The interface comes from the network , Because in the process of calling, it is found that the picture has cross domain , So use node The background did some forwarding , The background code is as follows ：

const express = require('express')
const request = require("request");
const router = express.Router()
const fs = require('fs')

const baseUrl = 'http://dtbank.gistinker.com'

router.get("/img", function (req, res) {
    
    let {
     path } = req.query
    const imgUrl = baseUrl + path
    const filePath = './imgs/' + path.split('/').join('-')
    console.log(filePath)
    const file = fs.createWriteStream(filePath)
    request(imgUrl).pipe(file)
    file.on('finish', function() {
    
        const buffer = fs.readFileSync(filePath)
        res.format ({
    
            'image/jpg': function () {
    
                res.send(buffer);
                file.close();
            }
        })
    })
})

module.exports = router;

Front end by imageSource Realize the display of pictures , through new Image() After the image loading is completed, the image at the next moment will be loaded , Optimized animation effect . The implementation code is as follows ：

const url = 'https://dtbank.gistinker.com/api/sti/gisimg?start=&end=&tag=IR1&_=1656667444192'
fetch(url).then(res => res.json()).then(res=> {
    
    console.log(res)
    const play = () => {
    
        if(index === res.length) index = 0
        let {
    extent, time, url} = res[index]
        const [xmin, ymin, xmax, ymax] = extent.split(',').map(Number)
        const coords = [
            [xmin, ymax],
            [xmax, ymax],
            [xmax, ymin],
            [xmin, ymin]
        ];
        url = url.split('https://dtbank.gistinker.com').join('http://localhost:19999/ty/img?path=')
        const img = new Image()
        img.src = url
        img.onload = () => {
    
            if(map.getSource('loopimage')) {
    
                map.getSource('loopimage').updateImage({
    
                    url: url,
                    coordinates: coords
                })
            } else {
    
                map.addSource('loopimage', {
    
                    type: 'image',
                    url: url,
                    coordinates: coords
                });
                map.addLayer({
    
                    'id': 'loopimage',
                    'source': 'loopimage',
                    'type': 'raster',
                    'paint': {
    
                        'raster-opacity': 0.6,
                        'raster-fade-duration': 0
                    }
                }, 'province-line');
            }
            index++
            play()
        }
    }
    play()
})

The complete code of the above example is as follows ：

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title> Daytime don't know the dark of night </title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="./mapbox-gl.css" rel="stylesheet" />
    <style> body, #map {
       height: 100vh; margin: 0; padding: 0; overflow: hidden; } </style>
</head>

<body>
<div id="map">
</div>
<script src="./mapbox-gl-dev.js"></script>
<script> mapboxgl.accessToken = ''; const mapStyle = {
       "version": 8, "name": "Dark", "sources": {
       "XYZTile": {
       "type": "raster", "tiles": ['https://api.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.webp?sku=1015BRyDI0Jy2'], "tileSize": 256 }, 'AMAPTile': {
       "type": "raster", "tiles": ['http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'], "tileSize": 256, }, 'province': {
       type: 'geojson', data: './data/province.geojson' } }, "layers": [{
       "id": "XYZTile", "type": "raster", "source": "XYZTile", "minzoom": 0, "maxzoom": 22 },{
       'id': 'province-line', 'source': 'province', "type": "line", "paint": {
       "line-color": "#f4f4f4" } }] }; const center = [116.391442, 39.903173] map = new mapboxgl.Map({
       container: 'map', maxZoom: 18, minZoom: 0, zoom: 3, center: center, style: mapStyle, attributionControl: false, projection: 'globe' }); map.on('load', () => {
       // Add daytime fog map.setFog({
       'range': [-1, 2], 'horizon-blend': 0.3, 'color': 'white', 'high-color': '#add8e6', 'space-color': '#d8f2ff', 'star-intensity': 0.0 }); // Add some 3D terrain map.addSource('mapbox-dem', {
       'type': 'raster-dem', 'url': 'mapbox://mapbox.terrain-rgb', 'tileSize': 512, 'maxzoom': 14 }); // map.setTerrain({
       // 'source': 'mapbox-dem', // 'exaggeration': 1.5 // }); let index = 0 const url = 'https://dtbank.gistinker.com/api/sti/gisimg?start=&end=&tag=IR1&_=1656667444192' fetch(url).then(res => res.json()).then(res=> {
       console.log(res) const play = () => {
       if(index === res.length) index = 0 let {
      extent, time, url} = res[index] const [xmin, ymin, xmax, ymax] = extent.split(',').map(Number) const coords = [ [xmin, ymax], [xmax, ymax], [xmax, ymin], [xmin, ymin] ]; url = url.split('https://dtbank.gistinker.com').join('http://localhost:19999/ty/img?path=') const img = new Image() img.src = url img.onload = () => {
       if(map.getSource('loopimage')) {
       map.getSource('loopimage').updateImage({
       url: url, coordinates: coords }) } else {
       map.addSource('loopimage', {
       type: 'image', url: url, coordinates: coords }); map.addLayer({
       'id': 'loopimage', 'source': 'loopimage', 'type': 'raster', 'paint': {
       'raster-opacity': 0.6, 'raster-fade-duration': 0 } }, 'province-line'); } index++ play() } } play() }) }) </script>
</body>
</html>