<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>统计专题图</title>
<style type="text/css">
body{
margin: 0;
overflow: hidden;
background: #fff;
}
#map{
position: relative;
height: 510px;
border:1px solid #3473b7;
}
#toolbar {
position: relative;
padding-top: 5px;
padding-bottom: 10px;
}
</style>
<link href='./css/bootstrap.min.css' rel='stylesheet' />
<link href='./css/bootstrap-responsive.min.css' rel='stylesheet' />
<script src='libs/SuperMap.Include.js'></script>
<script type="text/javascript">
var map, local, baseLayer, layersID, themeLayer,
url = "http://localhost:8090/iserver/services/map---0--China400/rest/maps/HBMap@China400";
function init() {
map = new SuperMap.Map("map", { controls: [
new SuperMap.Control.ScaleLine(),
new SuperMap.Control.PanZoomBar(),
new SuperMap.Control.LayerSwitcher(),
new SuperMap.Control.Navigation({
dragPanOptions: {
enableKinetic: true
}
}),
],
});
baseLayer = new SuperMap.Layer.TiledDynamicRESTLayer("河北省专题图", url, { transparent: true, cacheEnabled: true }, { maxResolution: "auto" });
baseLayer.events.on({ "layerInitialized": addLayer });
map.allOverlays = true;
}
function addLayer() {
map.addLayer(baseLayer);
map.setCenter(new SuperMap.LonLat(13133579.91, 5012957.79), 0);
// map.allOverlays = true;
}
//对 Jingjin 数据源的 BaseMap_R 数据集两个字段 Pop_Rate95 和 Pop_Rate99 制作统计专题图
function addThemeGraph() {
removeTheme();
//创建统计专题图对象，ThemeGraph 必设 items。
//专题图参数 ThemeParameters 必设 theme（即以设置好的分段专题图对象）、dataSourceName 和 datasetName
var style1 = new SuperMap.REST.ServerStyle({
fillForeColor: new SuperMap.REST.ServerColor(92, 73, 234),
lineWidth: 0.1
}),
style2 = new SuperMap.REST.ServerStyle({
fillForeColor: new SuperMap.REST.ServerColor(211, 111, 240),
lineWidth: 0.1
}),
item1 = new SuperMap.REST.ThemeGraphItem({
caption: "1992-1995人口增长率",
graphExpression: "FLOWER_1995",
uniformStyle: style1
}),
item2 = new SuperMap.REST.ThemeGraphItem({
caption: "1995-1999人口增长率",
graphExpression: "FLOWER_2000",
uniformStyle: style2
}),
themeGraph = new SuperMap.REST.ThemeGraph({
items: new Array(item1, item2),
barWidth: 0.03,
graduatedMode: SuperMap.REST.GraduatedMode.SQUAREROOT,
overlapAvoided: true,
graphAxes: new SuperMap.REST.ThemeGraphAxes({
axesDisplayed: true
}),
graphSize: new SuperMap.REST.ThemeGraphSize({
maxGraphSize: 1,
minGraphSize: 0.35
}),
graphText: new SuperMap.REST.ThemeGraphText({
graphTextDisplayed: true,
graphTextFormat: SuperMap.REST.ThemeGraphTextFormat.VALUE,
graphTextStyle: new SuperMap.REST.ServerTextStyle({
sizeFixed: true,
fontHeight: 9,
fontWidth: 5
})
}),
graphType: SuperMap.REST.ThemeGraphType.BAR3D
}),
//专题图参数对象
themeParameters = new SuperMap.REST.ThemeParameters({
themes: [themeGraph],
dataSourceNames: ["China400"],
datasetNames: ["County_R_1"]/*,
joinItems: [joinItem]*/
}),
//与服务端交互
themeService = new SuperMap.REST.ThemeService(url, {
eventListeners: {
"processCompleted": ThemeCompleted,
"processFailed": themeFailed
}
});
themeService.processAsync(themeParameters);
}
//显示专题图。专题图在服务端为一个资源，每个资源都有一个 ID 号和一个 url
//要显示专题图即将资源结果的 ID 号赋值给图层的 layersID 属性即可
function ThemeCompleted(themeEventArgs) {
if (themeEventArgs.result.resourceInfo.id) {
// var Id = themeEventArgs.result.resourceInfo.id
// alert(Id)
themeLayer = new SuperMap.Layer.TiledDynamicRESTLayer("京津地区人口分布图_专题图",
url, { cacheEnabled: false, transparent: true,
layersID: themeEventArgs.result.resourceInfo.id
}, { maxResolution: "auto" });
themeLayer.events.on({ "layerInitialized": addThemelayer });
}
}
function addThemelayer() {
map.addLayer(themeLayer);
}
function themeFailed(serviceFailedEventArgs) {
//doMapAlert("",serviceFailedEventArgs.error.errorMsg,true);
alert(serviceFailedEventArgs.error.errorMsg);
}
//移除专题图图层
function removeTheme() {
if (map.layers.length > 1) {
map.removeLayer(themeLayer, true);
}
}
</script>
</head>
<body onload="init()">
<div id="toolbar">
<input type="button" class="btn" value="创建专题图" onclick="addThemeGraph()" />
<input type="button" class="btn" value="移除专题图" onclick="removeTheme()" />
</div>
<div id="map"></div>
</body>
</html>
