OpenLayers在地图上显示统计图，饼图线状图柱状图，修复统计图跳动的问题
程序员文章站
2022-03-09 12:48:37
显示效果 地图放大缩小对统计图的大小无影响 以饼状图为例 1、添加地图，并渲染统计图所在的点位， 2、画点的方法 3、添加统计图 下面是原始的方法，可以显示统计图，但是初始位置不对，但是稍微拖动下地图，位置又跳到对的位置了，没找到问题，换成了后面的方法2 可能是因为对Overlay的element做 ......
| 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("<div id='" + domid + "'></div>");
// 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("<div id='" + domid + "'></div>");
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');
overlayid.push(domid);
}
});
移除所有用来显示统计图的overlay，和饼图的方法，highcharts里很多，想要别的风格可以去看highcharts的api
/**
* 移除统计图所使用的overlay
* */
function clearchartoverlay() {
for (var i = 0; i < overlayid.length; i++) {
map.removeoverlay(map.getoverlaybyid(overlayid[i]));
}
}
function addpiechart(domid, data, size) {
$('#' + domid).highcharts({
chart: {
backgroundcolor: 'rgba(255, 255, 255, 0)',
plotbordercolor: null,
plotbackgroundcolor: null,
plotbackgroundimage: null,
plotborderwidth: null,
plotshadow: false,
width: size,
height: size
},
tooltip: {
pointformat: '<b>{point.percentage:.1f}%</b>'
},
credits: {
enabled: false
},
title: {
text: ''
},
plotoptions: {
pie: {
datalabels: {
enabled: false
}
}
},
series: [{
type: 'pie',
name: data.name,
data: data.data
}]
});
}
4、差不多就这么多，线状图和柱状图都类似，下面是完成代码
html
@{
viewbag.title = "statisticalchart";
layout = "~/views/shared/_layout.cshtml";
}
@styles.render("~/content/openlayers")
<div id="map" class="map">
</div>
<div class="tool">
<button id="addpiechart">添加饼图</button>
<button id="addlinechart">添加线状图</button>
<button id="addcolumnchart">添加柱状图</button>
</div>
<div style="display: none;" id="chart">
</div>
@scripts.render("~/bundles/openlayers")
<script src="~/scripts/openlayers/mapstatisticalchart.js"></script>
<script src="~/scripts/highcharts/highcharts.js"></script>
<script type="text/javascript">
$(document).ready(function () {
init();
});
</script>
js
/*
*地图上显示统计图
*/
//地图渲染的两个对象
var vector;
var sourcemeasure;
//x,y表示渲染的位置，如果是点图层好说，如果是面或者线，需要获取中心点
var overlayid = [];
var datapie = [{
name: "乌鲁木齐", x: 87.5758285931, y: 43.7822116460, data: [
{
name: '男',
y: 40.0,
color: "#5ab1ef"
}, {
name: '女',
y: 60.0,
color: "#d87a80"
}
]
},
{
name: "拉萨", x: 91.1629975040, y: 29.7104204643, data: [
{
name: '男',
y: 45.0,
color: "#5ab1ef"
}, {
name: '女',
y: 55.0,
color: "#d87a80"
}
]
},
{
name: "北京", x: 116.4575803581078, y: 40.04054437977018, data: [
{
name: '男',
y: 35.0,
color: "#5ab1ef"
}, {
name: '女',
y: 65.0,
color: "#d87a80"
}
]
},
{
name: "兰州", x: 103.584297498, y: 36.1190864503, data: [
{
name: '男',
y: 44.0,
color: "#5ab1ef"
}, {
name: '女',
y: 56.0,
color: "#d87a80"
}
]
}];
var map;
function init() {
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();
$("#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("<div id='" + domid + "'></div>");
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');
overlayid.push(domid);
}
});
$("#addlinechart").on("click", function () {
clearchartoverlay();
for (var i = 0; i < dataline.length; i++) {
var d = dataline[i];
var pt = ol.proj.transform([d.x, d.y], 'epsg:4326', 'epsg:3857');
var domid = "chart" + guid();
//$("#chart").append("<div id='" + domid + "'></div>");
//var chart = new ol.overlay({
// id: domid,
// position: pt,
// positioning: "bottom-center",
// element: document.getelementbyid(domid),
// stopevent: false //overlay也支持滚珠放大缩小
//});
//map.addoverlay(chart);
//addlinechart(domid, d.data, 200, 150);
//overlayid.push(domid);
$("#chart").append("<div id='" + domid + "'></div>");
var chart = new ol.overlay({
id: domid,
positioning: "bottom-center",
element: document.getelementbyid(domid),
stopevent: false //overlay也支持滚珠放大缩小
});
map.addoverlay(chart);
addlinechart(domid, d.data, 200, 150);
var element = chart.getelement();
chart.setposition(pt);
//使用下面的方法显示overlay，可避免初始位置不对，拖动一下地图跳动的问题
$(element).popover({
placement: 'top',
animation: false
});
$(element).popover('show');
overlayid.push(domid);
}
});
$("#addcolumnchart").on("click", function () {
clearchartoverlay();
for (var i = 0; i < datacolumn.length; i++) {
var d = datacolumn[i];
var pt = ol.proj.transform([d.x, d.y], 'epsg:4326', 'epsg:3857');
var domid = "chart" + guid();
$("#chart").append("<div id='" + domid + "'></div>");
var chart = new ol.overlay({
id: domid,
positioning: "bottom-center",
element: document.getelementbyid(domid),
offset: [0, 5],
stopevent: false //overlay也支持滚珠放大缩小
});
map.addoverlay(chart);
addcolumnchart(domid, d.data, 80, 80);
var element = chart.getelement();
chart.setposition(pt);
//使用下面的方法显示overlay，可避免初始位置不对，拖动一下地图跳动的问题
$(element).popover({
placement: 'top',
animation: false
});
$(element).popover('show');
overlayid.push(domid);
}
});
}
/**
* 移除统计图所使用的overlay
* */
function clearchartoverlay() {
for (var i = 0; i < overlayid.length; i++) {
map.removeoverlay(map.getoverlaybyid(overlayid[i]));
}
}
function addpiechart(domid, data, size) {
$('#' + domid).highcharts({
chart: {
backgroundcolor: 'rgba(255, 255, 255, 0)',
plotbordercolor: null,
plotbackgroundcolor: null,
plotbackgroundimage: null,
plotborderwidth: null,
plotshadow: false,
width: size,
height: size
},
tooltip: {
pointformat: '<b>{point.percentage:.1f}%</b>'
},
credits: {
enabled: false
},
title: {
text: ''
},
plotoptions: {
pie: {
datalabels: {
enabled: false
}
}
},
series: [{
type: 'pie',
name: data.name,
data: data.data
}]
});
}
var dataline = [{
name: "乌鲁木齐", x: 87.5758285931, y: 43.7822116460, data: [
{
name: '安装，实施人员',
series: [
{ x: 2010, y: 1234 },
{ x: 2011, y: 1234 }
],
color: "#5ab1ef"
}, {
name: '工人',
series: [
{ x: 2010, y: 245 },
{ x: 2011, y: 3454 }
],
color: "#d87a80"
}
]
},
{
name: "拉萨", x: 91.1629975040, y: 29.7104204643, data: [
{
name: '安装，实施人员',
series: [
{ x: 2010, y: 1234 },
{ x: 2011, y: 124 },
{ x: 2012, y: 0 }
],
color: "#5ab1ef"
}, {
name: '工人',
series: [
{ x: 2010, y: 245 },
{ x: 2011, y: 0 },
{ x: 2012, y: 3454 }
],
color: "#d87a80"
}
]
}];
function addlinechart(domid, data, width, height) {
var categoriesx = [];
var seriesvalue = [];
for (var i = 0; i < data.length; i++) {
var value = [];
for (var j = 0; j < data[i].series.length; j++) {
categoriesx.push(data[i].series[j].x);
value.push(data[i].series[j].y);
}
seriesvalue.push({ "name": data[i].name, "data": value });
}
$('#' + domid).highcharts({
chart: {
backgroundcolor: 'rgba(255, 255, 255, 0.8)',
borderradius: 20,
plotbordercolor: null,
plotbackgroundcolor: null,
plotbackgroundimage: null,
plotborderwidth: null,
plotshadow: false,
width: width,
height: height
},
credits: {
enabled: false
},
title: {
text: ''
},
yaxis: {
visible: false,
title: {
text: ''
}
},
xaxis: {
categories: categoriesx,
crosshair: true
},
legend: {
enabled: false
},
plotoptions: {
series: {
label: {
connectorallowed: false
}
},
line: {
datalabels: {
enabled: true,
formatter: function () {
return '<b>' + this.point.y + '</b><br>';
}
}
}
},
series: seriesvalue,
responsive: {
rules: [{
condition: {
maxwidth: 500
},
chartoptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalalign: 'bottom'
}
}
}]
}
});
}
var datacolumn = [{
name: "乌鲁木齐", x: 87.5758285931, y: 43.7822116460, data: [
{
name: '安装，实施人员',
series: [
{ x: 2011, y: 1234 }
],
color: "#5ab1ef"
}, {
name: '工人',
series: [
{ x: 2011, y: 3454 }
],
color: "#d87a80"
}
]
},
{
name: "拉萨", x: 91.1629975040, y: 29.7104204643, data: [
{
name: '安装，实施人员',
series: [
{ x: 2012, y: 123 }
],
color: "#5ab1ef"
}, {
name: '工人',
series: [
{ x: 2012, y: 3454 }
],
color: "#d87a80"
}
]
}, {
name: "北京", x: 116.4575803581078, y: 40.04054437977018, data: [
{
name: '安装，实施人员',
series: [
{ x: 2014, y: 252 }
],
color: "#5ab1ef"
}, {
name: '工人',
series: [
{ x: 2014, y: 324 }
],
color: "#d87a80"
}
]
},
{
name: "兰州", x: 103.584297498, y: 36.1190864503, data: [
{
name: '安装，实施人员',
series: [
{ x: 2013, y: 2341 }
],
color: "#5ab1ef"
}, {
name: '工人',
series: [
{ x: 2013, y: 2341 }
],
color: "#d87a80"
}
]
}];
function addcolumnchart(domid, data, width, height) {
var categoriesx = [];
var seriesvalue = [];
for (var i = 0; i < data.length; i++) {
var value = [];
for (var j = 0; j < data[i].series.length; j++) {
categoriesx.push(data[i].series[j].x);
value.push(data[i].series[j].y);
}
seriesvalue.push({ "name": data[i].name, "data": value });
}
$('#' + domid).highcharts({
chart: {
backgroundcolor: 'rgba(255, 255, 255, 0)',
borderradius: 20,
plotbordercolor: null,
plotbackgroundcolor: null,
plotbackgroundimage: null,
plotborderwidth: null,
plotshadow: false,
width: width,
height: height,
type: 'column'
},
credits: {
enabled: false
},
title: {
text: ''
},
yaxis: {
visible: false,
title: {
text: ''
}
},
xaxis: {
visible: false,
categories: categoriesx,
crosshair: true
},
legend: {
enabled: false
},
plotoptions: {
series: {
label: {
connectorallowed: false
}
},
line: {
datalabels: {
enabled: true,
formatter: function () {
return '<b>' + this.point.y + '</b><br>';
}
}
}
},
series: seriesvalue,
responsive: {
rules: [{
condition: {
maxwidth: 500
},
chartoptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalalign: 'bottom'
}
}
}]
}
});
}
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);
}
}
引用的资料包括：https://blog.csdn.net/gisshixisheng/article/details/50926948，https://blog.csdn.net/henrystern/article/details/81149015