Affichage panoramique

Vue d'ensemble

La carte panoramique Baidu offre une vue panoramique à 360 degrés couvrant les routes désignées et les points de localisation désignés dans la ville le long de la vue panoramique. Par rapport à la carte panoramique bidimensionnelle, elle est plus réaliste et intuitive.

L'API de la carte panoramique couvre actuellement les mêmes villes que Baidu Map (map.baidu.com) et maintient la même fréquence de mise à jour que Baidu Map.

La plate-forme ouverte Baidu LBS fournit des fonctions panoramiques au monde extérieur via l'API JavaScript, et par défaut, le côté PC utilise la technologie flash pour le rendu, et le côté navigateur mobile utilise le rendu JavaScript pour garantir la disponibilité du service sous différents navigateurs. De plus, en raison de problèmes inter-domaines dans le rendu Flash cette fois, lorsque vous utilisez la fonction panorama sur le PC, vous devez déployer l'exemple de panorama sur le serveur pour le visualiser. Un double-clic direct sur l'exemple ne peut pas afficher le panorama.

Voici l'effet panoramique :

Contrôle panoramique

Vous pouvez accéder à la carte panoramique à partir de la carte ordinaire via le contrôle panoramique. La méthode d'ajout du contrôle panoramique est similaire à l'ajout de la barre d'outils et d'autres. contrôles

Le code est le suivant :

var stCtrl = new BMap.PanoramaControl();  
stCtrl.setOffset(new BMap.Size(20, 20));  
map.addControl(stCtrl);

Cliquez sur le contrôle panoramique pour entrer dans le panorama. Cliquez sur le bouton de fermeture dans le coin supérieur droit du panorama pour revenir à la carte normale.

Utilisation de la carte panoramique

La carte panoramique peut être ajoutée à la page Web en tant que div comme une carte normale. Voici le code de base pour afficher le panorama et une description du code.

<div id="panorama" style="width:100%;height:100%"></div>    //1  
<script type="text/javascript">  
window.onload = function(){  
    var panorama = new BMap.Panorama('panorama');   //2
    panorama.setPosition(new BMap.Point(120.320032, 31.589666));    //3  
    // panorama.setId('0100010000130501122416015Z1');  
    panorama.setPov({heading: -40, pitch: 6});  //4 
}  
</script>

Instructions :

1) Créez un div qui "contient" la carte panoramique en tant que conteneur ;

2) Créez un objet panorama (Panorama), le paramètre constructeur est le même que l'identifiant div créé en 1.

3) Affichez la carte panoramique d'un emplacement spécifique en définissant les coordonnées de latitude et de longitude, en plus de spécifier la latitude et la longitude, vous pouvez également définir la vue panoramique actuellement affichée en spécifiant l'identifiant du panorama, comme la section des commentaires du code ;

4) Les paramètres de cap et d'inclinaison sont utilisés pour définir l'angle de vue du panorama, où le cap fait référence à l'angle de la caméra dans la direction horizontale ("secouant la tête"), plein nord est 0, plein est est 90, plein sud est 180 et plein ouest est 270 ; le pas fait référence à la direction verticale de la caméra (« hochement de tête »).

Définir les contrôles de la carte panoramique

En définissant le paramètre PanoramaOption et la méthode setOptions de la classe Panorama, vous pouvez spécifier s'il faut afficher les contrôles de navigation, les contrôles de guidage routier, les contrôles de l'album photo, etc. dans la carte panoramique.

Le code de base pour définir le contrôle de navigation caché est le suivant :

//通过PanoramaOption指定
var panorama = new BMap.Panorama('panorama', {navigationControl: false}); //默认为显示导航控件，默认值为true
//通过setOptions方法指定
Panorama.setOptions({navigationControl:false});

Le code de base pour définir le contrôle de guidage routier est le suivant :

//通过PanoramaOption指定
var panorama = new BMap.Panorama('panorama', {linksControl:false}); //默认为显示道路指引控件，默认值为true
//通过setOptions方法指定
Panorama.setOptions({linksControl:false});

Ce qui précède La méthode peut également définir si le contrôle de l'album panoramique est affiché. Et le style d'affichage, le code principal est le suivant :

panorama.setOptions({
    albumsControl: true,
    albumsControlOptions:{anchor:BMAP_ANCHOR_TOP_LEFT,  //设置相册显示位置
        offset:new BMap.Size(10,10),//设置相册距离左上角偏移量
        maxWidth:100%,//设置相册控件的最大显示宽度
        imageHeight:80//设置相册控件的高度
        }
    });

Définissez le type de poi affiché dans le panorama

La méthode setPanoramaPOIType de Panorama peut spécifier le type de poi affiché. Les types actuellement pris en charge incluent : les hôtels, les restaurants, les cinémas, les arrêts de bus, les scènes d'intérieur, etc. Lorsque le type de paramètre est BMAP_PANORAMA_POI_NONE, cela signifie que tous les poi sont masqués.

