首页 前端知识 vue中引入百度地图,并添加点线面,标注信息

vue中引入百度地图,并添加点线面,标注信息

2024-05-31 19:05:40 前端知识 前端哥 12 269 我要收藏

vue引入百度地图,并绘制点线面

    • vue引入百度地图
    • vue在百度地图中渲染点,线,面
    • vue在百度地图中手动绘制点,线,面

vue引入百度地图

1.首先在public文件夹下得index.html文件中的head里面通过src引入百度api文件

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script>
<link href="https://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css" rel="stylesheet">
  <script type="text/javascript" src="https://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js"></script>
  <script type="text/javascript" src="https://mapopen.cdn.bcebos.com/github/BMapGLLib/DistanceTool/src/DistanceTool.min.js"></script>

2.在需要用到百度地图的页面准备一个container容器,用来初始化地图

<div class="container" id="container" ref="containers">

3.在js里面写入初始化代码函数,并在mounted函数中进行回调

methods:{
    //初始化地图方法
	createBDmap() {
            var map = new BMapGL.Map("container", { enableMapClick: false }); // 创建Map实例,GL版命名空间为BMapGL(鼠标右键控制倾斜角度)
            map.centerAndZoom(new BMapGL.Point(114.xxx, 34.xxx), 15); // 初始化地图,设置中心点坐标和地图级别
            map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
            var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
            map.addControl(zoomCtrl);
            this.map = map
        },
}
mounted(){
	//页面渲染时回调执行
	this.createBDmap()
}

vue在百度地图中渲染点,线,面

1.添加一个点
	addMarker(data) { //date表示传进来的数据,包括坐标、图标、文字等信息
            let _this = this
            // this.addLabel(data)
            data.markBaiduLocation = _this.filterPoint(data.markBaiduLocation) //自定义方法,对坐标进行过滤,弄成百度需要的格式。
            var myIcon = new BMapGL.Icon(data.iconUrl, new BMapGL.Size(25, 25)); //定义点位图标的样式大小,url地址,如不设置自动使用默认百度点样式
            var point = new BMapGL.Point(data.markBaiduLocation[0].markLongitude, data.markBaiduLocation[0].markLatitude);
            var marker = new BMapGL.Marker(point, {
                icon: myIcon
            });
            _this.map.addOverlay(marker); //添加点到地图上
            _this.addLabel(data.markBaiduLocation[0], data.title) //添加点的文字标注
            marker.addEventListener("click", function () { //为点添加点击事件的监听
                //在这里写入点击后进行的操作
            })
        },
2.添加一条线
	addLine(data) { //date表示传进来的数据,包括坐标、图标、文字等信息
            let _this = this
            data.markBaiduLocation = _this.filterPoint(data.markBaiduLocation) //与上述一样,对其坐标点进行过滤操作。(原数据字符格式,转化后为数组格式)
            var lineArray = [] // 线的点的集合
            data.markBaiduLocation.forEach(item => {
                lineArray.push(new BMapGL.Point(item.markLongitude, item.markLatitude))
            })
            var polyline = new BMapGL.Polyline(lineArray, {
                strokeColor: "blue", //线条颜色
                strokeWeight: 6, //线条宽度
                strokeOpacity: 0.5, //边框透明度
                // strokeTexture: { // width/height 需要是2的n次方
                //     url: data.iconUrl,
                //     width: 16,
                //     height: 64
                // }, 
            });
            _this.map.addOverlay(polyline) //将绘制好的折线添加到地图上
            _this.addLabel(data.markBaiduLocation[1], data.title) //添加文字标注
            polyline.addEventListener("click", function () {//为线添加点击事件的监听
                //在这里写入点击后进行的操作
            })
        }
