mapbox-gl更新多条线的绘制和标记存取地址

最新推荐文章于 2024-09-23 11:15:39 发布

丸子君君

最新推荐文章于 2024-09-23 11:15:39 发布

阅读量692

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/chubu3218/article/details/123988164

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

该博客主要介绍了如何使用地图API在地图上绘制点和线，包括点迹和航迹的绘制。根据不同的drawType参数，函数drawPointOnMap()和drawLineOnMap()会动态更新地图上的标记和线条，显示目标的经纬度、方位、距离、幅度和速度等信息。此外，还涉及到数据的转换和清理，以及图层的增删操作，以提高效率。

摘要由CSDN通过智能技术生成

drawPointOnMap(){
        var source = map.getSource('point');
        let geojsonPoints = {
            "type":"FeatureCollection",
            "features":[]
        }
        
        if(this.drawType == 1 && this.pointTgts.length > 0){//点迹
            for (let target of this.pointTgts){ 
                let origin = convertToLngLat(this.config.longitude, this.config.latitude, target.azimuth, target.distance)  
                geojsonPoints.features.push({
                    "type":"Feature",
                    "geometry":{
                        "type" : "Point", 
                        "coordinates" :[origin.x,origin.y]
                    },
                    "properties" : {
                        'description':'经度：' + origin.x.toFixed(2) + '°' + '<br />' + 
                                      '纬度：' + origin.y.toFixed(2) + '°' + '<br />' + 
                                      '方位：' + target.azimuth.toFixed(2) + '°' + '<br />' + 
                                      '距离：' + target.distance.toFixed(2) + 'm' + '<br />' +
                                      '幅度：' + target.amplitude.toFixed(2) + 'db' + '<br />' + 
                                      '速度：' + target.speed.toFixed(2) + 'm/s'
                    }
                })
            }
        }else if(this.drawType == 2 && this.targets.length > 0){//航迹的点
            for (let target of this.targets){  
                let origin = convertToLngLat(this.config.longitude, this.config.latitude, target.azimuth, target.distance)  
                geojsonPoints.features.push({
                    "type":"Feature",
                    "geometry":{
                        "type" : "Point", 
                        "coordinates" :[origin.x,origin.y]
                    },
                    "properties" : {
                        'description':'经度：' + origin.x.toFixed(2) + '°' + '<br />' + 
                                      '纬度：' + origin.y.toFixed(2) + '°' + '<br />' + 
                                      '方位：' + target.azimuth.toFixed(2) + '°' + '<br />' + 
                                      '距离：' + target.distance.toFixed(2) + 'm' + '<br />' +
                                      '幅度：' + target.amplitude.toFixed(2) + 'db' + '<br />' + 
                                      '速度：' + target.speed.toFixed(2) + 'm/s'
                    }
                })
            }
        }else if(this.drawType == 3){//航迹和点迹都需要绘制
            for (let target of this.pointTgts){ 
                let origin = convertToLngLat(this.config.longitude, this.config.latitude, target.azimuth, target.distance)  
                geojsonPoints.features.push({
                    "type":"Feature",
                    "geometry":{
                        "type" : "Point", 
                        "coordinates" :[origin.x,origin.y]
                    },
                    "properties" : {
                        'description':'经度：' + origin.x.toFixed(2) + '°' + '<br />' + 
                                      '纬度：' + origin.y.toFixed(2) + '°' + '<br />' + 
                                      '方位：' + target.azimuth.toFixed(2) + '°' + '<br />' + 
                                      '距离：' + target.distance.toFixed(2) + 'm' + '<br />' +
                                      '幅度：' + target.amplitude.toFixed(2) + 'db' + '<br />' + 
                                      '速度：' + target.speed.toFixed(2) + 'm/s'
                    }
                })
            }
            for (let target of this.targets){  
                let origin = convertToLngLat(this.config.longitude, this.config.latitude, target.azimuth, target.distance)  
                geojsonPoints.features.push({
                    "type":"Feature",
                    "geometry":{
                        "type" : "Point", 
                        "coordinates" :[origin.x,origin.y]
                    },
                    "properties" : {
                        'description':'经度：' + origin.x.toFixed(2) + '°' + '<br />' + 
                                      '纬度：' + origin.y.toFixed(2) + '°' + '<br />' + 
                                      '方位：' + target.azimuth.toFixed(2) + '°' + '<br />' + 
                                      '距离：' + target.distance.toFixed(2) + 'm' + '<br />' +
                                      '幅度：' + target.amplitude.toFixed(2) + 'db' + '<br />' + 
                                      '速度：' + target.speed.toFixed(2) + 'm/s'
                    }
                })
            }
        }
        // add markers to map
        geojsonPoints.features.forEach(function(featuer) {
            var el = document.createElement('div');
            el.className = 'marker';
            new mapboxgl.Marker(el)
                        .setLngLat(featuer.geometry.coordinates)
                        .setPopup(new mapboxgl.Popup({ offset: 0 }) // add popups
                                              .setHTML(featuer.properties.description))
                        .addTo(map);
        });
        if(source){
            map.getSource('point').setData(geojsonPoints);
        }else{
            map.addSource('point', {
                'type': 'geojson',
                'data': geojsonPoints
            });
            map.addLayer({
                'id': 'point',
                'source': 'point',
                'type': 'circle',
                'paint': {
                    'circle-radius': 3,
                    'circle-color': 'rgba(255,0,0,1)'
                }
            });
        }
    }

 drawLineOnMap(){
        if(this.drawType == 3 || this.drawType == 2){//航迹的线
            let lineArr = []
            let sorcedata = {
                "type": "Feature",
                "geometry":{
                    "type":"MultiLineString",
                    "coordinates":[]
                }
            }
            for (let key of this.tgtIdLineData.keys()) {//查当前目标的ID--source
                let lineArrTem = []
                let keyTgtVec = this.tgtIdLineData.get(key)//当前key对应的dataVec

                for (let target of keyTgtVec){  
                    let origin = convertDistanceToLngLat(this.config.longitude, this.config.latitude, target.azimuth, target.distance)
                    lineArrTem.push(origin)
                }
                lineArr.push(lineArrTem)
            }
            sorcedata.geometry.coordinates = lineArr
            if(map.getSource("multLine")){
                map.getSource("multLine").setData(sorcedata);
            }else{
                map.addSource('multLine', {
                    'type': 'geojson',
                    'data': {
                        'type':'FeatureCollection',
                        'features':[
                            {      
                                "type": "Feature",
                                "geometry":{
                                    "type":"MultiLineString",
                                    "coordinates":lineArr
                                }
                            }
                        ]
                    }
                });
                map.addLayer({
                    "id": "multLine",
                    "type": "line",
                    "source": "multLine",
                    "layout": {
                        "line-join": "round",
                        "line-cap": "round"
                    },
                    "paint": {
                        "line-color": "rgba(255,0,0,1)",
                        "line-width": 1
                    }
                });
            }
        }else{//不画航迹时，删除对应图层有问题，改为数据为空       
            if(map.getLayer("multLine")){
                map.removeLayer("multLine")//删除对应的图层
            }
            if(map.getSource("multLine")){
                map.removeSource("multLine")//删除对应的资源
            }
        }
    }

效果图同前--图层更少，效率或许快些