eCharts 地图笔记

根据某一特定地区来展示

!!!
Github链接: eCharts 某区域地图可视化



本文以广东南沙区为例,展示 南沙区的地图。

网上已有的代码or资料大都是到国家、省、市级,再往下细分的区域的代码基本上很少,所以如果有要展示某一特定区域的话,需要自己找到该区域的地理位置信息。
(本文最下面 扩展资料中的网站可定位到地区的经纬度)

在这里插入图片描述

在这里插入图片描述



下面详细介绍怎样使用eCharts来展示某一特定区域的地图。

下载地图

1,
下面这个网站提供一些地图的 json 文件,定位到该地区,直接下载其 json 文件。
https://gallery.echartsjs.com/editor.html?c=xr1IEt3r4Q

2,
我自己在网上也找到一个全国的地图文件(包括js、json格式):
链接:https://pan.baidu.com/s/1IjS1ODy7wlq3iYQ6aK23-g
提取码:ovji
(比较详细,包括全国大部分地区)


通过读取 json 文件,加载地图

var uploadedDataURL = "./js/gd.json";
var myChart = echarts.init(document.getElementById('container'));
$.get(uploadedDataURL, function(shJson) {
    echarts.registerMap('shanghai', shJson);
    myChart.setOption({
        series: [{
            type: 'map',
            map: 'shanghai'
        }]
    });

··· 省略 ··· 
 }

完整代码去 github 里看吧
替换json文件即可修改地区轮廓


运行环境
需要在 localhost 中运行:

将文件放在tomcat的webapps中
1, 启动localhost
2, 通过 http://localhost:8080/test.html访问


扩展资料

卫星地图(特定区域经的纬度信息)


❤ end ❤

©️2020 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值