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;"></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.ida.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]}
}