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

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

操作演示


操作说明

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


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


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


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


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


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


配置说明

  1. separate.zip,geojson核心分离程序,放入http目录,进行访问;
  2. 省市geojson的地理信息文件,命名规则,该省市的全拼,如chongqing.json;将该chongqing.json放入town目录;
  3. 修改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!

相关文章
|
JavaScript Android开发 Swift
uni-app-x
uni-app-x
626 0
|
小程序 前端开发
uniapp 小程序接入友盟 ,自定义事件携带参数
uniapp 小程序接入友盟 ,自定义事件携带参数
673 0
|
开发工具
Python----使用schedule模块可以非常简单地设置定时任务
Python----使用schedule模块可以非常简单地设置定时任务
2316 0
|
JSON JavaScript 定位技术
Echarts 绘制地图(中国、省市、区县),保姆级教程!
Echarts 绘制地图(中国、省市、区县),保姆级教程!
29197 154
|
6月前
|
人工智能 自然语言处理 监控
企业级Agent解决方案:以AgentOne为核心的数智化实践
2026年,阿里云瓴羊推出企业级全域协同Agent方案:以AgentOne为智能中枢,融合Dataphin(数据治理)、Quick Audience(智能营销)、Quick Service(智能服务)与Quick BI“智能小Q”(敏捷分析),打通“感知—决策—执行—反馈”全链路,破解数据孤岛、工具断裂、闭环缺失难题,驱动企业从数字化迈向数智化跃迁。(239字)
|
JSON 前端开发 Java
SpringBoot - 优雅解决 SpringBoot 在 JDK8 中 LocalDateTime(反)序列化问题
SpringBoot - 优雅解决 SpringBoot 在 JDK8 中 LocalDateTime(反)序列化问题
1562 0
|
Ubuntu
Ubuntu下载ISO镜像的方法
步骤 1:访问Ubuntu官方网站 打开浏览器,输入Ubuntu的官方网址:https://cn.ubuntu.com/download/desktop 接着,点击“Ubuntu Desktop”或你需要的Ubuntu版本。
15494 6
|
JSON JavaScript 前端开发
shpfile转GeoJSON;控制shp转GeoJSON的精度;如何获取GeoJSON;GeoJSON是什么有什么用;GeoJSON结构详解(带数据示例)
在使用Openlayers、leaflet、mapbox等地图控件的时候,GeoJSON几乎是不可避免打交道的数据类型,如果您想要从事gis行业相关的开发工作,本篇文章应该能为您带来一些帮助。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~

热门文章

最新文章