LeaFlet結合leaflet-dvf實現數據可視化

前言：提及來GIS我以爲側重於分析，渲染展現，作出來一些直觀的專題圖讓人一眼就能瞭解數據的含義，今天結合的leaflet的插件實現數據的可視化，該插件能夠作不少的功能，下面是一些地址：javascript

api插件地址：https://github.com/humangeo/leaflet-dvf/wiki/6.-Markers#lstarmarkercss

在線引用地址：https://cdnjs.com/libraries/leaflet-dvfhtml

關於一些餅狀圖、直方圖demo展現：http://humangeo.github.io/leaflet-dvf/examples/html/markers.htmljava

放張圖：git

1、關於js和css設置（我是在線引用的）github

<link href="../script/leaflet/leaflet.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-dvf/0.3.1/css/dvf.css" integrity="sha256-Nd2GYmWjQVljoYgRUP2AWWniAYagCg1k7QhXa9N1kLg=" crossorigin="anonymous" />
    <script src="../script/leaflet/leaflet.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-dvf/0.3.1/leaflet-dvf.js"></script>
  
    <style>
        #map {
            width: 100%;
            height: 1000px;
        }
    </style>

2、關於餅狀圖、直方圖使用（這裏只解釋直方圖，其餘相似）ajax

//直方圖
        var colorValue = Math.random() * 360;
        //設置直方圖的樣式
        var options = {
            color: '#000',
            weight: 1,
            fillColor: 'hsl(' + colorValue + ',100%,50%)',
            radius: 20,
            fillOpacity: 0.7,
            rotation: 0.0,
            position: {
                x: 0,
                y: 0
            },
            offset: 0,
            width: 8
          
        };
        //設置每一個直方的數據
        options.data = {
            'dataPoint1': Math.random() * 20,
            'dataPoint2': Math.random() * 20,
            'dataPoint3': Math.random() * 20,
            'dataPoint4': Math.random() * 20
        };
       //設置每一個直方的樣式等
        options.chartOptions = {
            'dataPoint1': {
                fillColor: '#F2F0F7',
                minValue: 0,
                maxValue: 20,
                maxHeight: 30,
                displayText: function (value) {
                    return value.toFixed(2);
                }
            },
            'dataPoint2': {
                fillColor: '#CBC9E2',
                minValue: 0,
                maxValue: 20,
                maxHeight: 30,
                displayText: function (value) {
                    return value.toFixed(2);
                }
            },
            'dataPoint3': {
                fillColor: '#9E9AC8',
                minValue: -40,
                maxValue: 20,
                maxHeight: 30,
                displayText: function (value) {
                    return value.toFixed(2);
                }
            },
            'dataPoint4': {
                fillColor: '#6A51A3',
                minValue: 0,
                maxValue: 20,
                maxHeight: 30,
                displayText: function (value) {
                    return value.toFixed(2);
                }
            }
        };
        //聲明一個直方圖類對象
        var barChart = new L.BarChartMarker(new L.LatLng(41.92, 116.46), options);
        map.addLayer(barChart);

