从零开始Vue项目中使用MapboxGL开发三维地图教程（三）添加全屏，缩放旋转和比例控制面板以及自定义图标、标记点击弹窗、地图平移等功能

电玩女神 2023-10-12 15:01 13阅读 0赞

#### 文章目录 ####

*   *   *  1、添加各种控制面板
         *   *  1.1、添加全屏
             *  1.2、缩放旋转控制
             *  1.3、比例尺
         *  2、获取并显示鼠标移动位置的经纬度坐标
         *  3、添加图标
         *   *  3.1、添加图片图层的图标
             *  3.2、添加带有标记的自定义图标
             *  3.3、悬停时显示弹出窗口

#### 1、添加各种控制面板 ####

##### 1.1、添加全屏 #####

//添加全屏控制
          this.map.addControl(new this.$mapboxgl.FullscreenControl());

##### 1.2、缩放旋转控制 #####

// Add zoom and rotation controls to the map.
          this.map.addControl(new this.$mapboxgl.NavigationControl());

##### 1.3、比例尺 #####

// Add a scale control to the map
          this.map.addControl(new this.$mapboxgl.ScaleControl());

#### 2、获取并显示鼠标移动位置的经纬度坐标 ####

通过鼠标移动，获取实时的屏幕坐标和经纬度坐标：

<div style="z-index: 9999; position: absolute; left:40%; background-color: rgb(100, 100, 79);color: #ffff;">
 屏幕坐标：{
 {
 screenxy}} 经纬度： {
 {
 lnglat}}
 </div>

data中定义两个值：

//屏幕xy位置
          screenxy:"",
          //经纬度
          lnglat:null

初始化map方法中加上鼠标移动的监听事件：

//获取鼠标位置
          map.on('mousemove', (e) => {
        
            this.screenxy = JSON.stringify(e.point)
            this.lnglat = JSON.stringify(e.lngLat)
              
          });

效果：  
![在这里插入图片描述][2f08bed21c2543769aae59e60ca05c6e.gif]

#### 3、添加图标 ####

##### 3.1、添加图片图层的图标 #####

首先通过一个图像的url地址添加图片到map中，图像名称起名iconImage；其次定义一个数组features，里面包括两个点的地理信息；然后将features数组通过map的addsource接口添加到map中，数据源的名称起为iconImage，数据源类型为geojson，里面的数据类型为FeatureCollection；最后添加图层，类型是symbol，数据源是iconImage。

//添加图片图层的图标
          map.on('load',()=>{
        
            map.loadImage('https://docs.mapbox.com/mapbox-gl-js/assets/cat.png',(error,image)=>{
        
              if(error) throw error;
              map.addImage('iconImage',image);
    
              let features = [{
        
                 "type": "Feature",
                        "geometry": {
        
                        "type": "Point",
                        "coordinates": [116.469000,40.251706]
                      }
                    }, {
        
                        "type": "Feature",
                        "geometry": {
        
                        "type": "Point",
                        "coordinates": [116.469000,40.351706]
                      }
              }]
    
              map.addSource('iconImage',{
        
                 type: 'geojson',
                  data: {
        
                    type: 'FeatureCollection',
                    features
                  }
              })
    
              map.addLayer({
        
                id: "iconImage",
                type: "symbol",
                source: 'iconImage', // 对应addSource第一个参数名字
                layout: {
        
                  "icon-image": "iconImage", // 对应addImage()第一个参数名字
                  "icon-size": 0.1,//图标的大小
                },
              })
            }) 
          })

![在这里插入图片描述][c684dc3b9b634822aa0aece64c10e032.png]

##### 3.2、添加带有标记的自定义图标 #####

首先定义个FeatureCollection类型的对象，里面包括features的数组，里面包括三个点的feature；其次dom中创建一个div元素，通过遍历geojson中features数组给div元素赋值，也可以给div元素添加click事件；最后添加marker；

