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!

相关文章
|
定位技术
百度地图拾取经纬度转为标准GEOJSON格式的函数解决方案
百度地图拾取经纬度转为标准GEOJSON格式的函数解决方案
262 0
|
数据可视化 搜索推荐 JavaScript
数据可视化大屏百度地图区域掩膜MapMask实现地图指定区域非省市县行政区显示的实战案例解析(JavaScript API GL、个性化地图定制、指定区域经纬度拾取转化)
数据可视化大屏百度地图区域掩膜MapMask实现地图指定区域非省市县行政区显示的实战案例解析(JavaScript API GL、个性化地图定制、指定区域经纬度拾取转化)
956 0
|
4月前
Map——全国省市区EXCEL表格(包含code)
Map——全国省市区EXCEL表格(包含code)
61 0
|
6月前
|
JSON JavaScript 定位技术
Echarts自定义地图显示区域,可以显示街道,小区,学校等区域
Echarts自定义地图显示区域,可以显示街道,小区,学校等区域
|
7月前
|
JSON 数据可视化 定位技术
python_将包含汉字的字典数据写入json(将datav的全省数据中的贵州区域数据取出来)
python_将包含汉字的字典数据写入json(将datav的全省数据中的贵州区域数据取出来)
67 0
|
定位技术
百度地图开发:字符串经纬度转为经纬度数组的解决方案
百度地图开发:字符串经纬度转为经纬度数组的解决方案
161 0
|
移动开发 JavaScript 前端开发
uniapp在H5获取当前定位信息不需要SDK可直接获取城市(包括经纬度省市区和市区编码)
最近在做获取用户当前定位信息的时候,发现uniapp官方提供的兼容性并不是特别好,光注意事项都是密密麻麻一大堆,在实际使用场景下,效果并不理想,也不是很稳定。于是便重新封装了一下腾讯地图的一些东西,提高了下兼容度!下边我会把我用的封装思路逻辑给大家一一讲解。完整代码可私信我我发给你以上便是基于uni-app框架开发,使用Promise进行异步请求和结果返回,封装的H5获取当前详细定位信息组件希望大家一起交流。
1728 0
|
JSON IDE 开发工具
geojson乡镇拼接的说明
geojson乡镇拼接的说明
255 0
qgis 将县区的数据转成市区的边界数据
在第一步的基础上,有了21个面,那么咱们可以对当前的面进行融合操作,生成一个面,也就是咱们需要的市区边界数据。
qgis 将县区的数据转成市区的边界数据