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
558 0
|
JSON JavaScript 定位技术
Echarts 绘制地图(中国、省市、区县),保姆级教程!
Echarts 绘制地图(中国、省市、区县),保姆级教程!
28202 154
|
JSON JavaScript 前端开发
shpfile转GeoJSON;控制shp转GeoJSON的精度;如何获取GeoJSON;GeoJSON是什么有什么用;GeoJSON结构详解(带数据示例)
在使用Openlayers、leaflet、mapbox等地图控件的时候,GeoJSON几乎是不可避免打交道的数据类型,如果您想要从事gis行业相关的开发工作,本篇文章应该能为您带来一些帮助。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
存储 数据可视化 项目管理
有哪些“极简风”页面设计的办公协同工具?再不怕眼花缭乱啦!
在快节奏的现代职场中,极简风页面设计的协同工具成为提升工作效率的重要手段。本文介绍了10款极简风设计的办公协同工具,包括板栗看板、Notion、Trello、Slack、Asana、Figma、Invision、Moqups、Coda和Dropbox Paper。这些工具不仅界面简洁直观,功能强大,还能帮助团队高效协作,让工作更加井然有序。
558 43
有哪些“极简风”页面设计的办公协同工具?再不怕眼花缭乱啦!
|
Ubuntu
Ubuntu下载ISO镜像的方法
步骤 1:访问Ubuntu官方网站 打开浏览器,输入Ubuntu的官方网址:https://cn.ubuntu.com/download/desktop 接着,点击“Ubuntu Desktop”或你需要的Ubuntu版本。
14776 6
|
安全 网络安全
单域名SSL证书跟通配符SSL证书对比
单域名SSL证书仅保护一个特定域名,如`www.example.com`,适合小型网站,价格较低且配置简单。通配符SSL证书可保护主域名及其所有子域名,如`*.example.com`,适合中大型企业,灵活性高但价格较高。选择时需根据实际需求权衡域名数量、预算和管理复杂度。
1291 5
|
算法 人机交互 UED
响应时间指标的探索
本文探讨了响应时间在人机交互中的重要性及发展。从1968年Rober B.Miller首次定义响应时间的多个维度,到1991年Stuart K.Card等人提出的立即响应时间常数,再到1993年Jakob Nielsen将响应时间划分为三个关键阈值,直至2020年Google提出的RAIL模型,强调了以用户为中心的性能衡量标准。这些研究为提升用户体验提供了理论基础和技术指导。
1781 5