**项目需求:**根据后台数据,生成pie,并绘制在地图上,点击pie时实现点击事件。
一开始在div内生成echarts饼图,再通过经纬度将div放在指定位置,但是div的范围内地图自身的滚轮和双击事件失效,几经周折,找到了另一种解决方案:将div内的echarts饼图以图片的形式输出,隐藏掉当前div,再将图片通过经纬度绘制在地图上。当点击时,通过hitTest()判断是点击在地图上还是图片上,以此来实现图片的点击事件。
首先是通过echarts生成饼图并输出图片路径:
var toolTipId = _self.idName.toolTip + i;//echarts的容器id
$('#' + toolTipId).removeClass('hide');
var _chart = echarts.init(document.getElementById(toolTipId));
var option = {
color: infoConfig.color,
series: [
{
hoverAnimation: false,
type: 'pie',
radius: '55%',
data: data,
labelLine: {
normal: {
show: false
}
}
}
],
animation: false//生成图片的话,这个一定要设置为false
};
_chart.setOption(option);
//将生成的pie图输出为图片,echarts提供的方法
var img = new Image();
img.src = _chart.getDataURL({
pixelRatio: 2,
});
//隐藏掉原来的div
$('#' + toolTipId).addClass('hide');
生成图片后可以拿到图片的src,然后将图片通过PictureMarkerSymbol()绘制在地图上:
//获取图片即将绘制的位置(经纬度)
var center = _self.items[i].portalItem.extent.center;
var wkid = center.spatialReference.wkid;
var geometry = new Point({
longitude: center.x,
latitude: center.y,
spatialReference: wkid
});
//将图片绘制在指定位置
var symbol = new PictureMarkerSymbol(imgPath, 50, 50);
var polylineGraphic = new Graphic({
type: "picture-marker",
geometry: geometry,
symbol: symbol
});
_self.view.graphics.add(polylineGraphic);
效果如下:
图片的点击事件:
_self.view.on("click", function (event) {
_self.view.hitTest(event)
.then(function (r) {
var results = r.results;
if (results.length == 1) {
console.log('点在image上')
}
} else if (results.length == 0) {
console.log('点在地图上')
}
});
})