运行范例

描述

该范例展示了专题图相关制作步骤。

代码 (文件格式为 UTF-8)


<!DOCTYPE>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
<meta http-equiv="Content-Type" content="text/html; utf-8"/>
<title>制作专题图</title>
<script type="text/javascript" src="SuperMap.Include.js"></script>
<script type="text/javascript">
var scene = null;
var sceneControl = null;
var htmlUrl = document.location.host;
var serverUrl = null;
var lyr3ds = null;
var layer3DTheme = null;
var themeName = null;

//判断网页的打开方式是本地打开还是通过网络打开
//不同的打开方式url赋值不同
if (htmlUrl == "") {
    htmlUrl = "http://localhost:8090";
}
else {
    htmlUrl = "http://" + htmlUrl;
}
var sceneUrl = htmlUrl + "/iserver/services/3D-sample/rest/realspace";
function onPageLoad() {
    //初始化三维场景控件
    try {
        //初始化三维场景控件实例,参数为包含控件的HTML元素
        sceneControl = new SuperMap.Web.UI.Controls.SceneControl($get("sceneControlDiv"), initCallback, failedCallback);
    }
    catch (e) {
        //若没有安装插件,则抛出该异常
        if (e.name == SuperMap.Web.Realspace.ExceptionName.PlugInNotInstalled) {
            var url = htmlUrl + "/iserver/iClient/for3D/plugin/Setup.exe";
            document.write("<a href='" + url + "'>未检测到 SuperMap iClient3D for  Plugin 插件,请单击此处下载并安装插件。</a>");
            return;
        }
        //若使用非IE浏览器,则抛出该异常
        else if (e.name == SuperMap.Web.Realspace.ExceptionName.BrowserNotSupport) {
            document.write("<p>SuperMap iClient3D for  Plugin 目前仅支持 InternetExplorer 浏览器,请更换浏览器后重新尝试加载本页面。</p>");
            return;
        }
        //抛出其他异常
        else {
            alert(e.message);
        }
    }
}

//控件初始化完成后的回调函数,初始化完成之后才能进行数据加载
function initCallback() {
    //获取地球控件场景,控件和场景是一对一的捆绑关系
    scene = sceneControl.get_scene();
    scene.open(sceneUrl, "Theme3d");
    scene.get_sun().set_isVisible(true);
}

//控件初始化失败后的回调函数
function failedCallback() {
    alert("Realspace initialized failed!");
}

function SceneOpen_onclick() {
    //iServer服务地址
    var sceneAddress = document.getElementById("ServerAddress").value;

    //场景名称
    var sceneName = document.getElementById("SceneName").value;
    serverUrl = sceneAddress;

    //打开场景
    scene.open(sceneAddress, sceneName);
}

function SceneClose_onclick() {
    //关闭场景
    scene.close();
    scene.refresh();
}

