【GIS效果:饼状图】openlayers+ol3Echarts实现分类饼状图

已被阅读 2289 次 | 文章分类:OpenLayers | 2021-11-16 00:18

饼状图结合地图，将可视化数据跟空间信息有效结合，更加直观；饼状图适合对不同区域相同因素做对比分析的效果

1 实现效果

小白GIS

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>

上一篇:ArcGIS API For JavaScrip入门 (1)-构建第一个应用

下一篇:【GIS效果:迁徙图】openlayers+ol3Echarts实现飞机迁徙图

浏览热榜: