echarts如何在json地图上设置多种颜色的点位和自定义背景弹出框

最新推荐文章于 2023-06-29 15:43:52 发布

置顶 javafg

最新推荐文章于 2023-06-29 15:43:52 发布

阅读量883

点赞数 1

分类专栏：地图应用文章标签： echarts 地图

本文链接：https://blog.csdn.net/qq_40136782/article/details/117776952

版权

地图应用专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果图
在这里插入图片描述

1.引入echarts.js和jquery.min.js文件

 <script type="text/javascript" src="/js/jquery.min.js"></script> 
<script type="text/javascript" src="/js/echarts.js">< /script >

2.html内容

<div id="main" style="height: 92%;width: 88%;padding: 0;"></div>

3.获取不同颜色点位的数组

var myChart = echarts.init(document.getElementById('main'));

var result= new Array();
var checked= new Array();
var noChecked= new Array();

function  loadData(){
	if(result.length!=0){
		result.length=0;
		noChecked.length=0;
		checked.length=0;
	}
	  var _url=path()+"/getArr.do";
	    $.ajax({
	        async: false,
	        type:'POST',
	        data:{},
	        url:_url,
	        dataType:'json',
	        success:function(data){
	        if(data!=null && data!=''){
                $.each(data,function(i,c) {
                    var a = new Object();
                    var b = [];
                    a.id= c.id
                    a.name = c.name;
                    var gg_pos = bd09togcj02(c.lon, c.lat)//将点位转化为地图坐标系
                    b[0] = gg_pos[0];
                    b[1] = gg_pos[1];
                    a.value = b;
                    if (i < 11) {
                        checked[i] = a//一种颜色的数组
                    } else {
                        noChecked[i - 1] = a//另外一种颜色的数组
                    }
                })
	        }
                result.push(checked)
                result.push(noChecked)
                loadJsonMap("zhejiang","浙江省")
	        },
	        error：function（）{ 
	        } 
	    }）；
}

4.加载json地图并自定义背景图片

function loadJsonMap(mapCode, mapName) {
	 var width=$('#main').width();
	 var width1=width*0.8;
	 var height=$('#main').height()*0.8;
	var data2 = result;
	var max = 0;
	console.log(result)
  $.getJSON('/js/china-main-city/' + mapCode + '.json', function (data) {//获取地图json数据
      //转为腾讯坐标系
      console.log(data.features[0].geometry.coordinates[0][0][0][0])
      var ps=data.features[0].geometry.coordinates[0][0][0];
      for(var j=0;j<ps.length;j++){
          var gg_pos = bd09togcj02(ps[j][0], ps[j][1])
          ps[j][0]=gg_pos[0]
          ps[j][1]=gg_pos[1]
      }
	     if (data) {
		     echarts.registerMap(mapName, data);
					  option = {
							tooltip: {
							    show:true,
								trigger: 'item',
								// formatter: '{b}',
                                extraCssText: "width:282px;height:250px;background: url(imagesSwyt/maptck.png) no-repeat;z-index:99",//设置弹窗的背景图片
                                position: function (pos, params, dom, rect, size) {
                                  var datas=params.data;
                                  var _html="";
                                    _html+="<div style='position: relative;width:260px;height:230px;'>"
                                    _html+="<h1 style='width:230px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;color: #fff;font-size: 18px;margin: 0px 0px 0px 22px;position: relative;height: 30px;top:20px;'>"+datas.name+"</h1>"
                                    _html+="</div></div></div>"
                                        $(dom).html(_html);//设置弹窗的内容
                                        
                                    var objs={left:pos[0]-(size.contentSize[0]/2),top:pos[1]-(size.contentSize[1])}
                                     return objs;//固定浮框的位置 显示在点位的正上方
                                },
                                triggerOn: 'click'//设置触发点位的方式为点击
                            },
							  geo: {
                                map: mapName,
                                left:"5%",
                                top:0,
                                width:width1,
                                height:height,
                                  hoverAnimation:false,
                                  avoidLabelOverlap: false,
                                  silent:true,//设置地图鼠标浮动上去不显示高亮选中
                                label: {
                                	normal: {
            							show: true,
            							 textStyle: {
                                             fontSize: 15,
                                             color: 'white'
                                         }
            						},
                                    emphasis: {
                                        show: true,
                                        textStyle: {
                                            fontSize: 15,
                                            color: 'white'
                                        }
                                    },
                                },
                                itemStyle:{
                                	   normal: {
                                           areaColor: '#096dd9'
                                       },
                                       emphasis: {
                                           areaColor: '#red'
                                       }
            					},
                            },
							    series : [
							          {
							                  name: 'noChecked',
							                  type: 'effectScatter',
									          coordinateSystem: 'geo',
                                          hoverAnimation:false,
                                          avoidLabelOverlap: false,
                                          emphasis: {
                                              itemStyle: {
                                                  areaColor: '#096dd9'
                                              }
                                          },
							                  data: data2[1],
							                  symbolSize: 8,
									            label: {
									                normal: {
									                    formatter: '{b}',
									                    position: 'right',
									                    show: false
									                }
									            },
									            itemStyle: {
									                normal: {
									                    color: '#83C686',
									                    shadowBlur: 5,
									                    shadowColor: '#fff'
									                }
									            },
							              },
							        {
							        	name: 'checked',
							            type: 'effectScatter',
							            coordinateSystem: 'geo',
                                        hoverAnimation:false,
                                        avoidLabelOverlap: false,
                                        emphasis: {

                                            itemStyle: {

                                                areaColor: '#096dd9'

                                            }

                                        },
							            data:data2[0],
							            symbolSize: 10,
							            label: {
							                normal: {
							                    formatter: '{b}',
							                    position: 'right',
							                    show: false
							                }
							            },
							            itemStyle: {
							                normal: {
							                    color: 'red',
							                    shadowBlur: 10,
							                    shadowColor: '#fff'
							                }
							            },
							            zlevel: 1
							        }

							    ]
							};

					 myChart.setOption(option); 
				 } else { 
		             alert('无法加载该地图'); 
				 } 
			}); 
}

坐标转换函数

/**
 * 百度坐标系 (BD-09) 与 火星坐标系 (GCJ-02)的转换
 * 即 百度 转 谷歌、高德
 * @param bd_lon
 * @param bd_lat
 * @returns {*[]}
 */
function bd09togcj02(bd_lon, bd_lat) {
    var x_pi = 3.14159265358979324 * 3000.0 / 180.0;
    var x = bd_lon - 0.0065;
    var y = bd_lat - 0.006;
    var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
    var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
    var gg_lng = z * Math.cos(theta);
    var gg_lat = z * Math.sin(theta);
    return [gg_lng, gg_lat]
}

/**
 * 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换
 * 即谷歌、高德 转 百度
 * @param lng
 * @param lat
 * @returns {*[]}
 */
function gcj02tobd09(lng, lat) {
    var z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * x_PI);
    var theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * x_PI);
    var bd_lng = z * Math.cos(theta) + 0.0065;
    var bd_lat = z * Math.sin(theta) + 0.006;
    return [bd_lng, bd_lat]
}
 