Seul le code principal du type de restaurant est affiché dans la vue panoramique spécifiée :

panorama.setPanoramaPOIType(BMAP_PANORAMA_POI_CATERING); //餐饮 
panorama.setPov({pitch: 6, heading: 138});

Utilisation de la carte de scène intérieure

En plus de prendre en charge les vues panoramiques le long de la route, l'API Baidu Map prend en charge les scènes d'intérieur dans les lieux pittoresques et la scène des hôtels. La différence entre les scènes d'intérieur et les panoramas ordinaires est la suivante :

1) Les panoramas ordinaires prennent en charge la définition de panoramas en fonction de la longitude, de la latitude et de l'identifiant, tandis que les scènes d'intérieur ne peuvent être définies que par identifiant

2) La classe PanoramaOption de panorama ordinaire ne prend pas en charge les scènes d'intérieur ; commandes de commutation, les scènes intérieures sont prises en charge.

Le code de base pour régler la commande de commutation intérieure pour les scènes intérieures :

var panorama = new BMap.Panorama('panorama', { 
    'disableIndoorSceneSwitchControl': true //默认为显示室内景场景点切换控件，默认值为false 
    }); 
panorama.setOptions({ 
    'disableIndoorSceneSwitchControl': true 
    });

Obtenir des données de carte panoramique

En plus d'afficher des panoramas à des emplacements et des angles spécifiques, l'API JavaScript prend également en charge l'obtention de ce type d'informations. Voici un exemple d'obtention de l'ID du panorama et des coordonnées de latitude et de longitude. .

var panorama = new BMap.Panorama('panorama', { 
    'disableIndoorSceneSwitchControl': true //默认为显示室内景场景点切换控件，默认值为false 
    }); 
panorama.setOptions({ 
    'disableIndoorSceneSwitchControl': true 
    });

1) La classe PanoramaService est utilisée pour créer une instance de la classe d'informations sur les données panoramiques et fournit getPanoramaById (obtenir des données panoramiques basées sur le pid) getPanoramaByPOIId (obtenir des données panoramiques basées sur POIId) getPanoramaByLocation (retour la distance à partir de celui-ci en fonction des coordonnées) Trois méthodes sont utilisées pour obtenir des données panoramiques.

2) La méthode getPanoramaByLocation peut renvoyer les données panoramiques les plus proches d'ici en fonction des coordonnées. Lorsque les données ne peuvent pas être obtenues, le paramètre de la fonction de rappel est nul.

Événements de carte panoramique

L'API JavaScript fournit position_changed (événement de changement de position), links_changed (événement de changement de panorama de la route adjacente), pov_changed (événement de changement de perspective), zoom_changed (événement de changement de niveau de zoom) et d'autres événements pour surveiller les changements d'état panoramique .

L'utilisation est la suivante :

var panorama = new BMap.Panorama('panorama');  
panorama.setPosition(new BMap.Point(120.320032, 31.589666));  
panorama.addEventListener('position_changed', function(e){ //注册全景位置改变事件  
    var pos = this.getPosition();  
    console.log(e.type);  
 
});

Ajouter des étiquettes dans la carte panoramique

PanoramaLabel est une classe d'étiquettes panoramiques qui peut définir la position et les attributs de hauteur (altitude) tridimensionnels du panoramique. étiquette, parmi lesquelles la hauteur tridimensionnelle a les caractéristiques de « grande proche et petite loin », c'est-à-dire que plus le point de l'étiquette panoramique est proche du point central du panorama, la même valeur de hauteur sera affichée plus haut, comme indiqué. dans la figure ci-dessous, les hauteurs de l'étiquette 1 et de l'étiquette 2 sont définies sur 2 mètres en même temps. Cependant, étant donné que l'étiquette 1 est plus proche du point central que l'étiquette 2, l'étiquette 1 est donc affichée plus haut.

L'étiquette PanoramaLabel peut être ajoutée au panorama via la méthode addOverlay de la classe Panorama. L'utilisation est la suivante :

var panorama = new BMap.Panorama('panorama');
panorama.setPosition(new BMap.Point(116.403925,39.913903));//坐标点在天安门
 
var labelPosition = new BMap.Point(116.403925,39.913903);
var labelOptions = {
    position: labelPosition,
    altitude:5
};//设置标注点的经纬度位置和高度
var label = new BMap.PanoramaLabel('自定义标注-天安门广场', labelOptions);//创建全景标注对象
panorama.addOverlay(label);//在全景地图里添加该标注
panorama.setPov(label.getPov()); //修改点的视角，朝向该label

En plus d'ajouter des annotations panoramiques, vous pouvez également déclencher un clic, un survol, une sortie de souris et supprimer des événements d'annotations panoramiques. Voici comment utiliser les événements de clic :

label.addEventListener('click', function() { //给标注点注册点击事件
    panorama.setPov({  //修改点的视角
        pitch: 15, 
        heading: 180
    });
});