esri.symbols.PictureMarkerSymbol结合Echarts3可视化

实现效果如下：
实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>picture marker</title>
    <style>
        html,
        body,
        #map {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <link rel="stylesheet" href="../../static/thirdparty/agsapi/3.14/esri/css/esri.css">
    <script src="../../static/thirdparty/echarts3/echarts.min.js"></script>
    <script src="../../static/thirdparty/agsapi/3.14/init.js"></script>

</head>
<body>
<div id="map" style="width: 100%; height: 100%;"></div>
<script>
    var map;
    require([
        "esri/map",
        "esri/symbols/PictureMarkerSymbol",
        "esri/geometry/Point",
        "esri/SpatialReference",
        "esri/graphic",
        "esri/InfoTemplate",
        "dojo/_base/window",
        "dojo/dom-construct",
        "dojo/domReady!"
    ],function (Map,PictureMarkerSymbol,
                Point,SpatialReference,Graphic,InfoTemplate,
                win,domConstruct) {
        map = new Map("map",{
            zoom:8,
            center: [120.01876831051501, 32.52459158998377],
            basemap: "osm"
        });

        map.on("load",function () {

            var nodeChart = domConstruct.create("div", { id: "nodeTestBar", style: "width: 200px;height:200px;" }, win.body());
            var myChart = echarts.init(document.getElementById("nodeTestBar"));
            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:160, name:'成人'},
                            {value:20, name:'小孩'},

                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            myChart.setOption(option);

            var newPoint = new Point(120.01876831051501,32.52459158998377, new SpatialReference({ wkid: 4326 }));
            var picSymbol = new PictureMarkerSymbol("../../static/img/tree.png", 20, 20);
            var picGraphic = new Graphic(newPoint, picSymbol);

            var infoTemplate = new InfoTemplate();
            infoTemplate.setTitle("今天天气真晴朗");
            infoTemplate.setContent(nodeChart);

            picGraphic.setInfoTemplate(infoTemplate);
            map.graphics.add(picGraphic);

        })
    })
</script>

</body>
</html>
参考博客：
arcgis js 与 echarts 结合的小案例
https://blog.csdn.net/weixin_42664991/article/details/82705020
esri.symbols.PictureMarkerSymbol结合Echarts3可视化

相关推荐
