test/custom-bmap-grid.html - master - githubmirror/echarts

test/custom-bmap-grid.html
407 строк38 KB
pissang
fix(custom): remove incremental el when switched back to normal.
11 май 2021, 13:30
11 май 2021, 13:300f4408d

<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="lib/simpleRequire.js"></script>
        <script src="lib/config.js"></script>
        <script src="lib/testHelper.js"></script>
        <script src="lib/jquery.min.js"></script>
        <script src="http://api.map.baidu.com/api?v=2.0&ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu"></script>
        <link rel="stylesheet" href="lib/reset.css" />
    </head>
    <body>
        <style>
            h1 {
                line-height: 60px;
                height: 60px;
                background: #ddd;
                text-align: center;
                font-weight: bold;
                font-size: 14px;
            }
            .chart {
                height: 100%;
            }
            #pens {
                position: fixed;
                right: 10px;
                top: 10px;
                z-index: 9999999;
                border: 2px solid #aaa;
                text-align: center;
            }
            #pens div {
                width: 40px;
                height: 20px;
                cursor: pointer;
            }
        </style>

        <div id="pens">
            <span>free</span>
        </div>

        <div class="chart" id="grid"></div>




        <script>

            var COLORS = ["#070093", "#1c3fbf", "#1482e5", "#70b4eb", "#b4e0f3", "#ffffff"];

            function initPens(echarts, chart, data) {

                var currColorIndex = 0;
                var pens = $('#pens');

                COLORS.forEach(function (color, index) {
                    var penEl = $('<div></div>').css('background', color);
                    pens.append(penEl);
                    penEl.on('click', function () {
                        currColorIndex = index;
                    });
                });

                var drawing;
                var downing;
                chart.getZr().on('mousedown', function (e) {
                    downing = [e.offsetX, e.offsetY];
                });
                chart.getZr().on('mouseup', function (e) {
                    if (!downing) {
                        return;
                    }
                    if (Math.pow(e.offsetX - downing[0], 2) + Math.pow(e.offsetY - downing[1], 2) > 4) {
                        return;
                    }
                    drawing = !drawing;
                    $('#pens span')[0].innerHTML = !!drawing ? 'draw' : 'free';
                    downing = null;
                });
                chart.on('mousemove', function (params) {
                    if (!drawing) {
                        return;
                    }

                    var dataIndex = params.dataIndex;
                    var value = params.value;
                    data[dataIndex][2] = currColorIndex;

                    update();
                });

                var update = echarts.throttle(function () {
                    chart.setOption({
                        series: {
                            data: data
                        }
                    });
                }, 300);
            }

        </script>




        <script>

            var data;

            require([
                'echarts',
                'extension/bmap'
            ], function (echarts) {

                var lngExtent = [39.5, 40.6];
                var latExtent = [115.9, 116.8];
                var cellCount = [50, 50];
                var cellSizeCoord = [
                    (lngExtent[1] - lngExtent[0]) / cellCount[0],
                    (latExtent[1] - latExtent[0]) / cellCount[1]
                ];
                var gapSize = 0;
                data = [[0,0,5],[1,0,5],[2,0,5],[3,0,5],[4,0,5],[5,0,5],[6,0,5],[7,0,5],[8,0,5],[9,0,5],[10,0,5],[11,0,5],[12,0,5],[13,0,5],[14,0,5],[15,0,5],[16,0,5],[17,0,5],[18,0,5],[19,0,5],[20,0, … [Строка слишком длинная. Вы можете скачать файл]

                data.sort(function (a, b) {
                    var dist0 = (a[0] - 25) * (a[0] - 25) + (a[1] - 25) * (a[1] - 25);
                    var dist1 = (b[0] - 25) * (b[0] - 25) + (b[1] - 25) * (b[1] - 25);

                    return dist0 - dist1;
                });

                function renderItem(params, api) {
                    var context = params.context;
                    var lngIndex = api.value(0);
                    var latIndex = api.value(1);
                    var coordLeftTop = [
                        +(latExtent[0] + lngIndex * cellSizeCoord[0]).toFixed(6),
                        +(lngExtent[0] + latIndex * cellSizeCoord[1]).toFixed(6)
                    ];
                    var lngIndex = api.value(0);
                    var latIndex = api.value(1);
                    var pointLeftTop = getCoord(params, api, lngIndex, latIndex);
                    var pointRightBottom = getCoord(params, api, lngIndex + 1, latIndex + 1);

                    return {
                        type: 'rect',
                        shape: {
                            x: pointLeftTop[0],
                            y: pointLeftTop[1],
                            width: pointRightBottom[0] - pointLeftTop[0],
                            height: pointRightBottom[1] - pointLeftTop[1]
                        },
                        style: api.style({
                            stroke: 'rgba(0,0,0,0.1)'
                        }),
                        styleEmphasis: api.styleEmphasis()
                    };
                }

                function getCoord(params, api, lngIndex, latIndex) {
                    var coords = params.context.coords || (params.context.coords = []);
                    var key = lngIndex + '-' + latIndex;

                    // bmap returns point in integer, which makes cell width unstable.
                    // So we have to use right bottom point.
                    return coords[key] || (coords[key] = api.coord([
                        +(latExtent[0] + lngIndex * cellSizeCoord[0]).toFixed(6),
                        +(lngExtent[0] + latIndex * cellSizeCoord[1]).toFixed(6)
                    ]));
                }

                option = {
                    tooltip: {},
                    visualMap: {
                        type: 'piecewise',
                        inverse: true,
                        top: 10,
                        left: 10,
                        pieces: [{
                            value: 0, color: COLORS[0]
                        }, {
                            value: 1, color: COLORS[1]
                        }, {
                            value: 2, color: COLORS[2]
                        }, {
                            value: 3, color: COLORS[3]
                        }, {
                            value: 4, color: COLORS[4]
                        }, {
                            value: 5, color: COLORS[5]
                        }],
                        borderColor: '#aaa',
                        borderWidth: 2,
                        backgroundColor: '#eee',
                        dimension: 2,
                        inRange: {
                            // color: [
                            //     '#00b358', '#5dffa6', '#b8f4f4', '#f6d791',
                            //     '#f8d782', '#f8c600', '#f3b387', '#f78b3f'
                            // ],
                            color: COLORS,
                            opacity: 0.7
                        }
                    },
                    series: [
                        {
                            type: 'custom',
                            coordinateSystem: 'bmap',
                            renderItem: renderItem,
                            animation: false,
                            itemStyle: {
                                emphasis: {
                                    color: 'yellow'
                                }
                            },
                            encode: {
                                tooltip: 2
                            },
                            data: data,
                            progressiveThreshold: 1000
                        }
                    ],
                    bmap: {
                        center: [116.46, 39.92],
                        zoom: 11.8,
                        roam: true,
                        mapStyle: {
                        styleJson: [{
                            'featureType': 'water',
                            'elementType': 'all',
                            'stylers': {
                                'color': '#d1d1d1'
                            }
                        }, {
                            'featureType': 'land',
                            'elementType': 'all',
                            'stylers': {
                                'color': '#f3f3f3'
                            }
                        }, {
                            'featureType': 'railway',
                            'elementType': 'all',
                            'stylers': {
                                'visibility': 'off'
                            }
                        }, {
                            'featureType': 'highway',
                            'elementType': 'all',
                            'stylers': {
                                'color': '#999999'
                            }
                        }, {
                            'featureType': 'highway',
                            'elementType': 'labels',
                            'stylers': {
                                'visibility': 'off'
                            }
                        }, {
                            'featureType': 'arterial',
                            'elementType': 'geometry',
                            'stylers': {
                                'color': '#fefefe'
                            }
                        }, {
                            'featureType': 'arterial',
                            'elementType': 'geometry.fill',
                            'stylers': {
                                'color': '#fefefe'
                            }
                        }, {
                            'featureType': 'poi',
                            'elementType': 'all',
                            'stylers': {
                                'visibility': 'off'
                            }
                        }, {
                            'featureType': 'green',
                            'elementType': 'all',
                            'stylers': {
                                'visibility': 'off'
                            }
                        }, {
                            'featureType': 'subway',
                            'elementType': 'all',
                            'stylers': {
                                'visibility': 'off'
                            }
                        }, {
                            'featureType': 'manmade',
                            'elementType': 'all',
                            'stylers': {
                                'color': '#d1d1d1'
                            }
                        }, {
                            'featureType': 'local',
                            'elementType': 'all',
                            'stylers': {
                                'color': '#d1d1d1'
                            }
                        }, {
                            'featureType': 'arterial',
                            'elementType': 'labels',
                            'stylers': {
                                'visibility': 'off'
                            }
                        }, {
                            'featureType': 'boundary',
                            'elementType': 'all',
                            'stylers': {
                                'color': '#fefefe'
                            }
                        }, {
                            'featureType': 'building',
                            'elementType': 'all',
                            'stylers': {
                                'color': '#d1d1d1'
                            }
                        }, {
                            'featureType': 'label',
                            'elementType': 'labels.text.fill',
                            'stylers': {
                                'color': 'rgba(0,0,0,0)'
                            }
                        }]
                    }
                }
            };

            var chart = testHelper.createChart(echarts, 'grid', option);


            function generateData() {
                var data = [];
                for (var i = 0; i < cellCount[1]; i++) {
                    for (var j = 0; j < cellCount[0]; j++) {
                        data.push([j, i, COLORS.length - 1]);
                    }
                }
                return data;
            }

            function generateData3() {
                var data = [];
                var min = Infinity;
                var max = -Infinity;
                var center = [
                    Math.floor(cellCount[0] * 0.45),
                    Math.floor(cellCount[1] * 0.45)
                ];

                for (var i = 0; i < cellCount[1]; i++) {
                    for (var j = 0; j < cellCount[0]; j++) {
                        var x = (j - center[0]);
                        var y = (i - center[1]);
                        var value = Math.cos(
                            Math.pow(x / center[0] * Math.PI, 2)
                            + Math.pow(y / center[1] * Math.PI, 2)
                        );

                        min = Math.min(min, value);
                        max = Math.max(max, value);
                        data.push([j, i, value]);
                    }
                }

                return {
                    data: data,
                    min: min,
                    max: max
                }
            }


            initPens(echarts, chart, data);
        });

    </script>







    </body>
</html>