Using JavaScript and Tencent Maps to implement map 3D building display function

Using JavaScript and Tencent Maps to implement the 3D building display function of the map

In the development of map applications, the 3D building display function can allow users to better understand what the map displays. location to increase user experience and engagement. This article will introduce how to use JavaScript and Tencent Map API to implement the map 3D building display function, and provide detailed code examples.

Step 1: Configure Tencent Map API

First, you need to introduce the JavaScript file of Tencent Map API into the page and obtain the corresponding API key. The API key can be obtained through the application page of Tencent Map Open Platform.

The code for the JavaScript file that introduces Tencent Map API into the page is as follows:

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

Note that you should replace YOUR_KEY with your API key.

Step 2: Create a map object

Next, you need to create a map object in the page to display map information and building 3D models. Map objects can be created through the map constructor provided by QQ.

The code to create a map object is as follows:

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

The creation of a map object requires passing some parameters, such as center point, zoom level and other information. In this example, the center point is set to the center of Beijing, the zoom level is 16, the map type is ROADMAP (normal map), and the default controls of the map are hidden, and only the zoom control and map type control are displayed.

Step 3: Create 3D building model

To display the 3D building model on the map, you need to use the 3DTilesLayerAPI provided by QQ. When creating a 3DTilesLayer object, you need to pass parameters such as model and lighting to create the model.

The code to create a 3D building model is as follows:

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

The url parameter is used to specify the location of the JSON description file of the 3D building model, and the lighting parameters are used to set the lighting of the model.

Step 4: Add interactive events

In order to increase user experience and participation, you need to add some interactive events, such as displaying relevant information about the building when the mouse is hovering.

The code to add interactive events is as follows:

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

In the above code, the qq.maps.event.addListener() function is used to listen to the mousemove event of the 3DTilesLayer object. When the event is triggered, obtain the geographical coordinates of the mouse location, obtain the height of the point through the getHeightAtLatLng() function, and finally display the building information on the map.

The complete code example is as follows:

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

    

You need to save the code as an HTML file and open it in the browser to see the 3D building display function of the map.

Summary:

This article introduces how to use JavaScript and Tencent Map API to implement the map 3D building display function, and provides detailed code examples. Through the above implementation, users can better understand the building information on the map and increase user experience and participation.

The above is the detailed content of Using JavaScript and Tencent Maps to implement map 3D building display function. For more information, please follow other related articles on the PHP Chinese website!