Armys 阅读(3727) 评论(0)

最近一直在做统计。为了精确数据精确位置也是绞尽脑汁,最后一拍脑门就想出了 结合百度地图,有人肯定会问,纯白度地图来实现不就OK,但是要为了更好的用户体验,不建议使用纯百度地图,不多废话,先看个效果:

 

 

 

 看完上面就是想要的效果,当然为了更好的体验重写了 百度的双击事件  改为单击事件,再点就定位到具体位置了:

  

function myChartInit(myChart, initialize) {
    //配置地图
    myChart.setOption({
        series: [
            {
                type: 'map',
                map: 'china'
            }
        ]
    });
    var option = {
        backgroundColor: '#fff',
        title: {
            text: '【数据汇集】"互联网+政务" 动态实时数据展示', //标题
            subtext: ' ',
            sublink: '#', //subtext跳转地址
            left: 'center',
            textStyle: {
                color: '#040404'
            }
        },
        //浮层设置
        tooltip: {
            trigger: 'item',
            formatter: function (params) {
                var tar = params;
                return tar.name;
            }
            //,
            //formatter: function(params, ticket, callback) {
            //    var $pna = params.name;
            //    var res = "";

            //    setTimeout(function() {
            //        // 仅为了模拟异步回调
            //        callback(ticket, res); //回调函数,这里可以做异步请求加载的一些代码
            //    },
            //        15);
            //    return "loading";
            //}
        },
        geo: {
            map: 'china',
            label: {
                emphasis: {
                    show: false
                }
            },
            roam: true,
            itemStyle: {
                normal: {
                    areaColor: '#87CEFA',
                    borderColor: '#111'
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            }
        },
        series: [
            {
                name: 'TOP总量',
                type: 'scatter',
                coordinateSystem: 'geo',
                symbol: 'image://../Content/images/load.png',
                data: initialize == false ? convertData(data) : data,
                symbolSize: function(val) {
                    return 20;
                },
                showEffectOn: 'render',
                rippleEffect: {
                    brushType: 'stroke'
                },
                hoverAnimation: true,
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#C13331',
                        shadowColor: '#333'
                    }
                },
                zlevel: 1
            }
        ]
    };

    //实例化事件,实现区域跳转
    myChart.on('click',
        function (params) {
            var city = params.name;
            if (params.value == null) {
                return false;
            } else {
                window.location.href = "/Home/Province?name=" + escape(city);
                return true;
            }
        });

    //实例地图
    myChart.setOption(option);
};

 

