乐趣区

关于前端:百度地图绘制地区的棱柱效果定位自定义点文本标记信息弹窗

jiezi

百度地图 webgl 应用

在我的项目的 index.html 中引入

 <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak= 你的 AK 秘钥"></script>

留神，百度 webgl 的引入和百度地图的引入的链接是不一样的，这里的type=webgl，对于百度地图的引入请看另一篇文章：https://blog.csdn.net/qq_44793507/article/details/130554864

引入实现后能够全局应用百度地图的webglAPI

百度地图的 webgl 绘制和 echarts 相似，须要先初始化 dom，初始化须要在onMounted 中进行

<template>
    <div>
         <div class="map-info" ref="chartDom"></div>
    </div>
</template>

<script setup>
import {ref,onMounted} from "vue" 

const chartDom = ref(); // dom

/** 获取地图信息 */
const getMap = async () => {
    //GPS 坐标
    var x = 114.326488;
    var y = 30.460413;
    // 创立地图实例
    var map = new BMapGL.Map(chartDom.value);
    // 地图定位点 - 通过坐标定位
    var point = new BMapGL.Point(x,y);
    map.centerAndZoom(point, 10); // 摄像机地位，数值越小，间隔越远
    map.setTilt(50);
    map.enableScrollWheelZoom(true);  // 容许鼠标拖动
}

onMounted(()=>{
    // 初始化 webgl
    getMap();})
</script>

到这里咱们的根底地图就创立实现了。

自定义地图款式

咱们能够批改地图的款式，让地图更加融入页面的整体成果，对于自定义地图款式，在百度地图的官网文档上有阐明，进入控制台，找到特色服务平台，点击个性化地图，点击新建

在地图款式中找到咱们想要的款式，点击公布款式，点击确认

公布后，返回个性化地图页面，复制方才公布的地图款式ID

将款式 ID 增加到咱们的地图上即可。

// 自定义地图款式
map.setMapStyleV2({styleId: 'd716ce6e048926a0befff2478e6d5e02'});

地区镂面棱柱成果

百度地图的 webgl 能够绘制镂面棱柱成果，也就是依据省市区来绘制棱柱形态，成果如下：

棱柱成果的绘制：

    /* 镂空面绘制 */
    var bd = new BMapGL.Boundary();
    // 通过省市区来获取 GPS 坐标
    bd.get('武汉市', function (rs) {
        /* rs 是一个数组，该数组为以后省市区的坐标信息，依据地区名获取 */
        var count = rs.boundaries.length; // 行政区域的点有多少个
        for (var i = 0; i < count; i++) {var path = [];
            var str = rs.boundaries[i].replace('','');
            var points = str.split(';');
            for (var j = 0; j < points.length; j++) {var lng = points[j].split(',')[0];
                var lat = points[j].split(',')[1];
                path.push(new BMapGL.Point(lng, lat));
            }
            // 镂面图的款式
            var prism = new BMapGL.Prism(path, 2000, {
                topFillColor: '#5679ea',
                topFillOpacity: 0.5,
                sideFillColor: '#5679ea',
                sideFillOpacity: 0.9
            });
            map.addOverlay(prism);
        }
    });

镂面绘制的官网文档：https://lbs.baidu.com/index.php?title=loukongPolygon

绘制点信息以及信息弹窗

绘制点的官网文档：https://lbs.baidu.com/index.php?title=jspopularGL/guide/addOverlay

图标的信息框以及点击弹框

/* 增加标记点 */
// 创立点标记
let marker = [{x :114.311828, y:30.598592,sign : '武汉市市政府',type : 2},
    {x :114.347939, y:30.552295,sign : '湖北省省政府',type : 1}
];
// 通过遍历循环创立点标记
marker.forEach(el=>{let index = new BMapGL.Marker(new BMapGL.Point(el.x, el.y));  // 创立标记
    map.addOverlay(index)

     /* 悬浮文本 */
     var opts = {position: new BMapGL.Point(el.x, el.y), // 指定文本标注所在的地理位置
          offset: new BMapGL.Size(30, -30) // 设置文本偏移量
      };
      // 创立文本标注对象
      var label = new BMapGL.Label(el.sign, opts);
      // 自定义文本标注款式
      label.setStyle({
            color: '#00f2f1',
            borderRadius: '5px',
            borderColor: 'transparent',
            backgroundColor:'rgba(16, 17, 41,0.5)',
            padding: '10px',
            fontSize: '12px',
            fontFamily: '微软雅黑'
        });
        map.addOverlay(label);


        /* 点击后的信息窗口 */
        // 创立点击事件
        var infoWindow = new BMapGL.InfoWindow(el.sign, {      // 创立信息窗口对象
            width : 20,     // 信息窗口宽度
            height: 10,     // 信息窗口高度
            title : el.sign , // 信息窗口题目
        },100)
        index.addEventListener("click", function(){                // 创立点击事件 
           map.openInfoWindow(infoWindow, opts.position); // 开启信息窗口
        }); 
    })