//geojson数据
          const geojson = {
        
            type: "FeatureCollection",
            features: [
              {
        
                type: "Feature",
                properties: {
        
                  message: "Foo",
                  iconSize: [60, 60],
                },
                geometry: {
        
                  type: "Point",
                  coordinates: [91.324462, 32.024695],
                },
              },
              {
        
                type: "Feature",
                properties: {
        
                  message: "Bar",
                  iconSize: [50, 50],
                },
                geometry: {
        
                  type: "Point",
                  coordinates: [106.21582, 29.971891],
                },
              },
              {
        
                type: "Feature",
                properties: {
        
                  message: "Baz",
                  iconSize: [40, 40],
                },
                geometry: {
        
                  type: "Point",
                  coordinates: [106.292236, 37.281518],
                },
              },
            ],
          };
    
          // Add markers to the map.
          for (const marker of geojson.features) {
        
            // Create a DOM element for each marker.
            const el = document.createElement("div");
            const width = marker.properties.iconSize[0];
            const height = marker.properties.iconSize[1];
            el.className = "marker";
            el.style.backgroundImage = `url(https://placekitten.com/g/${
          width}/${
          height}/)`;
            el.style.width = `${
          width}px`;
            el.style.height = `${
          height}px`;
            el.style.backgroundSize = "100%";
    
            el.addEventListener("click", () => {
        
              window.alert(marker.properties.message);
            });
    
            // Add markers to the map.
            new this.$mapboxgl.Marker(el)
              .setLngLat(marker.geometry.coordinates)
              .addTo(map);
          }

![在这里插入图片描述][9d325d9c417c449180c5bde0481b4ac2.png]

##### 3.3、悬停时显示弹出窗口 #####

将鼠标悬停在自定义标记上时，显示包含信息的弹窗。  
修改3.1中的图层数据，添加properties信息：

let features = [
 {
 
 type: "Feature",
 geometry: {
 
 type: "Point",
 coordinates: [116.469, 40.251706],
 },
 properties: {
 
 description:
 "A Little Night MusicThe Arlington Players' production of Stephen Sondheim's A Little Night Music comes to the Kogod Cradle at The Mead Center for American Theater (1101 6th Street SW) this weekend and next. 8:00 p.m."
 },
 },
 {
 
 type: "Feature",
 geometry: {
 
 type: "Point",
 coordinates: [113.469, 32.351706],
 },
 properties: {
 
 description:
 "A Little Night MusicThe Arlington Players' production of Stephen Sondheim's A Little Night Music comes to the Kogod Cradle at The Mead Center for American Theater (1101 6th Street SW) this weekend and next. 8:00 p.m."
 },
 },
 ];

添加弹窗核心代码：

// Create a popup, but don't add it to the map yet.
          const popup = new this.$mapboxgl.Popup({
        
            closeButton: false,
            closeOnClick: false
          });
          
          map.on('mouseenter', 'iconImage', (e) => {
        
          // Change the cursor style as a UI indicator.
          map.getCanvas().style.cursor = 'pointer';
          
          // Copy coordinates array.
          const coordinates = e.features[0].geometry.coordinates.slice();
          const description = e.features[0].properties.description;
          
          // Ensure that if the map is zoomed out such that multiple
          // copies of the feature are visible, the popup appears
          // over the copy being pointed to.
          while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
        
            coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
          }
          
          // Populate the popup and set its coordinates
          // based on the feature found.
          popup.setLngLat(coordinates).setHTML(description).addTo(map);
          });
          
          map.on('mouseleave', 'iconImage', () => {
        
            map.getCanvas().style.cursor = '';
            popup.remove();
          });

效果展示：  
![在这里插入图片描述][1a024ba1667d42609fa25c3f716d16ba.gif]

> 其他鼠标以及地图飞行平移事件方法：

1.  鼠标经过事件

map.on('mouseenter', 'addLayer的id值', (e) => {
        
        console.log('e', e);
    });

打印输出结果：  
![在这里插入图片描述][6d454d36334f4a65892f64c93a972aba.png]

1.  鼠标点击事件

map.on('click', 'addLayer的id值', (e) => {
        
        console.log('e', e);
    });

打印输出结果：  
![在这里插入图片描述][2bcb2b725fdb439399da5ed3a3f44433.png]

1.  地图平移

// center为要平移的坐标，zoom为平移的缩放级别
    map.flyTo({
         center:[116.00, 39.48], zoom: 9 });

[2f08bed21c2543769aae59e60ca05c6e.gif]: https://img-blog.csdnimg.cn/2f08bed21c2543769aae59e60ca05c6e.gif
[c684dc3b9b634822aa0aece64c10e032.png]: https://img-blog.csdnimg.cn/c684dc3b9b634822aa0aece64c10e032.png
[9d325d9c417c449180c5bde0481b4ac2.png]: https://img-blog.csdnimg.cn/9d325d9c417c449180c5bde0481b4ac2.png
[1a024ba1667d42609fa25c3f716d16ba.gif]: https://img-blog.csdnimg.cn/1a024ba1667d42609fa25c3f716d16ba.gif
[6d454d36334f4a65892f64c93a972aba.png]: https://img-blog.csdnimg.cn/6d454d36334f4a65892f64c93a972aba.png
[2bcb2b725fdb439399da5ed3a3f44433.png]: https://img-blog.csdnimg.cn/2bcb2b725fdb439399da5ed3a3f44433.png