已被阅读 2078 次 | 文章分类:OpenLayers | 2021-11-16 00:18
饼状图结合地图,将可视化数据跟空间信息有效结合,更加直观;饼状图适合对不同区域相同因素做对比分析的效果
1 实现效果
2 实现原理
完成这个效果,需要对openlayers、echarts有相对的认识,特别是echarts中option的应用
在三个不同的位置(经纬度坐标)处,实现三个饼状图即可;然后通过 echartslayer.appendTo(map)方式跟openlayers关联起来,核心就是olecharts将echarts转换成了openlayers支持的图层
3 全部代码
<!DOCTYPE html>
<html>
<head>
<title>饼状图</title>
<link rel="stylesheet" href="./data/ol.css" type="text/css" />
<script src="./data/ol-debug.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.js"></script>
<script src="https://unpkg.com/ol-echarts/dist/ol-echarts.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
var esriMapLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
}),
title:"ESRI影像图"
})
var map = new ol.Map({
target: "map",
layers: [esriMapLayer],
view: new ol.View({
center: ol.proj.fromLonLat([108.18095703125005, 34.34141675361363]),
projection: "EPSG:3857",
zoom: 5
})
})
var echartslayer = new EChartsLayer({
tooltip: {
trigger: "item",
formatter: "{a} <br />{b} : {c} ({d}%)"
},
legend: {
orient: "vertical",
left: "right",
data: ["学校", "医院", "公园", "5A景点", "诊所"]
},
series: [
{
name: "基本类型",
type: "pie",
radius: "30",
coordinates: [110.53450137499999, 33.44104525],
data: [
{ value: 335, name: "学校" },
{ value: 310, name: "医院" },
{ value: 234, name: "公园" },
{ value: 135, name: "5A景点" },
{ value: 1548, name: "诊所" }
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
},
{
name: "基本类型",
type: "pie",
radius: "30",
coordinates: [113.53450137499999, 34.44104525],
data: [
{ value: 335, name: "学校" },
{ value: 310, name: "医院" },
{ value: 234, name: "公园" },
{ value: 135, name: "5A景点" },
{ value: 1548, name: "诊所" }
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
},
{
name: "基本类型",
type: "pie",
radius: "30",
coordinates: [110.53450137499999, 38.44104525],
data: [
{ value: 335, name: "学校" },
{ value: 310, name: "医院" },
{ value: 234, name: "公园" },
{ value: 135, name: "5A景点" },
{ value: 1548, name: "诊所" }
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
}
]
})
echartslayer.appendTo(map)
</script>
</body>
</html>
QQ:3410192267 | 技术支持 微信:popstarqqsmall
Copyright ©2017 xiaobaigis.com . 版权所有 鲁ICP备17027716号