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

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

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


源地址 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

相关文章
|
定位技术
Echarts使用geojson地理坐标地图地名label标签位置不居中调整的解决方案
Echarts使用geojson地理坐标地图地名label标签位置不居中调整的解决方案
340 0
|
定位技术
Threejs实现绘制地球,地理位置标注、经纬度转换世界坐标threejs坐标
Threejs实现绘制地球,地理位置标注、经纬度转换世界坐标threejs坐标
1477 0
Threejs实现绘制地球,地理位置标注、经纬度转换世界坐标threejs坐标
|
数据可视化 搜索推荐 JavaScript
数据可视化大屏百度地图区域掩膜MapMask实现地图指定区域非省市县行政区显示的实战案例解析(JavaScript API GL、个性化地图定制、指定区域经纬度拾取转化)
数据可视化大屏百度地图区域掩膜MapMask实现地图指定区域非省市县行政区显示的实战案例解析(JavaScript API GL、个性化地图定制、指定区域经纬度拾取转化)
922 0
|
9天前
|
数据可视化 定位技术 Python
Folium在地图上展示数据
【10月更文挑战第17天】本文介绍了如何使用Python中的Folium库进行地理可视化。Folium是一个基于Leaflet.js的库,可以轻松创建交互式地图。文章从安装Folium开始,逐步讲解了如何创建地图、添加标记点、展示热力图、自定义图层样式、绘制形状、添加图例和文本标签等内容。通过这些示例,读者可以学会如何利用Folium进行地理数据的可视化,从而更好地理解和展示数据的空间分布。
22 4
|
4月前
|
定位技术
eharts 中国地图添加城市(散点图实现,含获取城市坐标、图片转base64、自定义散点样式)
eharts 中国地图添加城市(散点图实现,含获取城市坐标、图片转base64、自定义散点样式)
299 9
|
数据可视化 前端开发 搜索推荐
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
276 0
|
定位技术 C# Windows
C#编程学习(05):使用webbroswer控件显示地图并标注点位坐标
C#编程学习(05):使用webbroswer控件显示地图并标注点位坐标
|
JSON 定位技术 API
百度地图高级开发:获取某范围半径圆形区域检索覆盖物内的所有标注的解决方案(1)
百度地图高级开发:获取某范围半径圆形区域检索覆盖物内的所有标注的解决方案(1)
275 0
|
定位技术
echarts. registerMap选项specialAreas将地图中的部分区域缩放到合适的位置,可以使得整个地图的显示更加好看
echarts. registerMap选项specialAreas将地图中的部分区域缩放到合适的位置,可以使得整个地图的显示更加好看
133 0
|
定位技术
百度拾取经纬度坐标转化的geojson数据偏离中心的解决方案
百度拾取经纬度坐标转化的geojson数据偏离中心的解决方案
148 0