var option = {
                            title: {
                                text: ' ',
                                subtext: ' ',
                                left: 'center'
                            },
                            //浮层设置
                            tooltip: {
                                trigger: 'item',
                                formatter: function (params) {
                                    return '<p style="color:rgb(255, 255, 255)">' + params.name + '</p>';
                                }
                            },
                            bmap: {
                                center: center,
                                zoom: zoom,
                                roam: true,
                                mapStyle: {
                                    styleJson: [
                                        {
                                            'featureType': 'land', //调整土地颜色
                                            'elementType': 'geometry',
                                            'stylers': {
                                                'color': '#081734'
                                            }
                                        },
                                        {
                                            'featureType': 'building', //调整建筑物颜色
                                            'elementType': 'geometry',
                                            'stylers': {
                                                'color': '#04406F'
                                            }
                                        },
                                        {
                                            'featureType': 'building', //调整建筑物标签是否可视
                                            'elementType': 'labels',
                                            'stylers': {
                                                'visibility': 'off'
                                            }
                                        },
                                        {
                                            'featureType': 'highway', //调整高速道路颜色
                                            'elementType': 'geometry',
                                            'stylers': {
                                                'color': '#015B99'
                                            }
                                        },
                                        {
                                            'featureType': 'highway', //调整高速名字是否可视
                                            'elementType': 'labels',
                                            'stylers': {
                                                'visibility': 'off'
                                            }
                                        },
                                        {
                                            'featureType': 'arterial', //调整一些干道颜色
                                            'elementType': 'geometry',
                                            'stylers': {
                                                'color': '#003051'
                                            }
                                        },
                                        {
                                            'featureType': 'arterial',
                                            'elementType': 'labels',
                                            'stylers': {
                                                'visibility': 'off'
                                            }
                                        },
                                        {
                                            'featureType': 'green',
                                            'elementType': 'geometry',
                                            'stylers': {
                                                'visibility': 'off'
                                            }
                                        },
                                        {
                                            'featureType': 'water',
                                            'elementType': 'geometry',
                                            'stylers': {
                                                'color': '#044161'
                                            }
                                        },
                                        {
                                            'featureType': 'subway', //调整地铁颜色
                                            'elementType': 'geometry.stroke',
                                            'stylers': {
                                                'color': '#003051'
                                            }
                                        },
                                        {
                                            'featureType': 'subway',
                                            'elementType': 'labels',
                                            'stylers': {
                                                'visibility': 'off'
                                            }
                                        },
                                        {
                                            'featureType': 'railway',
                                            'elementType': 'geometry',
                                            'stylers': {
                                                'visibility': 'off'
                                            }
                                        },
                                        {
                                            'featureType': 'railway',
                                            'elementType': 'labels',
                                            'stylers': {
                                                'visibility': 'off'
                                            }
                                        },
                                        {
                                            'featureType': 'all', //调整所有的标签的边缘颜色
                                            'elementType': 'labels.text.stroke',
                                            'stylers': {
                                                'color': '#313131'
                                            }
                                        },
                                        {
                                            'featureType': 'all', //调整所有标签的填充颜色
                                            'elementType': 'labels.text.fill',
                                            'stylers': {
                                                'color': '#FFFFFF'
                                            }
                                        },
                                        {
                                            'featureType': 'manmade',
                                            'elementType': 'geometry',
                                            'stylers': {
                                                'visibility': 'off'
                                            }
                                        },
                                        {
                                            'featureType': 'manmade',
                                            'elementType': 'labels',
                                            'stylers': {
                                                'visibility': 'off'
                                            }
                                        },
                                        {
                                            'featureType': 'local',
                                            'elementType': 'geometry',
                                            'stylers': {
                                                'visibility': 'off'
                                            }
                                        },
                                        {
                                            'featureType': 'local',
                                            'elementType': 'labels',
                                            'stylers': {
                                                'visibility': 'off'
                                            }
                                        },
                                        {
                                            'featureType': 'subway',
                                            'elementType': 'geometry',
                                            'stylers': {
                                                'lightness': -65
                                            }
                                        },
                                        {
                                            'featureType': 'railway',
                                            'elementType': 'all',
                                            'stylers': {
                                                'lightness': -40
                                            }
                                        },
                                        {
                                            'featureType': 'boundary',
                                            'elementType': 'geometry',
                                            'stylers': {
                                                'color': '#8b8787',
                                                'weight': '1',
                                                'lightness': -29
                                            }
                                        }
                                    ]
                                }
                            },
                            series: [
                                {
                                    name: 'TOP总量',
                                    type: 'scatter',
                                    coordinateSystem: 'bmap',
                                    symbol: 'image://../Content/images/load.png',
                                    data: convertData(data),
                                    symbolSize: function (val) {
                                        return 20;
                                    },
                                    showEffectOn: 'render',
                                    rippleEffect: {
                                        brushType: 'stroke'
                                    },
                                    hoverAnimation: true,
                                    label: {
                                        normal: {
                                            formatter: '{b}',
                                            position: 'right',
                                            show: true
                                        }
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: '#ff0000',
                                            shadowColor: '#ff0000'
                                        }
                                    },
                                    zlevel: 1
                                }
                            ]
                        };
                        // 跳转
                        //myChart.on('click', function (params) {
                        //    //zoom = 18;
                        //    //center = params.value;
                        //    //var city = params.name;
                        //    //myChart.setOption(option, true);
                        //    alert("您点击了:" + params.name);
                        //});

                        myChart.setOption(option, true);