/**
 * WGS84转GCj02
 * @param lng
 * @param lat
 * @returns {*[]}
 */
function wgs84togcj02(lng, lat) {
    if (out_of_china(lng, lat)) {
        return [lng, lat]
    }
    else {
        var dlat = transformlat(lng - 105.0, lat - 35.0);
        var dlng = transformlng(lng - 105.0, lat - 35.0);
        var radlat = lat / 180.0 * PI;
        var magic = Math.sin(radlat);
        magic = 1 - ee * magic * magic;
        var sqrtmagic = Math.sqrt(magic);
        dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
        dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
        var mglat = lat + dlat;
        var mglng = lng + dlng;
        return [mglng, mglat]
    }
}
 
/**
 * GCJ02 转换为 WGS84
 * @param lng
 * @param lat
 * @returns {*[]}
 */
function gcj02towgs84(lng, lat) {
    if (out_of_china(lng, lat)) {
        return [lng, lat]
    }
    else {
        var dlat = transformlat(lng - 105.0, lat - 35.0);
        var dlng = transformlng(lng - 105.0, lat - 35.0);
        var radlat = lat / 180.0 * PI;
        var magic = Math.sin(radlat);
        magic = 1 - ee * magic * magic;
        var sqrtmagic = Math.sqrt(magic);
        dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
        dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
        mglat = lat + dlat;
        mglng = lng + dlng;
        return [lng * 2 - mglng, lat * 2 - mglat]
    }
}

javafg

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
echarts如何在json地图上设置多种颜色的点位和自定义背景弹出框

1.引入echarts.js和jquery.min.js文件<script type="text/javascript" src="/js/jquery.min.js"></script><script type="text/javascript" src="/js/echarts.js"></script>2.html内容 <div id="main" style="height: 92%;width: 88%;padding: 0;
复制链接

扫一扫