3、完整的demoapi

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>leaflet數據顯示</title>
    <link href="../script/leaflet/leaflet.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-dvf/0.3.1/css/dvf.css" integrity="sha256-Nd2GYmWjQVljoYgRUP2AWWniAYagCg1k7QhXa9N1kLg=" crossorigin="anonymous" />
    <script src="../script/leaflet/leaflet.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-dvf/0.3.1/leaflet-dvf.js"></script>
  
    <style>
        #map {
            width: 100%;
            height: 1000px;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        var map = new L.Map('map', { center: [39.92, 116.46], zoom: 10, CRS: L.CRS.EPSG4326 });

        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: 'Map data &copy; <a href="http://www.osm.org">OpenStreetMap</a>'
        }).addTo(map);

        //餅狀圖顯示
        var colorValue = Math.random() * 360;
        var options = {
            color: '#000',
            weight: 1,
            fillColor: 'hsl(' + colorValue + ',100%,50%)',
            radius: 40,
            fillOpacity: 0.7,
            rotation: 0.0,
            position: {
                x: 0,
                y: 0
            },
            offset: 0,
            numberOfSides: 50,
            barThickness: 10
        };

        options.data = {
            '豬肉': Math.random() * 20,
            '羊肉': Math.random() * 20,
            '牛肉': Math.random() * 20,
            '雞肉': Math.random() * 20
        };

        options.chartOptions = {
            '豬肉': {
                fillColor: '#F1EEF6',
                minValue: 0,
                maxValue: 20,
                maxHeight: 20,
                displayText: function (value) {
                    return value.toFixed(2);
                }
            },
            '羊肉': {
                fillColor: '#BDC9E1',
                minValue: 0,
                maxValue: 20,
                maxHeight: 20,
                displayText: function (value) {
                    return value.toFixed(2);
                }
            },
            '牛肉': {
                fillColor: '#74A9CF',
                minValue: 0,
                maxValue: 20,
                maxHeight: 20,
                displayText: function (value) {
                    return value.toFixed(2);
                }
            },
            '雞肉': {
                fillColor: '#0570B0',
                minValue: 0,
                maxValue: 20,
                maxHeight: 20,
                displayText: function (value) {
                    return value.toFixed(2);
                }
            }
        };

        var pieChartMarker = new L.PieChartMarker(new L.LatLng(39.92, 116.46), options);
        map.addLayer(pieChartMarker);
        //Coxcom圖
        var colorValue = Math.random() * 360;
        var options = {
            color: '#000',
            weight: 1,
            fillColor: 'hsl(' + colorValue + ',100%,50%)',
            radius: 30,
            fillOpacity: 0.7,
            rotation: 0.0,
            position: {
                x: 0,
                y: 0
            },
            offset: 0,
            numberOfSides: 50,
            width: 10
        };

        options.data = {
            'dataPoint1': Math.random() * 20,
            'dataPoint2': Math.random() * 20,
            'dataPoint3': Math.random() * 20,
            'dataPoint4': Math.random() * 20
        };

        options.chartOptions = {
            'dataPoint1': {
                fillColor: '#EDF8FB',
                minValue: 0,
                maxValue: 20,
                maxHeight: 20,
                displayText: function (value) {
                    return value.toFixed(2);
                }
            },
            'dataPoint2': {
                fillColor: '#B2E2E2',
                minValue: 0,
                maxValue: 20,
                maxHeight: 20,
                displayText: function (value) {
                    return value.toFixed(2);
                }
            },
            'dataPoint3': {
                fillColor: '#66C2A4',
                minValue: 0,
                maxValue: 20,
                maxHeight: 20,
                displayText: function (value) {
                    return value.toFixed(2);
                }
            },
            'dataPoint4': {
                fillColor: '#238B45',
                minValue: 0,
                maxValue: 20,
                maxHeight: 20,
                displayText: function (value) {
                    return value.toFixed(2);
                }
            }
        };
        var CoxcombChartMarker = new L.CoxcombChartMarker(new L.LatLng(37.92, 116.46), options);
        map.addLayer(CoxcombChartMarker);        
       //直方圖
        var colorValue = Math.random() * 360;
        var options = {
            color: '#000',
            weight: 1,
            fillColor: 'hsl(' + colorValue + ',100%,50%)',
            radius: 20,
            fillOpacity: 0.7,
            rotation: 0.0,
            position: {
                x: 0,
                y: 0
            },
            offset: 0,
            width: 8
        };

        options.data = {
            'dataPoint1': Math.random() * 20,
            'dataPoint2': Math.random() * 20,
            'dataPoint3': Math.random() * 20,
            'dataPoint4': Math.random() * 20
        };

        options.chartOptions = {
            'dataPoint1': {
                fillColor: '#F2F0F7',
                minValue: 0,
                maxValue: 20,
                maxHeight: 30,
                displayText: function (value) {
                    return value.toFixed(2);
                }
            },
            'dataPoint2': {
                fillColor: '#CBC9E2',
                minValue: 0,
                maxValue: 20,
                maxHeight: 30,
                displayText: function (value) {
                    return value.toFixed(2);
                }
            },
            'dataPoint3': {
                fillColor: '#9E9AC8',
                minValue: -40,
                maxValue: 20,
                maxHeight: 30,
                displayText: function (value) {
                    return value.toFixed(2);
                }
            },
            'dataPoint4': {
                fillColor: '#6A51A3',
                minValue: 0,
                maxValue: 20,
                maxHeight: 30,
                displayText: function (value) {
                    return value.toFixed(2);
                }
            }
        };

        var barChart = new L.BarChartMarker(new L.LatLng(41.92, 116.46), options);
        map.addLayer(barChart);  
    </script>
</body>
</html>

4、總結dom

api插件自己不難，今天浪費了不少時間在這個插件顯示上，後來才發現我下載的插件並不對，api自己都有錯，該作引用官方的api在線地址，這才解決問題，真坑。ide