ArcGIS ECharts 插件使用教程

2024-09-15 08:03:44作者：田桥桑Industrious

arcgis-echarts

A plugin for ArcGIS JS API to load echarts map and Make big data visualization easier.

1. 项目目录结构及介绍

arcgis-echarts/
├── demo/
│   └── index.html
├── lib/
│   └── EchartsLayer.js
├── src/
│   └── EchartsLayer.js
├── .gitignore
├── LICENSE
├── README.md
└── package.json

demo/: 包含示例文件 index.html，展示了如何在地图上使用 ECharts 插件。
lib/: 包含编译后的 ECharts 插件文件 EchartsLayer.js。
src/: 包含源代码文件 EchartsLayer.js，是插件的核心实现。
.gitignore: Git 忽略文件配置。
LICENSE: 项目许可证文件，采用 MIT 许可证。
README.md: 项目说明文件，包含项目的基本介绍和使用方法。
package.json: 项目的配置文件，包含项目的基本信息、依赖和脚本。

2. 项目的启动文件介绍

项目的启动文件是 demo/index.html，它展示了如何在 ArcGIS JS API 地图上使用 ECharts 插件。以下是启动文件的主要内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ArcGIS ECharts Demo</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css">
    <style>
        body { margin: 0 !important; }
        #mapview { position: absolute; width: 100%; height: 100%; }
    </style>
</head>
<body>
    <div id="mapview"></div>
    <script src="https://js.arcgis.com/4.14/"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script src="../lib/EchartsLayer.js"></script>
    <script>
        require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {
            var map = new Map({
                basemap: "streets"
            });
            var view = new MapView({
                container: "mapview",
                map: map,
                zoom: 8,
                center: [104.072043, 30.663724] // 地图中心点为成都
            });

            view.when(function() {
                var overlay = new EchartsLayer(map, echarts);
                var chartsContainer = overlay.getEchartsContainer();
                var myChart = overlay.initECharts(chartsContainer);

                view.on('load', function() {
                    var option = {
                        // ECharts 配置项
                    };
                    overlay.setOption(option);
                });
            });
        });
    </script>
</body>
</html>

主要功能：

初始化 ArcGIS JS API 地图。
加载 ECharts 插件。
在地图上添加 ECharts 图表。

3. 项目的配置文件介绍

项目的配置文件是 package.json，它包含了项目的基本信息、依赖和脚本。以下是配置文件的主要内容：

{
  "name": "arcgis-echarts",
  "version": "0.1.1",
  "description": "A plugin for ArcGIS JS API to load echarts map and Make big data visualization easier",
  "main": "src/EchartsLayer.js",
  "scripts": {
    "start": "http-server"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/wandergis/arcgis-echarts.git"
  },
  "keywords": [
    "ArcGIS",
    "javascript",
    "esri",
    "echarts",
    "visualization"
  ],
  "author": "wandergis",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/wandergis/arcgis-echarts/issues"
  },
  "homepage": "https://github.com/wandergis/arcgis-echarts#readme"
}