3.添加一个多边形
	addGon(data) {
            let _this = this
            let array = [] //计算中心点方法需要的数组
            data.markBaiduLocation = _this.filterPoint(data.markBaiduLocation)
            var lineArray = [] // 面的点的集合
            data.markBaiduLocation.forEach(item => {
                lineArray.push(new BMapGL.Point(item.markLongitude, item.markLatitude))
            })
            data.markBaiduLocation.forEach((item) => {
                array.push([item.markLatitude, item.markLongitude])
            })
            let latArray = _this.mapGetCenter(array) //计算出中心点,用来将文字标注放置中心
            var polygon = new BMapGL.Polygon(lineArray, {
                strokeColor: "blue",
                strokeWeight: 2,
                strokeOpacity: 0.3,
                // strokeTexture: { // width/height 需要是2的n次方
                //     url: data.iconUrl,
                //     width: 16,
                //     height: 64
                // },
            });
            _this.map.addOverlay(polygon) //将绘制好的添加到地图上
            _this.addLabel01(latArray, data.title) //添加文字标注
            polygon.addEventListener("click", function () {//为线添加点击事件的监听
                //在这里写入点击后进行的操作
            })
        },
4.添加文字标注
	addLabel(data, title) {
            var _this = this
            let x = title.length * 10 / 2 + 5 //计算文字偏移量(这个可有可无,看具体情况,小小的美化罢了)
            var point = new BMapGL.Point(data.markLongitude, data.markLatitude);
            var content = title
            var label = new BMapGL.Label(content, {       // 创建文本标注
                position: point,                          // 设置标注的地理位置
                offset: new BMapGL.Size(-x, 15)           // 设置标注的偏移量
            })
            _this.map.addOverlay(label) //添加到地图上
            label.setStyle({                              // 设置label的样式
                color: '#000',
                fontSize: '14px',
                fontWeight: '600',
                border: '0'
            })
        },

vue在百度地图中手动绘制点,线,面

1.创建绘制工具
draw(e) { //传入绘制类型,eg:marker,polyline,polygon
            var _this = this
            //设置绘制工具样式
            var styleOptions = {
                strokeColor: '#5E87DB',   // 边线颜色
                fillColor: '#5E87DB',     // 填充颜色。当参数为空时,圆形没有填充颜色
                strokeWeight: 2,          // 边线宽度,以像素为单位
                strokeOpacity: 1,         // 边线透明度,取值范围0-1
                fillOpacity: 0.2          // 填充透明度,取值范围0-1
            };
            var labelOptions = {
                borderRadius: '2px',
                background: '#FFFBCC',
                border: '1px solid #E1E1E1',
                color: '#703A04',
                fontSize: '12px',
                letterSpacing: '0',
                padding: '5px'
            };

            // 实例化鼠标绘制工具
            _this.drawingManager = new BMapGLLib.DrawingManager(_this.map, {
                // isOpen: true,        // 是否开启绘制模式
                enableCalculate: false, // 绘制是否进行测距测面
                enableSorption: true,   // 是否开启边界吸附功能
                sorptiondistance: 20,   // 边界吸附距离
                circleOptions: styleOptions,     // 圆的样式
                polylineOptions: styleOptions,   // 线的样式
                polygonOptions: styleOptions,    // 多边形的样式
                rectangleOptions: styleOptions,  // 矩形的样式
                labelOptions: labelOptions,      // label样式
            });
            switch (e) {
                case 'marker': {
                    _this.drawingType = BMAP_DRAWING_MARKER;
                    break;
                }
                case 'polyline': {
                    _this.drawingType = BMAP_DRAWING_POLYLINE;
                    break;
                }
                case 'polygon': {
                    _this.drawingType = BMAP_DRAWING_POLYGON;
                    break;
                }
            }
            // 进行绘制
            if (_this.drawingManager._isOpen && _this.drawingManager.getDrawingMode() === drawingType) {
                _this.drawingManager.close();
            } else {
                _this.drawingManager.setDrawingMode(_this.drawingType);
                _this.drawingManager.open();
            }
        },
2.监听绘制事件
	 // 监听绘制完成事件
            _this.drawingManager.addEventListener('overlaycomplete', function (e) {
                _this.drawingManager.close() // 成功后关闭绘制工具
                let type = e.drawingMode
                if (e.drawingMode === 'marker') {
                   //写入操作
                } else if (e.drawingMode === 'polyline') {
                    //写入操作
                } else if (e.drawingMode === 'polygon') {
                   //写入操作
                }
         }

以上内容就是在vue中添加点线面的所有方法,以及手动绘制的一些操作,如果还有疑惑的小伙伴,请移步至百度地图api中进行查看

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10188.html
标签
评论
发布的文章

JSON&yaml和Properties

2024-06-06 10:06:54

JavaScript中的JSON.stringify()

2024-06-06 10:06:52

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!