java 动态数据展示地图_Echarts实现地图下钻+地图数据展示

核心提示:var jiangxi = '/asset/get/s/data-1518338017111-rJK1gtpUM.json';var yingtan = '/asset/get/s/data-1518...

var jiangxi = "/asset/get/s/data-1518338017111-rJK1gtpUM.json";

var yingtan = "/asset/get/s/data-1518338860057-By447tpLf.json";

var yichun = "/asset/get/s/data-1518338852969-Hy677KTIf.json";

var xinyu = "/asset/get/s/data-1518338838010-SyAzQYTIf.json";

var shangrao = "/asset/get/s/data-1518338829670-H1UfQYa8G.json";

var pingxiang = "/asset/get/s/data-1518338823093-HkyMQtpUf.json";

var nanchang = "/asset/get/s/data-1518338805373-S1Temta8G.json";

var jiujiang = "/asset/get/s/data-1518338799987-S1deQFTLz.json";

var jingdezhen = "/asset/get/s/data-1518338783915-HJOJXtaLf.json";

var jian = "/asset/get/s/data-1518338772507-BJnAMKTIz.json";

var ganzhou = "/asset/get/s/data-1518338763250-S17RfKpLM.json";

var fuzhou = "/asset/get/s/data-1518338684239-S1EFGtp8f.json";

echarts.extendsMap = function(id, opt){

// 实例

var chart = this.init(document.getElementById(id));

var curGeoJson = {};

var cityMap = {

"南昌市": nanchang,

"景德镇市": jingdezhen,

"萍乡市": pingxiang,

"九江市": jiujiang,

"新余市": xinyu,

"鹰潭市": yingtan,

"赣州市": ganzhou,

"吉安市": jian,

"宜春市": yichun,

"抚州市": fuzhou,

"上饶市": shangrao

};

var geoCoordMap = {

'南昌': [115.89, 28.48],

'景德镇': [117.28, 29.09],

'萍乡': [113.93, 27.41],

'九江': [115.97,29.51],

'新余': [114.81, 27.72],

'鹰潭': [117.12, 28.10],

'赣州': [115.04, 25.67],

'吉安': [115.05, 26.88],

'宜春': [114.41, 28.03],

'抚州': [116.45, 27.79],

'上饶': [117.92, 28.22]

};

var levelColorMap = {

'1': 'rgba(241, 109, 115, .8)',

'2': 'rgba(255, 235, 59, .7)',

'3': 'rgba(147, 235, 248, 1)'

};

var defaultOpt = {

mapName: 'china',     // 地图展示

goDown: false,        // 是否下钻

bgColor: '#404a59',   // 画布背景色

activeArea: [],       // 区域高亮,同echarts配置项

data: [],

// 下钻回调(点击的地图名、实例对象option、实例对象)

callback: function(name, option, instance){}

};

if(opt) opt = this.util.extend(defaultOpt, opt);

// 层级索引

var name = [opt.mapName];

var idx = 0;

var pos = {

leftPlus: 115,

leftCur: 150,</

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Echarts 是一个基于 JavaScript 的开源可视化库,支持多种图表类型,包括地图。以下是引用地图的步骤: 1. 引入 Echarts 库和地图数据文件 在 HTML 文件中引入 Echarts 库和地图数据文件。例如: ```html <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script> ``` 2. 创建容器 在 HTML 中创建一个容器来显示地图。例如: ```html <div id="map-container" style="width: 100%; height: 500px;"></div> ``` 3. 初始化地图JavaScript 中初始化地图。例如: ```javascript // 初始化地图 var myChart = echarts.init(document.getElementById('map-container')); // 配置项 var option = { bmap: { center: [104.114129, 37.550339], zoom: 5, roam: true, mapStyle: { styleJson: [{ 'featureType': 'water', 'elementType': 'all', 'stylers': { 'color': '#d1d1d1' } }, { 'featureType': 'land', 'elementType': 'all', 'stylers': { 'color': '#f3f3f3' } }, { 'featureType': 'railway', 'elementType': 'all', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'highway', 'elementType': 'all', 'stylers': { 'color': '#fdfdfd' } }, { 'featureType': 'highway', 'elementType': 'labels', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'arterial', 'elementType': 'geometry', 'stylers': { 'color': '#fefefe' } }, { 'featureType': 'arterial', 'elementType': 'geometry.fill', 'stylers': { 'color': '#fefefe' } }, { 'featureType': 'poi', 'elementType': 'all', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'green', 'elementType': 'all', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'subway', 'elementType': 'all', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'manmade', 'elementType': 'all', 'stylers': { 'color': '#d1d1d1' } }, { 'featureType': 'local', 'elementType': 'all', 'stylers': { 'color': '#d1d1d1' } }, { 'featureType': 'arterial', 'elementType': 'labels', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'boundary', 'elementType': 'all', 'stylers': { 'color': '#fefefe' } }, { 'featureType': 'building', 'elementType': 'all', 'stylers': { 'color': '#d1d1d1' } }, { 'featureType': 'label', 'elementType': 'labels.text.fill', 'stylers': { 'color': '#999999' } }] } }, series: [{ type: 'scatter', coordinateSystem: 'bmap', data: [[104.114129, 37.550339]], symbolSize: 20, label: { show: true, formatter: '{b}', position: 'right' }, itemStyle: { color: 'purple' }, emphasis: { label: { show: true } } }] }; // 使用配置项显示图表 myChart.setOption(option); ``` 在这个例子中,我们使用了百度地图作为底图,将地图中心点设置为经度为104.114129,纬度为37.550339的位置,放大倍数为5,并且禁止缩放。在 series 中定义了一个散点图,坐标系为 bmap数据为 [104.114129, 37.550339],符号大小为20,标签位置在右侧。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值