Verwendung von JavaScript und Tencent Maps zur Implementierung der Karten-3D-Gebäudeanzeigefunktion

Verwenden Sie JavaScript und Tencent Maps, um die 3D-Gebäudeanzeigefunktion der Karte zu implementieren

Bei der Entwicklung von Kartenanwendungen kann die 3D-Gebäudeanzeigefunktion es Benutzern ermöglichen, den auf der Karte angezeigten Standort besser zu verstehen und die Benutzererfahrung und -beteiligung zu verbessern . In diesem Artikel wird die Verwendung von JavaScript und der Tencent Map API zur Implementierung der 3D-Gebäudeanzeigefunktion für Karten vorgestellt und detaillierte Codebeispiele bereitgestellt.

Schritt 1: Tencent Map API konfigurieren

Zuerst müssen Sie die JavaScript-Datei der Tencent Map API in die Seite einführen und den entsprechenden API-Schlüssel erhalten. Der API-Schlüssel kann über die Anwendungsseite der Tencent Map Open Platform bezogen werden.

Der Code für die JavaScript-Datei, die die Tencent Map API in die Seite einführt, lautet wie folgt:

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

Bitte ersetzen Sie YOUR_KEY durch Ihren API-Schlüssel.

Schritt 2: Erstellen Sie ein Kartenobjekt

Als nächstes müssen Sie auf der Seite ein Kartenobjekt erstellen, um Karteninformationen anzuzeigen und 3D-Modelle zu erstellen. Kartenobjekte können über den von QQ bereitgestellten Kartenkonstruktor erstellt werden.

Der Code zum Erstellen eines Kartenobjekts lautet wie folgt:

// 创建地图对象
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    // 显示地图类型控件
});

Die Erstellung eines Kartenobjekts erfordert die Übergabe einiger Parameter, wie z. B. Mittelpunkt, Zoomstufe und andere Informationen. In diesem Beispiel ist der Mittelpunkt auf das Zentrum von Peking eingestellt, die Zoomstufe beträgt 16, der Kartentyp ist ROADMAP (normale Karte) und die Standardsteuerelemente der Karte sind ausgeblendet, und nur die Zoomsteuerung und die Kartentypsteuerung sind vorhanden sind angezeigt.

Schritt 3: Erstellen Sie ein 3D-Gebäudemodell

Um das 3D-Gebäudemodell auf der Karte anzuzeigen, müssen Sie die von QQ bereitgestellte 3DTilesLayerAPI verwenden. Beim Erstellen eines 3DTilesLayer-Objekts müssen Sie Parameter wie Modell und Beleuchtung übergeben, um das Modell zu erstellen.

Der Code zum Erstellen eines 3D-Gebäudemodells lautet wie folgt:

// 创建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
    }
});

Dabei wird der URL-Parameter verwendet, um den Speicherort der JSON-Beschreibungsdatei des 3D-Gebäudemodells anzugeben, und der Beleuchtungsparameter wird verwendet, um die Beleuchtung einzustellen des Modells.

Schritt 4: Interaktive Ereignisse hinzufügen

Um das Benutzererlebnis und die Teilnahme zu verbessern, müssen Sie einige interaktive Ereignisse hinzufügen, z. B. die Anzeige relevanter Informationen über das Gebäude, wenn die Maus darüber schwebt.

Der Code zum Hinzufügen interaktiver Ereignisse lautet wie folgt:

// 添加鼠标悬停事件
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();
});

Im obigen Code wird die Funktion qq.maps.event.addListener() verwendet, um das Mousemove-Ereignis des 3DTilesLayer-Objekts abzuhören. Wenn das Ereignis ausgelöst wird, ermitteln Sie die geografischen Koordinaten des Mausstandorts, ermitteln Sie die Höhe des Punkts über die Funktion getHeightAtLatLng () und zeigen Sie schließlich die Gebäudeinformationen auf der Karte an.

Das vollständige Codebeispiel lautet wie folgt:

    
        
        
        
        <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>
    
    
        

    

Sie müssen den Code als HTML-Datei speichern und im Browser öffnen, um die 3D-Gebäudeanzeigefunktion der Karte anzuzeigen.

Zusammenfassung:

In diesem Artikel wird die Verwendung von JavaScript und der Tencent Map API zur Implementierung der Karten-3D-Gebäudeanzeigefunktion vorgestellt und detaillierte Codebeispiele bereitgestellt. Durch die obige Implementierung können Benutzer die Gebäudeinformationen auf der Karte besser verstehen und die Benutzererfahrung und -beteiligung verbessern.

Das obige ist der detaillierte Inhalt vonVerwendung von JavaScript und Tencent Maps zur Implementierung der Karten-3D-Gebäudeanzeigefunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!