WebGIS_Javascript_在mapbox展示客流OD線狀圖

mapbox展示客流OD線狀圖的步驟如下：
1、首先引入mapbox
2、獲取數據
3、將數據轉爲mapbox能識別的geojson格式
4、調用mapbox的addSource和addLayer方法將線狀圖層添加上mapbox
注意：線條數據分段請參考本條sql語句：
分爲6段的話就截取六個分段的節點值，那樣效果比較好看！

select distinct(od) from od_street_line_201911 order by od 

效果圖：

數據來源請參考我這篇文章：
python_pandas_將街道行政區級別的數據進行分組求和

        let addFlowOdLayer = function () {
            /*距離篩選*/
            $('#od_length_slider').attr("disabled", false);
            $("#od_length_slider").val(0);
            $("#od_length_label").text("大於0千米")

            $('#od_count_slider').attr("disabled", false);
            $("#od_count_slider").val(0);
            $("#od_count_label").text("大於0");

            const odShowWay = $('input:radio[name="displayways_od"]:checked').val();
            const basicUrl_inner = `${SEARCH_CONFIG.OD}?year=2018&scale=street`;
            // addBasicLayer('街道');
            addBasicLayer('區');

            let addTaxiodByhour = function () {
                $.ajax({
                    url: basicUrl_inner,
                    dataType: "text",
                    success: function (data) {
                        data = JSON.parse(data);
                        const dataArray = data.data;
                        if (dataArray.length === 0) {
                        }
                        let arcsDataCreator_line = function () {
                            const allParsedFeatures = {
                                "type": "FeatureCollection",
                                "features": []
                            };
                            for (let i = 0; i < dataArray.length; i++) {
                                const {center_lon,center_lat, center_l_1, center_l_2, od} = dataArray[i];
                                const start = [parseFloat(center_lon), parseFloat(center_lat)];
                                const end = [parseFloat(center_l_1), parseFloat(center_l_2)];
                                let oneFeatureParsed = {
                                    type: "Feature",
                                    properties: {od_count: parseInt(od)},
                                    geometry: {type: "LineString", coordinates: [start, end]}
                                };
                                allParsedFeatures.features.push(oneFeatureParsed)
                            }
                            return allParsedFeatures;
                        }

                        let addOdLayersHere = function (data) {
                            if (mapOutParam.map.getLayer("taxi_street_od_layer_level1")) {
                                mapOutParam.map.removeLayer("taxi_street_od_layer_level1")
                            }
                            if (mapOutParam.map.getLayer("taxi_street_od_layer_level2")) {
                                mapOutParam.map.removeLayer("taxi_street_od_layer_level2")
                            }
                            if (mapOutParam.map.getLayer("taxi_street_od_layer_level3")) {
                                mapOutParam.map.removeLayer("taxi_street_od_layer_level3")
                            }
                            if (mapOutParam.map.getLayer("taxi_street_od_layer_level4")) {
                                mapOutParam.map.removeLayer("taxi_street_od_layer_level4")
                            }
                            if (mapOutParam.map.getLayer("taxi_street_od_layer_level5")) {
                                mapOutParam.map.removeLayer("taxi_street_od_layer_level5")
                            }
                            if (mapOutParam.map.getLayer("taxi_street_od_layer_level6")) {
                                mapOutParam.map.removeLayer("taxi_street_od_layer_level6")
                            }
                            if (mapOutParam.map.getLayer("od_layer")) {
                                mapOutParam.map.removeLayer("od_layer")
                            }
                            if (mapOutParam.map.getSource("od_layer")) {
                                mapOutParam.map.removeSource("od_layer")
                            }
                            mapOutParam.map.addSource('od_layer', {
                                "type": "geojson",
                                "data": data,
                                'lineMetrics': true
                            });

                            mapOutParam.map.addLayer({
                                "id": "taxi_street_od_layer_level1",
                                "source": "od_layer",
                                "type": "line",
                                "filter": ["<=", "od_count", 837],
                                "paint": {
                                    "line-color": "#0000ff",  //4f55ff
                                    "line-width": 0.4,
                                    "line-opacity":1
                                }
                            })

                            mapOutParam.map.addLayer({
                                "id": "taxi_street_od_layer_level2",
                                "source": "od_layer",
                                "type": "line",
                                "filter": ["all", [">", "od_count", 837], ["<=", "od_count", 1833]],
                                "paint": {
                                    "line-color": "#3333ff",  //76b4d5
                                    "line-width": 0.6,
                                    "line-opacity": 1
                                }
                            })

                            mapOutParam.map.addLayer({
                                "id": "taxi_street_od_layer_level3",
                                "source": "od_layer",
                                "type": "line",
                                "filter": ["all", [">", "od_count", 1833], ["<=", "od_count", 3302]],
                                "paint": {
                                    "line-color": "#6666ff",  //cfe3ed
                                    "line-width": 0.9,
                                    "line-opacity": 1
                                }
                            })

                            mapOutParam.map.addLayer({
                                "id": "taxi_street_od_layer_level4",
                                "source": "od_layer",
                                "type": "line",
                                "filter": ["all", [">", "od_count", 3302], ["<=", "od_count", 6171]],
                                "paint": {
                                    "line-color": "#9999ff",  //f6d7c8
                                    "line-width": 1,
                                    "line-opacity": 1
                                }
                            })
                            mapOutParam.map.addLayer({
                                "id": "taxi_street_od_layer_level5",
                                "source": "od_layer",
                                "type": "line",
                                "filter": ["all", [">", "od_count", 6171], ["<=", "od_count", 13861]],
                                "paint": {
                                    "line-color": "#ccccff", //ec846e
                                    "line-width": 1,
                                    "line-opacity": 1
                                }
                            })
                            mapOutParam.map.addLayer({
                                "id": "taxi_street_od_layer_level6",
                                "source": "od_layer",
                                "type": "line",
                                "filter": ["all", [">", "od_count", 13861], ["<=", "od_count", 1077616]],
                                "paint": {
                                    "line-color": "#ffffff",  //ca0020
                                    "line-width": 1.2,
                                    "line-opacity": 1
                                }
                            })

                        }

                        let renderLayers_arc = function (arcs) {
                            let WIDTH_SCALE = d3.scaleLinear().domain([0, 100]).range([1, 4]);

                            if (mapOutParam.map.getLayer("all_od_arcs")) {
                                mapOutParam.map.removeLayer("all_od_arcs")
                            }
                            var arcsLayer_arc = new MapboxLayer({
                                type: ArcLayer,
                                id: "all_od_arcs",
                                data: arcs,
                                pickable: true,
                                autoHighlight: true,
                                fp64: true,
                                getStrokeWidth: d => WIDTH_SCALE(d.value), 
                                opacity: 1,
                                renderingMode: "3d",
                                getSourcePosition: d => d.source,
                                getTargetPosition: d => d.target,
                                getSourceColor: [35, 181, 184],
                                getTargetColor: [166, 3, 3],
                                onClick: function () {
                                    alert("aaaaaa")
                                },
                            });
                            mapOutParam.map.addLayer(arcsLayer_arc);
                        }
                        if (odShowWay !== "show_all") {
                            const length_filter = document.getElementById('od_length_slider').value;
                            const count_filter = document.getElementById('od_count_slider').value;
                      
                        }
                        else if (odShowWay === "show_all") {
                            const length_filter = document.getElementById('od_length_slider').value;
                            const count_filter = document.getElementById('od_count_slider').value;
                            const arcs_new = arcsDataCreator_line();
                            // chartFunction.sortedTraffic_OD(arcs_new)
                            console.log(arcs_new);
                            addOdLayersHere(arcs_new);
                        }
                    },
                    error: function (data, textStatus, errorThrown) {

                    }
                });
            }
            addTaxiodByhour()
        }

如需完整代碼和數據示例請私聊我。。。
如果比較急的話請打開我其他文章獲得我的聯繫方式：
我的文章