在地图上--给经纬度--展示任何一个点(可以展示地名)

简介: 在地图上--给经纬度--展示任何一个点(可以展示地名)

//展示出这个点的地名(重点)


源地址 https://www.echartsjs.com/gallery/editor.html?c=scatter-map


var geoCoordMap = {
    "海门":[121.15,31.89],
    "鄂尔多斯":[109.781327,39.608266],
    "岳阳":[113.09,29.37],
    "长沙":[113,28.21],
    "衢州":[118.88,28.97],
    "廊坊":[116.7,39.53],
    "菏泽":[115.480656,35.23375],
    "合肥":[117.27,31.86],
    "武汉":[114.31,30.52],
    "大庆":[125.03,46.58]
};
var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
            });
        }
    }
    return res;
};
option = {
    backgroundColor: '#404a59',
    title: {
        text: '全国主要城市空气质量',
        subtext: 'data from PM25.in',
        sublink: 'http://www.pm25.in',
        x:'center',
        textStyle: {
            color: '#fff'
        }
    },
    tooltip: {
        trigger: 'item',
        formatter: function (params) {
            return params.name;
        }
    },
    legend: {
        orient: 'vertical',
        y: 'bottom',
        x:'right',
        data:['pm2.5'],
        textStyle: {
            color: '#fff'
        }
    },
//visualMap 是视觉映射组件 控制图元  小圆点
//ymbol: 图元的图形类别。   symbolSize: 图元的大小。  color: 图元的颜色。  
//opacity: 图元以及其附属物(如文字标签)的透明度。
    visualMap: {
        min: 0,
        max: 200,
        calculable: true,
        inRange: {
            color: ['#50a3ba', '#eac736', '#d94e5d']
        },
        textStyle: {
            color: '#fff'  //hover上去  字体的颜色
        }
    },
 //geo地理坐标系组件  支持在地理坐标系上绘制散点图,线集。
    geo: {
        map: 'china',
        label: {
            emphasis: {
                show: false  //光标放在未显示地名的区域      是否显示该地名    true显示  false不显示
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: 'pm2.5',
            type: 'scatter',
            color:"yellow",//更改小圆点的颜色
            coordinateSystem: 'geo',
            data: convertData([
                {name: "海门"},
                {name: "鄂尔多斯"},
                {name: "大庆"},
            ]),
          symbolSize: 12,//控制小圆点的大小
            //展示出这个点的地名(重点)
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'bottom',
                    color: '#fff',
                    show: true
                }
            },
        }
    ]
}


1425695-20190902220801885-1246852187.png

相关文章
|
Kubernetes Cloud Native 数据可视化
【云原生】Rancher部署k8s集群流程—2023.03
【云原生】Rancher部署k8s集群流程—2023.03
940 0
|
存储 网络协议 定位技术
高德地图开放平台IP地位接口使用说明
高德地图开放平台IP地位接口使用说明
2019 0
|
存储 缓存 JavaScript
不要过度封装!封装一个最简单的Axios!
前言 axios 是目前最优秀的 HTTP 请求库之一,虽然 axios 已经封装的非常好了,我们可以直接拿过来用。但是在实际的项目中,我们可能还需要对 axios 在封装一下,以便我们更好的管理项目和各个借口。 但是,目前网上有特别多的针对于 axios 在项目中的封装。不得不说,很多大佬封装得非常全面,方方面面都考虑到了。但是我们的每个真的都需要那些封装吗?显然不是的,网上的很多封装其实都显得有点过度封装了! 本篇文章实现最简单 Axios 封装,让小伙伴们扩展起来容易一些。
5558 0
不要过度封装!封装一个最简单的Axios!
|
Linux 数据安全/隐私保护
Centos安装桌面系统并设置成默认启动
Centos安装桌面系统并设置成默认启动
254 0
|
9月前
|
编译器 Linux C语言
【Linux工具篇】编译器gcc/g++
【Linux工具篇】编译器gcc/g++
122 1
|
9月前
|
监控 JavaScript 前端开发
【TypeScript技术专栏】TypeScript的单元测试与集成测试
【4月更文挑战第30天】本文讨论了在TypeScript项目中实施单元测试和集成测试的重要性。单元测试专注于验证单个函数、类或模块的行为,而集成测试关注不同组件的协作。选用合适的测试框架(如Jest、Mocha),配置测试环境,编写测试用例,并利用模拟和存根进行隔离是关键。集成测试则涉及组件间的交互,需定义测试范围,设置测试数据并解决可能出现的集成问题。将这些测试整合到CI/CD流程中,能确保代码质量和快速响应变化。
250 0
|
9月前
|
Linux 开发者 iOS开发
|
小程序 物联网 定位技术
阿里云+微信小程序+GPS定位
阿里云物联网板块是一个功能非常强大的板块,而且通俗易懂,非常容易上手,比华为的要稍微容易上手一些。本次,小编通过阿里云物联网平台,将SIM800M32的GPS经纬度坐标发送到阿里云平台,并通过规则引擎转发数据至微信小程序,然后在地图上显示位置。
4657 0
|
机器学习/深度学习
基于lightgbm的销售预测
基于lightgbm的销售预测
452 0

热门文章

最新文章