function addThemeUnique() {

    var themeUnique = new SuperMap.Web.Realspace.Theme3DUnique();
    themeUnique.set_uniqueExpression("NAME");

    var style = new SuperMap.Web.Core.Style3D();

    var item1 = new SuperMap.Web.Realspace.Theme3DUniqueItem();
    item1.set_unique("北京");

    var color1 = new SuperMap.Web.Core.Color(249, 151, 185, 255);
    style.set_fillForeColor(color1);
    item1.set_style3D(style);

    var item2 = new SuperMap.Web.Realspace.Theme3DUniqueItem();
    item2.set_unique("昌平");

    var color2 = new SuperMap.Web.Core.Color(118, 199, 187, 255);
    style.set_fillForeColor(color2);
    item2.set_style3D(style);

    var item3 = new SuperMap.Web.Realspace.Theme3DUniqueItem();
    item3.set_unique("大兴");

    var color3 = new SuperMap.Web.Core.Color(252, 181, 148);
    style.set_fillForeColor(color3);
    item3.set_style3D(style);

    var item4 = new SuperMap.Web.Realspace.Theme3DUniqueItem();
    item4.set_unique("顺义");

    var color4 = new SuperMap.Web.Core.Color(187, 167, 207, 255);
    style.set_fillForeColor(color4);
    item4.set_style3D(style);

    var item5 = new SuperMap.Web.Realspace.Theme3DUniqueItem();
    item5.set_unique("通县");

    var color5 = new SuperMap.Web.Core.Color(153, 183, 197, 255);
    style.set_fillForeColor(color5);
    item5.set_style3D(style);

    var item6 = new SuperMap.Web.Realspace.Theme3DUniqueItem();
    item6.set_unique("怀柔");

    var color6 = new SuperMap.Web.Core.Color(150, 204, 153, 255);
    style.set_fillForeColor(color6);
    item6.set_style3D(style);

    var item7 = new SuperMap.Web.Realspace.Theme3DUniqueItem();
    item7.set_unique("延庆");

    var color7 = new SuperMap.Web.Core.Color(183, 209, 118, 255);
    style.set_fillForeColor(color7);
    item7.set_style3D(style);

    var item8 = new SuperMap.Web.Realspace.Theme3DUniqueItem();
    item8.set_unique("密云");

    var color8 = new SuperMap.Web.Core.Color(255, 211, 112, 255);
    style.set_fillForeColor(color8);
    item8.set_style3D(style);

    var item9 = new SuperMap.Web.Realspace.Theme3DUniqueItem();
    item9.set_unique("平谷");

    var color9 = new SuperMap.Web.Core.Color(219, 210, 115, 255);
    style.set_fillForeColor(color9);
    item9.set_style3D(style);

    style.set_fillForeColor(new SuperMap.Web.Core.Color(189, 235, 255, 255));
    themeUnique.set_DefaultStyle(style);
    themeUnique.add(item1);
    themeUnique.add(item2);
    themeUnique.add(item3);
    themeUnique.add(item4);
    themeUnique.add(item5);
    themeUnique.add(item6);
    themeUnique.add(item7);
    themeUnique.add(item8);
    themeUnique.add(item9);
    addThemeToScene(themeUnique);
}

function addThemeGraph() {
    var themeGraph = new SuperMap.Web.Realspace.Theme3DGraph();
    themeGraph.set_graduatedMode3D(SuperMap.Web.Realspace.GraduatedMode3D.CONSTANT);
    themeGraph.set_isGraph3DTextDisplayed(true);
    themeGraph.set_maxGraphSize(50000);
    themeGraph.set_minGraphSize(5000);
    themeGraph.set_barWidth(5000);
    themeGraph.set_startAngle(0);

    var textStyle = getTextStyle();
    themeGraph.set_graph3DTextStyle(textStyle);

    var style3d = new SuperMap.Web.Core.Style3D();
    var item1 = new SuperMap.Web.Realspace.Theme3DGraphItem();
    item1.set_graphExpression("Pop_1999");
    item1.set_caption("Pop_1999");
    style3d.set_fillForeColor(new SuperMap.Web.Core.Color(255, 0, 0, 255));
    item1.set_uniformStyle(style3d);

    var item2 = new SuperMap.Web.Realspace.Theme3DGraphItem();
    item2.set_graphExpression("Pop_1995");
    item2.set_caption("Pop_1995");
    style3d.set_fillForeColor(new SuperMap.Web.Core.Color(0, 255, 0, 255));
    item2.set_uniformStyle(style3d);

    var item3 = new SuperMap.Web.Realspace.Theme3DGraphItem();
    item3.set_graphExpression("Pop_1992");
    item3.set_caption("Pop_1992");
    style3d.set_fillForeColor(new SuperMap.Web.Core.Color(0, 0, 255, 255));
    item3.set_uniformStyle(style3d);

    var rec2d = new SuperMap.Bounds();
    rec2d.extend(new SuperMap.LonLat(114, 38));
    rec2d.extend(new SuperMap.LonLat(118, 41));
    themeGraph.setExtremum(0, 100000, rec2d, 50);

    themeGraph.add(item1);
    themeGraph.add(item2);
    themeGraph.add(item3)
    themeGraph.set_graph3DType(6);
    addThemeToScene(themeGraph);
}

