MapBox-gl绘制点及点线

1.数据来源

 setTargets(targets) {
        this.targets = []//所有目标对象数组
        this.tgtID = new Map()//不同ID对应颜色不同
        for (let key of this.tgtIdLineData.keys()) {
            let newArr = []
            this.tgtIdLineData.set(key,newArr)
        }
        if(targets === undefined || targets.length == 0){
            return
        }
        
        for (let target of targets) {
            if (target.distance <= this.range) {
                this.targets.push(target)//存储数据

                //将数据的ID存储，绘图时按照ID绘制
                if (!this.tgtID.has(target.targetId)) {
                    this.tgtID.set(target.targetId, 'rgba(255,0,0,0.5)')//默认都是红色
                } 

                if(this.tgtIdLineData.has(target.targetId)){
                    this.tgtIdLineData.get(target.targetId).push(target)
                }else{
                    var tgtVec = new Array()
                    tgtVec.push(target)
                    this.tgtIdLineData.set(target.targetId, tgtVec)
                }
            }
        }

        this.isUpdate = true
    }

 2.更新

 this.updateTimer = setInterval(() => {
                if (this.isUpdate) {
                    drawScanRange(this.deviceLayer.canvasId, this.angle, this.scanUpAng, this.scanDownAng, this.range,this.isForward);   
                    this.drawPointOnMap()
                    this.drawLineOnMap()
                    this.isUpdate = false
                }
            }, 25)

3.绘制点线

 drawPointOnMap(){
        var source = map.getSource('point');
        let geojsonPoints = {
            "type":"FeatureCollection",
            "features":[]
        }
        if(this.drawType == 1){//点迹
            if(this.pointTgts === undefined || this.pointTgts.length === 0){
                return
            }
            for (let target of this.pointTgts){ 
                let origin = convertDistanceToLngLat(this.config.longitude, this.config.latitude, target.azimuth, target.distance) 
                geojsonPoints.features.push({
                    "type":"Feature",
                    "geometry":{
                        "type" : "Point", 
                        "coordinates" :origin
                    },
                    "properties" : null
                })
            }
        }else if(this.drawType == 2){//航迹的点
            if(this.targets === undefined || this.targets.length === 0){
                return
            }
            for (let target of this.targets){  
                let origin = convertDistanceToLngLat(this.config.longitude, this.config.latitude, target.azimuth, target.distance) 
                geojsonPoints.features.push({
                    "type":"Feature",
                    "geometry":{
                        "type" : "Point", 
                        "coordinates" :origin
                    },
                    "properties" : null
                })
            }
        }else if(this.drawType == 3){//航迹和点迹都需要绘制
            if(this.pointTgts === undefined || this.pointTgts.length === 0 || this.targets === undefined || this.targets.length === 0){
                return
            }
            for (let target of this.pointTgts){ 
                let origin = convertDistanceToLngLat(this.config.longitude, this.config.latitude, target.azimuth, target.distance) 
                geojsonPoints.features.push({
                    "type":"Feature",
                    "geometry":{
                        "type" : "Point", 
                        "coordinates" :origin
                    },
                    "properties" : null
                })
            }
            for (let target of this.targets){  
                let origin = convertDistanceToLngLat(this.config.longitude, this.config.latitude, target.azimuth, target.distance) 
                geojsonPoints.features.push({
                    "type":"Feature",
                    "geometry":{
                        "type" : "Point", 
                        "coordinates" :origin
                    },
                    "properties" : null
                })
            }
        }
        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){//航迹的线
            for (let key of this.tgtIdLineData.keys()) {//查当前目标的ID--source
                let keyStr = JSON.stringify(key)
                let keyTgtVec = this.tgtIdLineData.get(key)//当前key对应的dataVec

                if(keyTgtVec === undefined || keyTgtVec.length < 2 ){//航迹数据小于2个则不绘制
                    if(map.getLayer(keyStr)){
                        map.removeLayer(keyStr)//删除对应的图层
                    }
                    if(map.getSource(keyStr)){
                        map.removeSource(keyStr)//删除对应的资源
                    }
                    continue
                }
                let sorcedata = {
                    "type": "Feature",
                    "properties": {},
                    "geometry":{
                        "type":"LineString",
                        "coordinates":[]
                    }
                }
                for (let target of keyTgtVec){  
                    let origin = convertDistanceToLngLat(this.config.longitude, this.config.latitude, target.azimuth, target.distance)
                    sorcedata.geometry.coordinates.push(origin)
                }

                if(map.getSource(keyStr)){
                    map.getSource(keyStr).setData(sorcedata);
                }else{
                    map.addLayer({
                        "id": keyStr,
                        "type": "line",
                        "source": {
                            "type": "geojson",
                            "data": sorcedata
                        },
                        "layout": {
                            "line-join": "round",
                            "line-cap": "round"
                        },
                        "paint": {
                            "line-color": "rgba(255,0,0,1)",
                            "line-width": 1
                        }
                    });
                }
            }
        }else{//仅画点迹或都不画时，删除对应图层有问题，改为数据为空
            for (let key of this.tgtIdLineData.keys()) {//查当前目标的ID--source   
                let keyStr = JSON.stringify(key)           
                if(map.getLayer(keyStr)){
                    map.removeLayer(keyStr)//删除对应的图层
                }
                if(map.getSource(keyStr)){
                    map.removeSource(keyStr)//删除对应的资源
                }
            }
        }
    }