arcgis js 与 echarts 结合的小案例

最新推荐文章于 2024-07-07 10:08:32 发布

张玺文

最新推荐文章于 2024-07-07 10:08:32 发布

阅读量4.4k

点赞数 2

文章标签： arcgis echarts

本文链接：https://blog.csdn.net/weixin_42664991/article/details/82705020

版权

实现思路是采用arcgis 的 graphic 的InfoTemplate属性，把echarts集成到弹出气泡中，代码如下
test.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
        <title>Title</title>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
        <meta name="format-detection" content="telphone=no, email=no"/>
        <title>Arcgis Echarts</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
        <link rel="stylesheet" type="text/css"
              href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/>
        <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css">
        <script src="js/jquery.js"></script>
        <script src="js/json.js"></script>
        <script src="js/echarts.js"></script>
        <script src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script>
        <style>

        </style>
        <script>
            var map;
            $(document).ready(function () {
                q();
            })
            function q() {
                $.ajax({
                    url: "data/data.json",
                    type: "GET",
                    dataType: "json",
                    async: false,
                    success: function (data) {
                        require(["esri/map","esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/FeatureLayer",
                                "esri/tasks/QueryTask",
                                "esri/tasks/query",
                                "esri/symbols/SimpleLineSymbol",
                                "esri/symbols/SimpleFillSymbol",
                                "esri/InfoTemplate",
                                "esri/graphic",
                                "esri/layers/GraphicsLayer",
                                "dojo/_base/window",
                                "dojo/dom-construct",
                                "dojo/domReady!"
                                ],
                            function (Map, ArcGISDynamicMapServiceLayer,FeatureLayer,QueryTask, Query, SimpleLineSymbol,
                                      SimpleFillSymbol, InfoTemplate, graphic,GraphicsLayer, win,domConstruct) {
                                map = new Map("mapDiv",{
                                });
                                var layer = new ArcGISDynamicMapServiceLayer("http://47.93.189.151:6080/arcgis/rest/services/UPSSTEST/MapServer");
                                map.addLayer(layer);
                                var queryTask;
                                var query;
                                queryTask = new QueryTask("http://47.93.189.151:6080/arcgis/rest/services/UPSSTEST/MapServer/4");//定义查询参数对象
                                query = new Query();
                                query.where = "1=1";
                                query.outFields = ["*"];
                                query.returnGeometry = true;
                                queryTask.execute(query, showQueryResult);
                                var gLayer = new GraphicsLayer({
                                    id:"研究范围"
                                });
                                function showQueryResult(queryResult) {
                                    var sfs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                                        new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
                                            new dojo.Color([255,0,0]), 2),new dojo.Color([255,255,0,0.25])
                                    );
                                    if (queryResult.features.length >= 1) {
                                        for (var i = 0; i < queryResult.features.length; i++) {
                                            var graphic = queryResult.features[i];
                                            graphic.setSymbol(sfs);
                                            gLayer.add(graphic);
                                        }
                                    }
                                }
                                gLayer.on("mouse-over",qvq);
                                function qvq(e) {
                                    var graphic=e.graphic;
                                    getSymbol2(graphic);
                                    （json.js中自定义的一个函数,只是为了做高亮处理）
                                    gLayer.add(graphic);
                                }
                                gLayer.on("mouse-out",qeq);
                                function qeq(e) {
                                    var graphic=e.graphic;
                                    getSymbol(graphic);
                                    gLayer.add(graphic);
                               }
                                gLayer.on("mouse-down",qaq);
                                map.addLayer(gLayer);
                                function qaq(e) {
                                    var width=200;
                                    var height=200;
                                    var graphic=e.graphic;
                                    getSymbol2(graphic);
                                    var result=data;
                                    var city=e.graphic.attributes.XZQMC;
                                    for (var i=0;i<result.data.length;i++){
                                        if(result.data[i].attributes.name==city){
                                            var nodeChart = null;
                                            nodeChart = domConstruct.create("div", { id: "nodeTestBar" + i, style: "width:" + width + "px;height:" + height + "px;" }, win.body());
                                            console.log(nodeChart);
                                           var myChart = echarts.init(document.getElementById("nodeTestBar" + i));
                                            var info=new InfoTemplate("人口数据");
                                            var option = {
                                                title : {
                                                    x:'center'
                                                },
                                                tooltip : {
                                                    trigger: 'item',
                                                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                                                },
                                                legend: {
                                                    orient: 'vertical',
                                                    left: 'left',
                                                    data: ['成人','小孩']
                                                },
                                                series : [
                                                    {
                                                        name: '人口数量',
                                                        type: 'pie',
                                                        radius : '55%',
                                                        center: ['50%', '60%'],
                                                        data:[
                                                            {value:result.data[i].attributes.man, name:'成人'},
                                                            {value:result.data[i].attributes.child, name:'小孩'},

                                                        ],
                                                        itemStyle: {
                                                            emphasis: {
                                                                shadowBlur: 10,
                                                                shadowOffsetX: 0,
                                                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                                                            }
                                                        }
                                                    }
                                                ]
                                            };
                                            myChart.setOption(option);
                                            info.setContent(nodeChart);
                                            graphic.setInfoTemplate(info);
                                        }
                                    }

                                }
                            })
                    }
                })
            }
        </script>
</head>
<body>
<div id="mapDiv"  style="width: 1200px; height: 800px">
</div>
</body>
</html>

data.json:

{
  "data": [
    {
      "attributes": {
        "name": "开阳县",
        "value": 20,
        "child":10,
        "man":30
      }

    },
    {
      "attributes": {
        "name": "息烽县",
        "value": 95,
        "child":20,
        "man":40
      }
    },
    {
      "attributes": {
        "name": "修文县",
        "value": 90,
        "child": 20,
        "man": 40
      }
    },
    {
      "attributes": {
        "name": "清镇市",
        "value": 80,
        "child": 20,
        "man": 40
      }
    },
    {
      "attributes": {
        "name": "乌当区",
        "value": 70,
        "child":20,
        "man":40
      }
    },
    {
      "attributes": {
        "name": "白云区",
        "value": 60,
        "child":12,
        "man":21
      }
    },
    {
      "attributes": {
        "name": "观山湖区",
        "value": 50,
        "child":213,
        "man":53
      }
    },
    {
      "attributes": {
        "name": "云岩区",
        "value": 40,
        "child":123,
        "man":12
      }
    },
    {
      "attributes": {
        "name": "南明区",
        "value": 30,
        "child":13,
        "man":42
      }
    },
    {
      "attributes": {
        "name": "花溪区",
        "value": 20,
        "child":20,
        "man":56
      }
    }
  ]
}

结果图：
这里写图片描述

张玺文

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
arcgis js 与 echarts 结合的小案例

实现思路是采用arcgis 的 graphic 的InfoTemplate属性，把echarts集成到弹出气泡中，代码如下 test.jsp:&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %&gt;&lt...
复制链接

扫一扫