Comment OpenLayer réalise-t-il le mouvement de la voiture en fonction du trajet ?

Cet article parle principalement de la réalisation du mouvement de chemin sur openlayer. Allons avec l'éditeur pour voir comment il est implémenté. Les amis intéressés peuvent y jeter un œil.

1. Analyse des besoins

La fonction dont le client a besoin est de permettre à la voiture de se déplacer selon le chemin sur une carte Gis. Pourquoi doit-elle être Gis (C'est un client ? -exigence spécifiée. Je suis sans voix). Et le client a également dit que la carte de base devrait être facile à remplacer, mais qu'il voulait utiliser Gis pour exprimer des informations géographiques intérieures. Je ne pouvais pas utiliser des interfaces Gis prêtes à l'emploi telles que Baidu et Amap.

Compte tenu des exigences ci-dessus, je n'ai pas trop appris sur les frameworks Web SIG. Parce que le concept du client concernant Gis est qu'il peut zoomer et dézoomer, planifier un chemin, etc. J'ai donc choisi ol et utilisé ses images statiques (choisissez ceci pour répondre au besoin du client de mettre à jour de manière flexible la carte de base) comme carte de base Gis pour résoudre ce problème.

Tutoriels associés : Tutoriel vidéo js

2. Affichage des effets

3.

Comme il s'agit d'un code de vérification technique, c'est un peu compliqué, donc seul le code clé est donné. Si vous avez des besoins professionnels, n'hésitez pas à en discuter ensemble.

3.1 Implémenter le dessin du chemin

Cette étape est relativement simple, utilisant principalement l'objet Draw d'Ol, où se trouve le code :

draw(type){
        this.stopdraw();
        this._draw = new Draw({
            source: this.layer.getSource(),
            type: type == 'Icon' ? 'Point' : type
        });
        this._draw.on('drawend', (event)=>{
            if(type == 'LineString'){
                this.traceLine = event.feature;
            }
            if(type != 'Icon') return;
            let f = event.feature;
            f.setStyle(new Style({
                image: new Icon({
                    src: '/content/battery.gif'
                }),
                text: new Text({
                    text: 'new item',
                    fill: new Fill({
                        color: "red"
                    })
                })
            }));
            f.type = 'battery';
        });
        this.map.addInteraction(this._draw);
        this._snap = new Snap({source: this.layer.getSource()});
        this.map.addInteraction(this._snap);
    }

Le le code clé réside dans la surveillance de l'événement drawend. S'il s'agit d'une situation LineString, placez cette fonctionnalité dans une variable publique pour faciliter son utilisation lorsque le chemin est en cours d'exécution.

3.2 Décomposer les données du chemin

Cette partie consiste à obtenir le chemin de l'étape 3.1 puis à l'analyser, car la chaîne de lignes sur 3.1 est une collection de plusieurs segments de ligne, mais l'essence du mouvement est Il s'agit de changer les coordonnées de l'icône afin que ses changements rapides et continus forment un effet de mouvement. Voici donc une méthode de subdivision de chemin, le code est le suivant :

cutTrace(){
        let traceCroods = this.traceLine.getGeometry().getCoordinates(); 
        let len = traceCroods.length;
        let destCroods = [];
        for(let i = 0; i < len - 1; ++i){
            let bPoint = traceCroods[i];
            let ePoint = traceCroods[i+1];
            let bevelling = Math.sqrt(Math.pow(ePoint[0] - bPoint[0], 2)
            + Math.pow(ePoint[1] - bPoint[1], 2) );
            let cosA = (ePoint[0] - bPoint[0]) / bevelling;
            let sinA = (ePoint[1] - bPoint[1]) / bevelling;
            
            let curStep = 0;
            let step = 5;
            destCroods.push(new Point([bPoint[0], bPoint[1]]));
            do{
                curStep++;
                let nextPoint;
                if(curStep * step >= bevelling){
                    nextPoint = new Point([ePoint[0], ePoint[1]]);
                }else{
                    nextPoint = new Point([
                        cosA * curStep * step + bPoint[0]
                        ,
                        sinA * curStep * step + bPoint[1]
                    ]);
                }
                destCroods.push(nextPoint);
            }while(curStep * step < bevelling);
        }
        return destCroods;
    }

Certaines fonctions trigonométriques mathématiques et méthodes de calcul sont utilisées. Cette méthode sélectionne enfin un ensemble de coordonnées calculé en fonction de la taille du pas.

3.3 Utiliser postcompose pour obtenir des effets de mouvement

Le code est le suivant :

tracerun(){
        if(!this.traceLine) return;
        this.traceCroods = this.cutTrace();
        this.now = new Date().getTime();
        this.map.on('postcompose', this.moveFeature.bind(this));
        this.map.render();
    }
    moveFeature(event){
        let vCxt = event.vectorContext;
        let fState = event.frameState;
        let elapsedTime = fState.time - this.now;
        let index = Math.round(300 * elapsedTime / 1000);
        let len = this.traceCroods.length;
        if(index >= len){
            //stop
            this.map.un('postcompose', this.moveFeature);
            return;
        }
        let dx, dy, rotation;
        if(this.traceCroods[index] && this.traceCroods[index + 1]){
            let isRigth = false;
            let bCrood = this.traceCroods[index].getCoordinates();
            let eCrood = this.traceCroods[index + 1].getCoordinates();
            if(bCrood[0] < eCrood[0]){
                //左->右
                isRigth = true
            }
            dx = bCrood[0] - eCrood[0];
            dy = bCrood[1] - eCrood[1];

            rotation = Math.atan2(dy,dx);
            if(rotation > (Math.PI / 2)){
                //修正
                rotation =  Math.PI - rotation;
            }else if(rotation < -1 * (Math.PI / 2)){
                rotation = -1 * Math.PI - rotation;
            }else{
                rotation = -rotation;
            }
            console.log(dx + &#39;  &#39; + dy + &#39;  &#39; + rotation);
            let curPoint = this.traceCroods[index];
            var anchor = new Feature(curPoint);
            let style = new Style({
                image: new Icon({
                    img: isRigth ? this.carRight : this.carImg,
                    imgSize: [32,32],
                    rotateWithView: false,
                    rotation: rotation
                }),
                text: new Text({
                    text: &#39;Car&#39;,
                    fill: new Fill({
                        color: &#39;red&#39;
                    }),
                    offsetY: -20
                })
            });  
            vCxt.drawFeature(anchor, style);
            //this.map.getView().setCenter(bCrood);
        }
        this.map.render();
    }

Ce code mobile est implémenté à l'aide de l'événement postcompose d'ol , car l'événement postcompose sera déclenché après l'exécution de la méthode render, il remplace donc l'implémentation du timer. Parmi eux, la rotation calcule l'inclinaison de l'icône en mouvement et la direction du mouvement en fonction des coordonnées à deux points, ce qui a plus d'impact sur l'affichage.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!