layui 显示饼图_OpenLayers在地图上显示统计图，饼图线状图柱状图，修复统计图跳动的问题...

环境介绍

Openlayers

ol.js

v5.3.0

Highcharts

highcharts.js

v7.0.1

jquery

jquery-3.3.1.js

v3.3.1

显示效果

地图放大缩小对统计图的大小无影响

以饼状图为例

1、添加地图，并渲染统计图所在的点位，

vector是渲染feature需要用的图层，一定要保证在所有图层的最前方，否则渲染的feature会被遮盖，(地图量算时由于这个问题搞了一上午)

sourceMeasure = new ol.source.Vector({ wrapX: false });

vector = new ol.layer.Vector({

source: sourceMeasure,

style: new ol.style.Style({

fill: new ol.style.Fill({

color: 'rgba(255, 255, 0, 0.2)'

}),

stroke: new ol.style.Stroke({

color: '#ffcc33',

width: 2

}),

image: new ol.style.Circle({

radius: 7,

fill: new ol.style.Fill({

color: '#ffaa33'

})

})

})

});

map = new ol.Map({

controls: ol.control.defaults({

attribution: false

}),

target: 'map',

layers: [

new ol.layer.Tile({

source: new ol.source.OSM()

}),

vector

],

view: new ol.View({

projection: 'EPSG:3857',

center: ol.proj.transform([121, 37], 'EPSG:4326', 'EPSG:3857'),

//center: [121, 37],

zoom: 6

})

});

DrawPoint();

2、画点的方法

function DrawPoint() {

for (var i = 0; i < dataPie.length; i++) {

var d = dataPie[i];

var pt = ol.proj.transform([d.x, d.y], 'EPSG:4326', 'EPSG:3857');

var point = new ol.geom.Point(pt);

var feature = new ol.Feature(point);

sourceMeasure.addFeature(feature);

}

}

3、添加统计图

下面是原始的方法，可以显示统计图，但是初始位置不对，但是稍微拖动下地图，位置又跳到对的位置了，没找到问题，换成了后面的方法2

//方法1

//$("#addPieChart").on("click", function () {

// clearChartOverlay();

// for (var i = 0; i < dataPie.length; i++) {

// var d = dataPie[i];

// var pt = ol.proj.transform([d.x, d.y], 'EPSG:4326', 'EPSG:3857');

// var domid = "chart" + guid();

// $("#chart").append("

// var chart = new ol.Overlay({

// id: domid,

// position: pt,

// positioning: "bottom-center",

// element: document.getElementById(domid),

// offset: [0, 18],

// stopEvent: false //overlay也支持滚珠放大缩小

// });

// map.addOverlay(chart);

// addPieChart(domid, d, 100);

// overlayId.push(domid);

// }

//});

可能是因为对Overlay的element做了设置解决的这个问题，比较玄学

//方法2

$("#addPieChart").on("click", function () {

clearChartOverlay();

for (var i = 0; i < dataPie.length; i++) {

var d = dataPie[i];

var pt = ol.proj.transform([d.x, d.y], 'EPSG:4326', 'EPSG:3857');

var domid = "chart" + guid();

$("#chart").append("

addPieChart(domid, d, 100);

var chart = new ol.Overlay({

id: domid,

element: document.getElementById(domid),

positioning: "bottom-center", //统计图和渲染点位的位置关系

offset: [0, 18],//如果统计图相对于点位又偏移，可以通过此属性将统计图移回来

stopEvent: false //overlay也支持滚珠放大缩小

});

map.addOverlay(chart);

var element = chart.getElement();

chart.setPosition(pt);

//使用下面的方法显示Overlay，可避免初始位置不对，拖动一下地图跳动的问题

$(element).popover({

placement: 'top',

animation: false

});

$(element).popover('show'