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格式的函数解决方案
292 0
|
数据可视化 搜索推荐 JavaScript
数据可视化大屏百度地图区域掩膜MapMask实现地图指定区域非省市县行政区显示的实战案例解析(JavaScript API GL、个性化地图定制、指定区域经纬度拾取转化)
数据可视化大屏百度地图区域掩膜MapMask实现地图指定区域非省市县行政区显示的实战案例解析(JavaScript API GL、个性化地图定制、指定区域经纬度拾取转化)
1054 0
|
9月前
|
定位技术 API 数据处理
使用GIS制作静态地图和处理地理数据
使用GIS制作静态地图和处理地理数据
|
9月前
|
编解码 定位技术
ENVI对不含地理参考信息的栅格图像添加地理或投影坐标系信息
ENVI对不含地理参考信息的栅格图像添加地理或投影坐标系信息
|
移动开发 JavaScript 前端开发
uniapp在H5获取当前定位信息不需要SDK可直接获取城市(包括经纬度省市区和市区编码)
最近在做获取用户当前定位信息的时候,发现uniapp官方提供的兼容性并不是特别好,光注意事项都是密密麻麻一大堆,在实际使用场景下,效果并不理想,也不是很稳定。于是便重新封装了一下腾讯地图的一些东西,提高了下兼容度!下边我会把我用的封装思路逻辑给大家一一讲解。完整代码可私信我我发给你以上便是基于uni-app框架开发,使用Promise进行异步请求和结果返回,封装的H5获取当前详细定位信息组件希望大家一起交流。
1929 0
|
JSON IDE 开发工具
geojson乡镇拼接的说明
geojson乡镇拼接的说明
300 0
|
JavaScript 前端开发 定位技术
地图开发实战案例:高德地图设置中心点和级别的行政区多边形加载效果
地图开发实战案例:高德地图设置中心点和级别的行政区多边形加载效果
169 0
|
编解码 定位技术 数据中心
DEM数据下载——以地理空间数据云为例
数字高程模型(Digital Elevation Model)是进行地形分析的重要基础,诸如坡度、坡向及水文分析等都在此基础上进行。今天,我们一起来聊一聊一种DEM数据常见下载方式。
1258 0
|
数据采集 Ubuntu 应用服务中间件
地图瓦片数据的多种利用形式以及瓦片数据的浏览显示
地图瓦片数据的多种利用形式以及瓦片数据的浏览显示
395 0
地图瓦片数据的多种利用形式以及瓦片数据的浏览显示

热门文章

最新文章