<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>饼图</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.20/3.20/dijit/themes/tundra/tundra.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.20/3.20/esri/css/esri.css" />
<link href="style/ChartInfoWindow.css" rel="stylesheet"/>
<style>
html,body{
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#map{
position: relative;
width:100%;
height:100%;
}
</style>
<script src="js/echarts.js"></script>
<script>
var dojoConfig = {
packages: [{
name: "chartModules",
location: location.pathname.replace(/\/[^/]+$/, "") + "/js"
}]
};
</script>
<script type="text/javascript" src="http://localhost:8080/arcgis_js_api/library/3.20/3.20/init.js"></script>
</head>
<body class="claro">
<div id="map" ></div>
<script>
require([
"esri/map",
"esri/geometry/Point",
"esri/layers/FeatureLayer",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/renderers/SimpleRenderer",
"esri/Color",
'esri/layers/GraphicsLayer',
'esri/graphic',
"esri/tasks/query",
"esri/tasks/QueryTask",
//添加自定义类型的引用
"chartModules/ChartInfoWindow",
"chartModules/geometryUtils",
"dojo/dom",
"dojo/dom-geometry",
"dojo/_base/array",
"dojo/dom-construct",
"dojo/_base/window",
"dojo/domReady!"
], function (
Map, Point,FeatureLayer, ArcGISDynamicMapServiceLayer,
SimpleLineSymbol, SimpleFillSymbol,
SimpleRenderer, Color,GraphicsLayer,Graphic,Query,QueryTask,
ChartInfoWindow,geometryUrils,dom,domGeometry,
array, domConstruct, win
) {
var chartDiv = [];
var chartOption = [];
var chartWindow = [];
var map = new Map("map", {
center: [112, 38],
zoom: 8,
maxZoom:9,//最大空间等级
minZoom:5,//最小空间等级
basemap: "topo"
});
var featureLayer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/firstTest/firstService/MapServer/2", {
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"]
});
//只留下边框
var defaultSymbol = new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_NULL);
var renderer = new SimpleRenderer(defaultSymbol);
featureLayer.setRenderer(renderer);
map.addLayer(featureLayer);
map.on("load", function (evt) {
displayChart();
});
////============================================gzr==============
function displayChart(){
var query = new Query();
var queryUrl= 'http://localhost:6080/arcgis/rest/services/firstTest/firstService/MapServer/2';
var queryTask = new QueryTask(queryUrl);
query.where = "1=1";
query.outSpatialReference = map.spatialReference;
query.returnGeometry = true;
query.outFields = ["*"];
queryTask.execute(query, processResults, error);
}
function processResults(results){
console.log(results);
for(var i=0; i< results.features.length; i++){
var chartData= null;
chartData= [];
if(results.features[i].attributes[results.fields[7].name]!= null
&&results.features[i].attributes[results.fields[6].name]!= null
&&results.features[i].attributes[results.fields[5].name]!= null
&&results.features[i].attributes[results.fields[4].name]!= null
&&results.features[i].attributes[results.fields[3].name]!= null){
var nodeChart = null;
nodeChart = domConstruct.create("div", {id: 'nodeTest'+ i,class: 'nodeTest', style: "width:150px;height:150px;" }, win.body());
chartDiv.push(nodeChart);
var myChart = echarts.init(document.getElementById("nodeTest"+ i));
//饼状图
option = {
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
series : [
{
name:'生产总值',
type:'pie',
radius : '60%',
center: ['50%', '50%'],
label: {
normal: {
show: false,
position: 'inside',
formatter:"{b}:{d}%"
}
},
data:[
{value: results.features[i].attributes[results.fields[7].name], name:'08年'},
{value: results.features[i].attributes[results.fields[6].name], name:'09年'},
{value: results.features[i].attributes[results.fields[5].name], name:'10年'},
{value: results.features[i].attributes[results.fields[4].name], name:'11年'},
{value: results.features[i].attributes[results.fields[3].name], name:'12年'}
]
}
]
};
myChart.setOption(option);
chartOption.push(myChart);
var chartPoint= null;
chartPoint= geometryUrils.getPolygonCenterPoint(results.features[i].geometry);
var screenPoint = map.toScreen(chartPoint);
screenPoint.y = screenPoint.y+75;
var mapPoint = map.toMap(screenPoint);
var tempChart = new ChartInfoWindow({
map: map,
chart: nodeChart,
chartPoint: mapPoint
});
chartWindow.push(tempChart);
}
}
}
function error(e){
alert(e.message);
}
map.on("zoom", function (evt) {
});
map.on("zoom-end", function (evt) {
console.log(map.__LOD.level);
var level = map.__LOD.level;
for(var j=0;j<chartDiv.length;j++){
domGeometry.setContentSize(dom.byId(chartDiv[j].id),{
w:1.5*level*level+5*level,
h:1.5*level*level+5*level
})
}
for(var i=0;i<chartOption.length;i++){
chartOption[i].resize();
}
});
});
</script>
</body>
</html>
MapChartTest.zip （6个子文件） 
MapChartTest 
ECharts_Pie.html 7KB style 
ChartInfoWindow.css 378B js geometryUtils.js 612B ChartInfoWindow.js 3KB echarts.js 2.09MB ECharts_Bar.html 7KB
idomyway
- 粉丝: 503
- 资源: 12
最新资源
- 基于springboot的养老院管理系统源码（java毕业设计完整源码）.zip
- 基于springboot的农业收成管理系统源码（java毕业设计完整源码）.zip
- TFTP64位实现TFTP传输文件资源
- 基于springboot的农产品系统源码（java毕业设计完整源码）.zip
- 机械设计机器人双工位焊接平台sw18可编辑全套设计资料100%好用.zip.zip
- 基于Springboot+Vue的英语学习平台（含论文）
- TT0066APP-zb_wifi_webwx-prd-uni (1).apk
- 基于Springboot的英语学习平台开题报告
- 机械设计脚踏板压接机（sw18可编辑+工程图）全套设计资料100%好用.zip.zip
- 机械设计机器人自动上内存条设备sw21全套设计资料100%好用.zip.zip
- 机械设计拉管切线机（sw18可编辑+工程图）全套设计资料100%好用.zip.zip
- 机械设计立柱机器人焊接工作站sw16可编辑全套设计资料100%好用.zip.zip
- OpenSSL-1.1.1g，Windows64位版
- 机械设计连接器端子插针组装机（sw18可编辑+工程图）全套设计资料100%好用.zip.zip
- 隐私声明 | SurveyMonkey.pdf
- MyActivity.html
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
- 1
- 2
前往页