Menggunakan JavaScript dan Peta Tencent untuk melaksanakan fungsi paparan bangunan 3D peta

Gunakan JavaScript dan Peta Tencent untuk melaksanakan fungsi paparan bangunan 3D peta

Dalam pembangunan aplikasi peta, fungsi paparan bangunan 3D boleh menjadikan pengguna lebih memahami lokasi yang dipaparkan pada peta dan meningkatkan pengalaman dan penyertaan pengguna. Artikel ini akan memperkenalkan cara menggunakan JavaScript dan Tencent Map API untuk melaksanakan fungsi paparan bangunan 3D peta dan memberikan contoh kod terperinci.

Langkah 1: Konfigurasi Tencent Map API

Pertama, anda perlu memperkenalkan fail JavaScript Tencent Map API ke dalam halaman dan dapatkan kunci API yang sepadan. Kunci API boleh diperolehi melalui halaman aplikasi Tencent Map Open Platform.

Kod untuk fail JavaScript yang memperkenalkan API Peta Tencent ke dalam halaman adalah seperti berikut:

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

Berhati-hati untuk menggantikan YOUR_KEY dengan kunci API anda.

Langkah 2: Cipta objek peta

Seterusnya, anda perlu mencipta objek peta dalam halaman untuk memaparkan maklumat peta dan membina model 3D. Objek peta boleh dibuat melalui pembina peta yang disediakan oleh QQ.

Kod untuk mencipta objek peta adalah seperti berikut:

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

Penciptaan objek peta memerlukan lulus beberapa parameter, seperti titik tengah, tahap zum dan maklumat lain. Dalam contoh ini, titik tengah ditetapkan ke tengah Beijing, tahap zum ialah 16, jenis peta ialah ROADMAP (peta biasa), dan kawalan lalai peta disembunyikan, dan hanya kawalan zum dan kawalan jenis peta. dipaparkan.

Langkah 3: Buat model bangunan 3D

Untuk memaparkan model bangunan 3D pada peta, anda perlu menggunakan 3DTilesLayerAPI yang disediakan oleh QQ. Apabila mencipta objek 3DTilesLayer, anda perlu lulus parameter seperti model dan pencahayaan untuk mencipta model.

Kod untuk mencipta model bangunan 3D adalah seperti berikut:

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

Antaranya, parameter url digunakan untuk menentukan lokasi fail penerangan JSON bangunan 3D model, dan parameter pencahayaan digunakan untuk menetapkan pencahayaan model.

Langkah 4: Tambah acara interaktif

Untuk meningkatkan pengalaman dan penyertaan pengguna, anda perlu menambah beberapa acara interaktif, seperti memaparkan maklumat yang berkaitan tentang bangunan apabila tetikus sedang berlegar.

Kod untuk menambah acara interaktif adalah seperti berikut:

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

Dalam kod di atas, fungsi qq.maps.event.addListener() digunakan untuk mendengar pergerakan tetikus peristiwa objek 3DTilesLayer. Apabila peristiwa dicetuskan, dapatkan koordinat geografi lokasi tetikus, dapatkan ketinggian titik melalui fungsi getHeightAtLatLng() dan akhirnya memaparkan maklumat bangunan pada peta.

Contoh kod lengkap adalah seperti berikut:

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

    

Anda perlu menyimpan kod sebagai fail HTML dan membukanya dalam penyemak imbas untuk melihat fungsi paparan bangunan 3D bagi peta.

Ringkasan:

Artikel ini memperkenalkan cara menggunakan JavaScript dan Tencent Map API untuk melaksanakan fungsi paparan bangunan 3D peta dan menyediakan contoh kod terperinci. Melalui pelaksanaan di atas, pengguna boleh lebih memahami maklumat bangunan pada peta dan meningkatkan pengalaman dan penyertaan pengguna.

Atas ialah kandungan terperinci Menggunakan JavaScript dan Peta Tencent untuk melaksanakan fungsi paparan bangunan 3D peta. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!