echarts实现镇区地图效果

您所在的位置:网站首页 重庆区级地图 echarts实现镇区地图效果

echarts实现镇区地图效果

2024-03-10 14:56| 来源: 网络整理| 查看: 265

内容简介

        echarts官方只提供全国地图,但是实际项目过程中,经常需要精确到镇区;本文通过实例介绍两种实现镇区地图效果的方法。

自定义地图

        第一种的实现过程:

        1. 打开网址“http://datav.aliyun.com/tools/atlas”,显示如下图的效果;

        2. 左上角输入要生成的区域名字,比如“揭阳市”,输入“揭阳市”后,输入框下面会出现揭阳市的信息,点击后下面的信息和地图会更新为揭阳市的内容;

        3. 根据项目实际情况,下载相对应类型的文件,该实例选择“geojson”,包含子区域。

        第二种的实现过程:

        1. 使用工具“BIGEMAP”生成每个区域的kml文件,选择行政区域后点击红色框的箭头就可以保存该区域的kml文件;

        延伸:如果需要实现镇区以下,可以选择到第四个下拉框。

        2. 打开网址“http://geojson.io”,点击“open-file”选择生成的kml文件,地图显示对应的区域,右边json自动生成数据;

         3. 重复步骤1-2,把其它区域全部导入,最终效果如下;

        4. 图中“json”就是我们需要的数据,另存为json文件到本地。

        注意:

        引用后经常会出现错误“echarts.min.js:45 Uncaught Error: Invalid geoJson format”,这个错误是部分区域的格式不对;下图为正确的格式,且错误的格式一般都是红色框的位置;

        比如第二种方法生成的json,就报了上面的问题,只需要修改下图地方就可以解决(错误的格式是数组,删掉前面,只保存最后一个值);

在自定义地图上实现图表效果

        实现代码如下,主要分析几个重点:

        1. series下的data的属性“name”要跟json的“name”对应;

        2. 有时候区域名称未显示在该区域的最中间,可以修改json里面的字段“cp”,如果没有该字段可自己添加。

        Tips:“jy.json”即为上面两种方法生成的数据。

var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; var option; myChart.showLoading(); $.get('jy.json', function(geoJson) { myChart.hideLoading(); echarts.registerMap('jy', geoJson); myChart.setOption(option = { title: { text: '全市办件量分布图' }, tooltip: { trigger: 'item', formatter: '{b}{c} (件)' }, toolbox: { show: true, orient: 'vertical', left: 'right', top: 'center', feature: { dataView: { readOnly: false }, restore: {}, saveAsImage: {} } }, visualMap: { min: 800, max: 50000, showLabel: !0, left: 26, bottom: 40, text: ['高', '低'], pieces: [{ gt: 2000, label: "> 2000", color: "#7f1100" }, { gte: 1500, lte: 2000, label: "1500 - 2000", color: "#ff5428" }, { gte: 1000, lt: 1500, label: "1000 - 1500", color: "#ff8c71" }, { value: 0, color: "#ffffff" }] }, series: [{ name: '全市办件量分布图', type: 'map', mapType: 'jy', // 自定义扩展图表类型 label: { show: true, color: '#fff' }, data: [ { name: '榕城区', value: 2000 }, { name: '揭东区', value: 2500 }, { name: '揭西县', value: 1200 }, { name: '惠来县', value: 1600 }, { name: '普宁市', value: 1300 } ] }] }); }); if (option && typeof option === 'object') { myChart.setOption(option); } 注意事项

        可使用网站“http://api.map.baidu.com/lbsapi/getpoint/index.html”进行坐标拾取。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3