GeoJSON区县级地理数据信息拼接使用说明-阿里云开发者社区

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

2023-07-23 564

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

操作演示

操作说明

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

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

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

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

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

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

配置说明

separate.zip，geojson核心分离程序，放入http目录，进行访问；
省市geojson的地理信息文件，命名规则，该省市的全拼，如chongqing.json；将该chongqing.json放入town目录；
修改index.html文件第28行value为对应的省份拼音和文本即可。

 <option value='chongqing'>重庆市</option>`

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!