残缺代码
一些字段的阐明：
Point：指定的经度和纬度创立一个地图定位点
setTilt：地图歪斜角度，能够体现呈现 3d 成果
Prism：创立棱柱覆盖物

const chartDom = ref(); // dom
/** 获取地图信息 */
const getMap = async () => {
    //GPS 坐标
    var x = 114.326488;
    var y = 30.460413;
    // 创立地图实例
    var map = new BMapGL.Map(chartDom.value);
    // 地图定位点 -Point：指定的经度和纬度创立一个天文点坐标
    var point = new BMapGL.Point(x,y);
    map.centerAndZoom(point, 10); // 摄像机地位，数值越小，间隔越远
    map.setTilt(50);  // setTilt：地图歪斜角度(个别设置 40-70，这样能够看到棱柱的侧边，呈现 3d 成果)
    map.enableScrollWheelZoom(true);  // 容许鼠标拖动
    // 自定义地图款式
    map.setMapStyleV2({styleId: 'd716ce6e048926a0befff2478e6d5e02'});
    /* 增加标记点 */
    // 点标记数据
    let marker = [{x :114.311828, y:30.598592,sign : '武汉市市政府',type : 2},
        {x :114.347939, y:30.552295,sign : '湖北省省政府',type : 1}
    ]
    marker.forEach(el=>{
        /* 创立点标记 */
        let index = new BMapGL.Marker(new BMapGL.Point(el.x, el.y));  // 创立标记
        map.addOverlay(index)

        
        /* 悬浮文本 */
        var opts = {position: new BMapGL.Point(el.x, el.y), // 指定文本标注所在的地理位置
            offset: new BMapGL.Size(30, -30) // 设置文本偏移量
        };
        // 创立文本标注对象
        var label = new BMapGL.Label(el.sign, opts);
        // 自定义文本标注款式
        label.setStyle({
            color: '#00f2f1',
            borderRadius: '5px',
            borderColor: 'transparent',
            backgroundColor:'rgba(16, 17, 41,0.5)',
            padding: '10px',
            fontSize: '12px',
            fontFamily: '微软雅黑'
        });
        map.addOverlay(label);


        /* 点击后的信息窗口 */
        // 创立点击事件
        var infoWindow = new BMapGL.InfoWindow(el.sign, {      // 创立信息窗口对象
            width : 20,     // 信息窗口宽度
            height: 10,     // 信息窗口高度
            title : el.sign , // 信息窗口题目
        },100)
        index.addEventListener("click", function(){                // 创立点击事件    
           map.openInfoWindow(infoWindow, opts.position); // 开启信息窗口
        }); 
    })
    
    
    /* 3D 棱柱 - 镂空面绘制 */
    var bd = new BMapGL.Boundary();
    // 通过省市区来获取 GPS 坐标
    bd.get("武汉市", function (rs) {
        /* rs 是一个数组，该数组为以后省市区的坐标信息，依据 city.value 获取 */
        var count = rs.boundaries.length; // 行政区域的点有多少个
        for (var i = 0; i < count; i++) {var path = [];
            var str = rs.boundaries[i].replace('','');
            var points = str.split(';');
            for (var j = 0; j < points.length; j++) {var lng = points[j].split(',')[0];
                var lat = points[j].split(',')[1];
                path.push(new BMapGL.Point(lng, lat));
            }
            // 镂面图的款式 -Prism：创立棱柱覆盖物
            var prism = new BMapGL.Prism(path, 2000, {
                topFillColor: '#5679ea',
                topFillOpacity: 0.5,
                sideFillColor: '#5679ea',
                sideFillOpacity: 0.9
            });
            map.addOverlay(prism);
        }
    });
}

如果感觉这篇文章对你有帮忙，欢送点赞👍、珍藏💖、转发✨哦~

退出移动版