Utilisation de JavaScript et de Tencent Maps pour implémenter la fonction d'affichage de bâtiments en 3D

Utilisez JavaScript et Tencent Maps pour implémenter la fonction d'affichage 3D des bâtiments de la carte

Dans le développement d'applications cartographiques, la fonction d'affichage 3D des bâtiments peut permettre aux utilisateurs de mieux comprendre l'emplacement affiché sur la carte, augmentant ainsi l'expérience utilisateur et la participation. Cet article explique comment utiliser JavaScript et l'API Tencent Map pour implémenter la fonction d'affichage de la carte 3D du bâtiment et fournit des exemples de code détaillés.

Étape 1 : Configurer l'API Tencent Map

Tout d'abord, vous devez introduire le fichier JavaScript de l'API Tencent Map dans la page et obtenir la clé API correspondante. La clé API peut être obtenue via la page d'application de Tencent Map Open Platform.

Le code du fichier JavaScript qui introduit l'API Tencent Map dans la page est le suivant :

<script src="//map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>

Veuillez remplacer YOUR_KEY par votre clé API.

Étape 2 : Créer un objet cartographique

Ensuite, vous devez créer un objet cartographique sur la page pour afficher les informations cartographiques et créer des modèles 3D. Les objets cartographiques peuvent être créés via le constructeur de carte fourni par QQ.

Le code pour créer un objet cartographique est le suivant :

// 创建地图对象
var map = new qq.maps.Map(document.getElementById("map"), {
    center: new qq.maps.LatLng(39.916527, 116.397128),   // 地图中心点
    zoom: 16,   // 地图缩放级别
    mapTypeId: qq.maps.MapTypeId.ROADMAP,  // 地图类型
    disableDefaultUI: true, // 隐藏地图默认控件
    zoomControl: true,  // 显示缩放控件
    mapControl: true    // 显示地图类型控件
});

La création d'un objet cartographique nécessite de transmettre certains paramètres, tels que le point central, le niveau de zoom et d'autres informations. Dans cet exemple, le point central est défini sur le centre de Pékin, le niveau de zoom est de 16, le type de carte est ROADMAP (carte normale) et les contrôles par défaut de la carte sont masqués, et seuls le contrôle de zoom et le contrôle de type de carte sont affichés.

Étape 3 : Créer un modèle de bâtiment 3D

Pour afficher le modèle de bâtiment 3D sur la carte, vous devez utiliser l'API 3DTilesLayer fournie par QQ. Lors de la création d'un objet 3DTilesLayer, vous devez transmettre des paramètres tels que le modèle et l'éclairage pour créer le modèle.

Le code pour créer un modèle de bâtiment 3D est le suivant :

// 创建3D建筑模型
var buildingLayer = new qq.maps.ThreeDTilesLayer({
    map: map,
    visible: true,
    url: "https://yingyan.baidu.com/demo/3dtile/106Building/tileset.json",
    light: {
        type: "BRIGHT",
        position: [-200, 10, 200],
        color: "#FFFFFF",
        intensity: 1.0
    }
});

Parmi eux, le paramètre url permet de préciser l'emplacement du fichier de description JSON du modèle de bâtiment 3D, et le paramètre d'éclairage permet de définir l'éclairage. du modèle.

Étape 4 : Ajouter des événements interactifs

Afin d'augmenter l'expérience utilisateur et la participation, vous devez ajouter des événements interactifs, tels que l'affichage d'informations pertinentes sur le bâtiment lorsque la souris survole.

Le code pour ajouter des événements interactifs est le suivant :

// 添加鼠标悬停事件
qq.maps.event.addListener(buildingLayer, 'mousemove', function (event) {
    var position = event.latLng,
        height = buildingLayer.getHeightAtLatLng(position),
        infoWindow = new qq.maps.InfoWindow({
            map: map,
            position: position,
            content: "<div style='font-weight:bold;font-size:14px;'>该建筑高度为：" + height.toFixed(2) + "米</div>"
        });
    infoWindow.open();
});

Dans le code ci-dessus, la fonction qq.maps.event.addListener() est utilisée pour écouter l'événement mousemove de l'objet 3DTilesLayer. Lorsque l'événement est déclenché, obtenez les coordonnées géographiques de l'emplacement de la souris, obtenez la hauteur du point grâce à la fonction getHeightAtLatLng(), et enfin affichez les informations du bâtiment sur la carte.

L'exemple de code complet est le suivant :

    
        
        
        
        <script src="//map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>
        <script>
            window.onload = function() {
                // 创建地图对象
                var map = new qq.maps.Map(document.getElementById("map"), {
                    center: new qq.maps.LatLng(39.916527, 116.397128),
                    zoom: 16,
                    mapTypeId: qq.maps.MapTypeId.ROADMAP,
                    disableDefaultUI: true,
                    zoomControl: true,
                    mapControl: true
                });
                // 创建3D建筑模型
                var buildingLayer = new qq.maps.ThreeDTilesLayer({
                    map: map,
                    visible: true,
                    url: "https://yingyan.baidu.com/demo/3dtile/106Building/tileset.json",
                    light: {
                        type: "BRIGHT",
                        position: [-200, 10, 200],
                        color: "#FFFFFF",
                        intensity: 1.0
                    }
                });
                // 添加鼠标悬停事件
                qq.maps.event.addListener(buildingLayer, 'mousemove', function (event) {
                    var position = event.latLng,
                        height = buildingLayer.getHeightAtLatLng(position),
                        infoWindow = new qq.maps.InfoWindow({
                            map: map,
                            position: position,
                            content: "<div style='font-weight:bold;font-size:14px;'>该建筑高度为：" + height.toFixed(2) + "米</div>"
                        });
                    infoWindow.open();
                });
            }
        </script>
    

    
        

    

Vous devez enregistrer le code sous forme de fichier HTML et l'ouvrir dans le navigateur pour voir la fonction d'affichage du bâtiment 3D de la carte.

Résumé :

Cet article explique comment utiliser JavaScript et l'API Tencent Map pour implémenter la fonction d'affichage du bâtiment 3D de la carte et fournit des exemples de code détaillés. Grâce à la mise en œuvre ci-dessus, les utilisateurs peuvent mieux comprendre les informations sur le bâtiment sur la carte et augmenter l'expérience et la participation des utilisateurs.

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!