function addThemeToScene(theme3D){
    lyr3ds = scene.get_layer3Ds();
    if(themeName!=null){
        lyr3ds.removeAt(themeName);
    }
    var dataName = "Beijing@BeijingVector";
    layer3DTheme = lyr3ds.addTheme3D(sceneUrl, dataName, dataName, SuperMap.Web.Realspace.Layer3DType.VECTOR, theme3D);
    themeName = layer3DTheme.get_name();
}

function getTextStyle() {
    var textStyle = new SuperMap.Web.Core.TextStyle3D();
    textStyle.set_foreColor(new SuperMap.Web.Core.Color(255, 255, 0, 255));
    textStyle.set_backColor(new SuperMap.Web.Core.Color(0, 0, 0, 255));
    textStyle.set_outline(true);
    textStyle.set_fontScale(1.5);
    textStyle.set_fontName("微软雅黑");
    return textStyle;
}
function addThemeLabel() {
    var themeLabel = new SuperMap.Web.Realspace.Theme3DLabel();
    themeLabel.set_labelExpression("Name");
    var textStyle = getTextStyle();
    themeLabel.set_uniformStyle(textStyle);
    addThemeToScene(themeLabel);
}

function addThemeRange() {
    var themeRange = new SuperMap.Web.Realspace.Theme3DRange();
    themeRange.set_rangeExpression("SmID");

    var style3d = new SuperMap.Web.Core.Style3D();
    var color = new SuperMap.Web.Core.Color(255, 0, 0, 255);

    var item1 = new SuperMap.Web.Realspace.Theme3DRangeItem();
    item1.set_start(0);
    item1.set_end(3.8);
    style3d.set_fillForeColor(new SuperMap.Web.Core.Color(255, 0, 0, 200));
    item1.set_style3D(style3d);

    var item2 = new SuperMap.Web.Realspace.Theme3DRangeItem();
    item2.set_start(3.8);
    item2.set_end(6.7);
    var style3d1 = new SuperMap.Web.Core.Style3D();
    style3d1.set_fillForeColor(new SuperMap.Web.Core.Color(255, 0, 200, 200));
    item2.set_style3D(style3d1);

    var item3 = new SuperMap.Web.Realspace.Theme3DRangeItem();
    item3.set_start(6.7);
    item3.set_end(12);
    var style3d2 = new SuperMap.Web.Core.Style3D();
    style3d2.set_fillForeColor(new SuperMap.Web.Core.Color(255, 200, 0, 200));
    item3.set_style3D(style3d2);

    themeRange.addToHead(item3);
    themeRange.addToHead(item2);
    themeRange.addToHead(item1);
    addThemeToScene(themeRange);
}
</script>
</head>

<body onLoad="onPageLoad()">
<div  style="position:absolute;left:5px;top:5px;right:5px;float:left">
    <!--服务器-->
    服务器地址:
    <input id="ServerAddress" name="ServerAddress" type="text" value="http://localhost:8090/iserver/services/3D-sample/rest/realspace" />
       
    <!--场景-->
    场景服务:
    <input id="SceneName" name="SceneName" type="text" value="Theme3d" />
    <input id="SceneOpen" type="button" value="加载场景" onClick="return SceneOpen_onclick()" />
    <input id="SceneClose" type="button" value="删除场景" onClick="return SceneClose_onclick()" />
    <input id="AddThemeUnique" type="radio" name="theme3d" value="添加单值专题图" onClick="return addThemeUnique()" />添加单值专题图 |
    <input id="AddThemeLabel" type="radio" name="theme3d" value="添加标签专题图" onClick="return addThemeLabel()" />添加标签专题图 |
    <input id="AddThemeRange" type="radio" name="theme3d" value="添加分段专题图" onClick="return addThemeRange()" />添加分段专题图 |
    <input id="AddThemeGraph" type="radio" name="theme3d" value="添加统计专题图" onClick="return addThemeGraph()" />添加统计专题图 |
    <br />
</div>
<div id="sceneControlDiv" style="position:absolute;left:5px;top:35px;bottom:5px;right:5px">
</div>
</body>

</html>