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!

相关文章
|
机器学习/深度学习 人工智能 UED
为何NPU是开启终端侧生成式AI的关键?
【2月更文挑战第17天】为何NPU是开启终端侧生成式AI的关键?
467 2
为何NPU是开启终端侧生成式AI的关键?
|
定位技术
Mac电脑报错“托管配置文件格式不正确”的解决方法
Mac电脑报错“托管配置文件格式不正确”的解决方法
1404 1
|
8月前
|
API 定位技术 Python
高德商家手机电话号码采集工具,可采集地址坐标手机号码提取软件
这是一套基于高德地图API的商家信息采集解决方案,提供核心代码与功能实现。通过高德Place API,合法合规地批量采集商家基础信息
|
11月前
|
JSON JavaScript 前端开发
shpfile转GeoJSON;控制shp转GeoJSON的精度;如何获取GeoJSON;GeoJSON是什么有什么用;GeoJSON结构详解(带数据示例)
在使用Openlayers、leaflet、mapbox等地图控件的时候,GeoJSON几乎是不可避免打交道的数据类型,如果您想要从事gis行业相关的开发工作,本篇文章应该能为您带来一些帮助。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
11月前
|
机器学习/深度学习 设计模式 API
Python 高级编程与实战:构建微服务架构
本文深入探讨了 Python 中的微服务架构,介绍了 Flask、FastAPI 和 Nameko 三个常用框架,并通过实战项目帮助读者掌握这些技术。每个框架都提供了构建微服务的示例代码,包括简单的 API 接口实现。通过学习本文,读者将能够使用 Python 构建高效、独立的微服务。
链动 2 + 1 商业模式:弊端、解决方案、合法性与玩法
链动2+1模式是一种依托科技和数字技术的新型分销模式,主要通过增加贡献、帮扶机制、换位机制、合伙机制等方式解决团队发展难题,提高粘性和复购率。该模式以销售产品为主,不构成传销,通过设置多种身份和奖励机制,鼓励用户积极参与,提高销售效率。以499元某品牌白酒为例,展示了具体的玩法和奖励分配方式。
|
JSON JavaScript 定位技术
Echarts 绘制地图(中国、省市、区县),保姆级教程!
Echarts 绘制地图(中国、省市、区县),保姆级教程!
|
安全 物联网 API
API技术之身份认证
【10月更文挑战第17天】身份认证是API安全的核心,确保API可信可控。
API技术之身份认证
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
4587 0
|
开发框架 .NET API
在IIS上部署ASP.NET Core Web API和Blazor Wasm详细教程
在IIS上部署ASP.NET Core Web API和Blazor Wasm详细教程
1024 3