arcgis js 与 echarts 结合的小案例

96 阅读 0 评论 64 点赞

我是靠谱客的博主高大仙人掌，最近开发中收集的这篇文章主要介绍arcgis js 与 echarts 结合的小案例，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

实现思路是采用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
}
}
]
}