ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

GeoJSON区县级地理数据信息拼接使用说明

2021-05-03 16:57:14  阅读:295  来源: 互联网

标签:color myChart GeoJSON lockdatav json 拼接 params 县级 fff


操作演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

操作说明

1.确定目录town/chongqing.json与选择框的名称相同;

2.使用到$.getJSON,必须通过http访问而不能单机使用;

3.表单内输入区县级,不支持地级市或其他名称;

4.数据时间为2015年左右,要求精确的请联系客服定制;

5.生成json数据后,到http://geojson.io/验证;

6.默认格式可以直接导入eCharts;

echarts加载说明

构建容器

<div id="map" style="height: 100%"></div>

地图渲染

 //调用地图geojson
    $.getJSON('geojson/chongqing.json', function (data) {
        //注册地图;
        echarts.registerMap('lockdatav', data);
        var myChart = echarts.init(document.getElementById('map'));
        var option = {
            backgroundColor: '#404a59',
            title: {
                text: '乡镇GEOJSON - 漏刻有时地图数据可视化',
                top: "5%",
                x: 'center',
                textStyle: {
                    color: '#fff'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    return params.name + ' : ' + params.value[2];
                }
            },
            legend: {
                orient: 'vertical',
                y: 'bottom',
                x: 'right',
                data: ['pm2.5'],
                textStyle: {
                    color: '#fff'
                }
            },
            geo: {
                map: 'lockdatav',//必须与初始注册的地图名称一致;
                roam: true,
                aspectScale: 1,
                label: {
                    normal: {
                        show: true,
                        color: "#fff"
                    },
                    emphasis: {
                        show: true,
                        color: "#fff"
                    }
                },
                itemStyle: {
                    normal: {
                        areaColor: '#323c48',
                        borderColor: '#111'
                    },
                    emphasis: {
                        areaColor: '#2a333d'
                    }
                }
            },
            series: []//根据需要执行气泡图、飞线图;
        };

        //渲染图表,并自适应窗口;
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    });

lockdatav Done!

标签:color,myChart,GeoJSON,lockdatav,json,拼接,params,县级,fff
来源: https://blog.csdn.net/weixin_41290949/article/details/116378217

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有