echarts地图

function renderItem(params, api) {
var context = params.context;
var lngIndex = api.value(0);
var latIndex = api.value(1);
var coordLeftTop = [
+(latExtent[0] + lngIndex * cellSizeCoord[0]).toFixed(6),
+(lngExtent[0] + latIndex * cellSizeCoord[1]).toFixed(6)
];
var pointLeftTop = getCoord(params, api, lngIndex, latIndex);
var pointRightBottom = getCoord(params, api, lngIndex + 1, latIndex + 1);

return {
    type: 'rect',
    shape: {
        x: pointLeftTop[0],
        y: pointLeftTop[1],
        width: pointRightBottom[0] - pointLeftTop[0],
        height: pointRightBottom[1] - pointLeftTop[1]
    },
    style: api.style({
        stroke: 'rgba(0,0,0,0.1)'
    }),
    styleEmphasis: api.styleEmphasis()
};

}

function getCoord(params, api, lngIndex, latIndex) {
var coords = params.context.coords || (params.context.coords = []);
var key = lngIndex + ‘-’ + latIndex;

// bmap returns point in integer, which makes cell width unstable.
// So we have to use right bottom point.

return coords[key] || (coords[key] = api.coord([
    +(latExtent[0] + lngIndex * cellSizeCoord[0]).toFixed(6),
    +(lngExtent[0] + latIndex * cellSizeCoord[1]).toFixed(6)
]));

}

option = {
tooltip: {},
visualMap: {
type: ‘piecewise’,
inverse: true,
top: 10,
left: 10,
pieces: [{
value: 0, color: COLORS[0]
}, {
value: 1, color: COLORS[1]
}, {
value: 2, color: COLORS[2]
}, {
value: 3, color: COLORS[3]
}, {
value: 4, color: COLORS[4]
}, {
value: 5, color: COLORS[5]
}, {
value: 6, color: COLORS[6]
}],
borderColor: ‘#ccc’,
borderWidth: 2,
backgroundColor: ‘#eee’,
dimension: 2,
inRange: {
color: COLORS,
opacity: 0.4
}
},
series: [
{
type: ‘custom’,
coordinateSystem: ‘bmap’,
renderItem: renderItem,
animation: false,
itemStyle: {
emphasis: {
color: ‘yellow’
}
},
encode: {
tooltip: 2
},
data: data
}
],
bmap: {
center: [121.394431, 31.121992],
zoom: 16,
roam: true,
mapStyle: {
styleJson: [ {
“featureType”: “water”,
“elementType”: “all”,
“stylers”: {
“color”: “#72b8fe”
}
},
{
“featureType”: “road”,
“elementType”: “geometry.fill”,
“stylers”: {
“color”: “#ffffff”
}
},
{
“featureType”: “road”,
“elementType”: “geometry.stroke”,
“stylers”: {
“color”: “#bababa”
}
},
{
“featureType”: “road”,
“elementType”: “labels.text.fill”,
“stylers”: {
“color”: “#767676”
}
},
{
“featureType”: “road”,
“elementType”: “labels.text.stroke”,
“stylers”: {
“color”: “#ffffff”
}
}]
}
}
};;
if (option && typeof option === “object”) {
myChart.setOption(option, true);
var bmap = myChart.getModel().getComponent(‘bmap’).getBMap();
//bmap.addEventListener(“tilesloaded”,function(){hideLogo();});
addDistrict(“闵行区”,bmap)
}

/**

• 添加行政区划

• @param {} districtName 行政区划名

• @returns 无返回值
  */
  function addDistrict(districtName,map){
  var bdary = new BMap.Boundary();
  bdary.get(districtName, function(rs){ //获取行政区域
  var count = rs.boundaries.length; //行政区域的点有多少个
  if (count === 0) {
  layer.msg(“行政区域加载失败!”,{icon:5});
  return;
  }
  for(var i = 0; i < count; i++){
  blist.push({ points: rs.boundaries[i], name: districtName });
  }

   drawBoundary(map);
  

  });
  }

//画出边界
function drawBoundary(map){
var boundaryOptions = mapOptions.boundaryOptions;
var fillColor = ‘#E0E0E0’;
if(boundaryOptions){
if(boundaryOptions.fillColor && boundaryOptions.fillColor!=’’ && boundaryOptions.fillColor!= undefined){
fillColor = boundaryOptions.fillColor;
}
}
//包含所有区域的点数组
var pointArray = [];
/*画遮蔽层的相关方法
思路: 首先在中国地图最外画一圈，圈住理论上所有的中国领土，然后再将每个闭合区域合并进来，并全部连到西北角。
* 这样就做出了一个经过多次西北角的闭合多边形/
//定义中国东南西北端点，作为第一层
var pNW = { lat: 59.0, lng: 73.0 }
var pNE = { lat: 59.0, lng: 136.0 }
var pSE = { lat: 3.0, lng: 136.0 }
var pSW = { lat: 3.0, lng: 73.0 }
//向数组中添加一次闭合多边形，并将西北角再加一次作为之后画闭合区域的起点
var pArray = [];
pArray.push(pNW);
pArray.push(pSW);
pArray.push(pSE);
pArray.push(pNE);
pArray.push(pNW);
//循环添加各闭合区域
for (var i = 0; i < blist.length; i++) {
//添加多边形层并显示
var ply = new BMap.Polygon(blist[i].points, { strokeWeight: 5, strokeColor: ‘black’, fillColor: “” }); //建立多边形覆盖物

    ply.name = blist[i].name;
    map.addOverlay(ply);

    //将点增加到视野范围内
    var path = ply.getPath();
    pointArray = pointArray.concat(path);
    //将闭合区域加到遮蔽层上，每次添加完后要再加一次西北角作为下次添加的起点和最后一次的终点
    pArray = pArray.concat(path);
    pArray.push(pArray[0]);
}
//限定显示区域，需要引用api库
//var boundply = new BMap.Polygon(pointArray);
//BMapLib.AreaRestriction.setBounds(map, boundply.getBounds());
map.setViewport(pointArray);    //调整视野

//添加遮蔽层
//enableMassClear:false 调用map.clearOverlays不清除此覆盖物
var plyall = new BMap.Polygon(pArray, { strokeOpacity: 0.0000001, strokeColor: "#000000", strokeWeight: 0.00001, fillColor: fillColor, fillOpacity: 0.7,enableMassClear:false }); //建立多边形覆盖物
map.addOverlay(plyall);

//释放变量，节约性能
blist = [];

}