test.html 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  1. 
  2. <html>
  3. <head>
  4. <meta http-equiv="X-UA-Compatible" content="IE=8" />
  5. <meta http-equiv="Content-Type" content="text/html; utf-8" />
  6. <title>改变矢量图层风格</title>
  7. <script type="text/javascript" src="SuperMap.Include.js" ></script>
  8. <script type="text/javascript">
  9. var scene = null;
  10. var sceneControl = null;
  11. var htmlUrl = document.location.host;
  12. //判断网页的打开方式是本地打开还是通过网络打开
  13. //不同的打开方式url赋值不同
  14. if(htmlUrl == "")
  15. {
  16. htmlUrl = "http://localhost:8090";
  17. }
  18. else
  19. {
  20. htmlUrl = "http://" + htmlUrl;
  21. }
  22. var sceneUrl = htmlUrl + "/iserver/services/components-rest/rest/realspace";
  23. function onPageLoad()
  24. {
  25. //初始化三维场景控件
  26. try
  27. {
  28. //初始化三维场景控件实例,参数为包含控件的HTML元素
  29. sceneControl = new SuperMap.Web.UI.Controls.SceneControl($get("sceneControlDiv"), initCallback, failedCallback);
  30. }
  31. catch(e)
  32. {
  33. //若没有安装插件,则抛出该异常
  34. if (e.name == SuperMap.Web.Realspace.ExceptionName.PlugInNotInstalled)
  35. {
  36. var url = htmlUrl + "/iserver/iClient/for3D/Setup.exe";
  37. document.write("<a href='"+url+"'>未检测到 SuperMap iClient3D for Plugin 插件,请单击此处下载并安装插件。</a>");
  38. return;
  39. }
  40. //若使用非IE浏览器,则抛出该异常
  41. else if (e.name == SuperMap.Web.Realspace.ExceptionName.BrowserNotSupport)
  42. {
  43. document.write("<p>SuperMap iClient3D for Plugin 目前仅支持 InternetExplorer 浏览器,请更换浏览器后重新尝试加载本页面。</p>");
  44. return;
  45. }
  46. //抛出其他异常
  47. else
  48. {
  49. alert(e.message);
  50. }
  51. }
  52. }
  53. //控件初始化完成后的回调函数,初始化完成之后才能进行数据加载
  54. function initCallback()
  55. {
  56. //获取地球控件场景,控件和场景是一对一的捆绑关系
  57. scene = sceneControl.get_scene();
  58. //iServer服务地址
  59. serverAddress = sceneUrl;
  60. //获取三维图层集合
  61. layer3Ds = scene.get_layer3Ds();
  62. }
  63. //控件初始化失败后的回调函数
  64. function failedCallback()
  65. {
  66. alert("Realspace initialized failed!");
  67. }
  68. //获得图层的数据名称
  69. function getDataName(layerName)
  70. {
  71. var layer3DServicesList = sceneControl.get_layer3DServicesList();
  72. var bLoad = layer3DServicesList.load(serverAddress, "scene");
  73. if(bLoad)
  74. {
  75. var layer3DServiceInfo = layer3DServicesList.get_item(layerName);
  76. var dataName = layer3DServiceInfo.get_dataName();
  77. var layer3DType = layer3DServiceInfo.get_type();
  78. return dataName;
  79. }
  80. else
  81. {
  82. alert("获取图层服务信息失败!");
  83. }
  84. }
  85. function createVector()
  86. {
  87. var layerDataName = getDataName("buildings@RealspaceSample");
  88. //新建矢量图层
  89. var vectorLayer = new SuperMap.Web.Realspace.Layer3D(serverAddress,"buildings@RealspaceSample", layerDataName, SuperMap.Web.Realspace.Layer3DType.VECTOR);
  90. if (vectorLayer != null)
  91. {
  92. layer3Ds.insert(vectorLayer);
  93. //飞行到矢量图层的地理范围内
  94. var geobound = vectorLayer.get_bounds();
  95. scene.get_flyingOperator().flyToBounds(geobound);
  96. }
  97. scene.refresh();
  98. }
  99. //获得图层的风格
  100. function loadStyle()
  101. {
  102. //获取一个三维图层信息列表对象实例
  103. var layer3DServicesList = sceneControl.get_layer3DServicesList();
  104. //从指定的服务器和场景获取该场景的全部图层服务信息,获取成功返回 True
  105. var bLoad = layer3DServicesList.load(serverAddress,"scene");
  106. if(bLoad)
  107. {
  108. //获取指定图层的信息
  109. var layer3DServiceInfo = layer3DServicesList.get_item("buildings@RealspaceSample");
  110. //构造一个Style3D对象
  111. var style3D = new SuperMap.Web.Core.Style3D();
  112. //获取图层的风格信息
  113. style3D = layer3DServiceInfo.get_style3D();
  114. //加载图层默认的风格
  115. layer3Ds.get_item("buildings@RealspaceSample").set_style3D(style3D);
  116. scene.refresh();
  117. }
  118. }
  119. function changeStyle()
  120. {
  121. var regionRed = document.getElementById("regionRed").value;
  122. var regionGreen = document.getElementById("regionGreen").value;
  123. var regionBlue = document.getElementById("regionBlue").value;
  124. var lineRed = document.getElementById("lineRed").value;
  125. var lineGreen = document.getElementById("lineGreen").value;
  126. var lineBlue = document.getElementById("lineBlue").value;
  127. var lineWidth = document.getElementById("lineWidth").value;
  128. var extendHeight = document.getElementById("extendHeight").value;
  129. var altitudeMode = document.getElementById("altitudeMode").value;
  130. //构造一个Style3D对象
  131. var regionStyle3D = new SuperMap.Web.Core.Style3D();
  132. //设置图层的填充前景色、线颜色、线宽度
  133. regionStyle3D.set_fillForeColor(new SuperMap.Web.Core.Color(regionRed,regionGreen,regionBlue,255));
  134. regionStyle3D.set_lineColor(new SuperMap.Web.Core.Color(lineRed,lineGreen,lineBlue,255));
  135. regionStyle3D.set_lineWidth(lineWidth);
  136. regionStyle3D.set_extendHeight(extendHeight);
  137. regionStyle3D.set_bottomAltitude("100");
  138. regionStyle3D.set_altitudeMode(altitudeMode);
  139. //将风格加载到指定的图层上
  140. layer3Ds.get_item("buildings@RealspaceSample").set_style3D(regionStyle3D);
  141. scene.refresh();
  142. }
  143. </script>
  144. </head>
  145. <body onLoad="onPageLoad()">
  146. <div style="position:absolute;left:5px;top:5px;right:5px;float:left;">
  147. <input id="CreateVector" type="button" value="加载矢量图层" onClick="return createVector()" />
  148. <input id="LoadStyle" type="button" value="加载默认风格" onClick="return loadStyle()" />
  149. <!--设定图层风格-->
  150. <label for="FillColor" >填充颜色</label>
  151. <label for="Red" >R</label>
  152. <input id="regionRed" name="Red" type="text" value="0" />
  153. <label for="Green" >G</label>
  154. <input id="regionGreen" name="Green" type="text" value="0"/>
  155. <label for="Blue" >B</label>
  156. <input id="regionBlue" name="Blue" type="text" value="0" />
  157. <label for="AltitudeMode">高度模式</label>
  158. <select id="altitudeMode" name="AltitudeMode">
  159. <option value="0">地表层高度模式</option>
  160. <option value="1">距地相对高度模式</option>
  161. <option value="2">绝对高度模式</option>
  162. </select>
  163. <label for="ExtendHeight" >拉伸高度</label>
  164. <input id="extendHeight" name="extendHeight" type="text" value="0" />
  165. <br>
  166. <label for="LineColor" >线条颜色</label>
  167. <label for="Red" >R</label>
  168. <input id="lineRed" name="Red" type="text" value="0" />
  169. <label for="Green" >G</label>
  170. <input id="lineGreen" name="Green" type="text" value="0"/>
  171. <label for="Blue" >B</label>
  172. <input id="lineBlue" name="Blue" type="text" value="0" />
  173. <label for="LineWidth" >线条宽度</label>
  174. <input id="lineWidth" name="LineWidth" type="text" value="1" />
  175. <input id="ChangeStyle" type="button" value="更改图层风格" onClick="return changeStyle()" />
  176. <br />
  177. </div>
  178. <div id="sceneControlDiv" style="position:absolute;left:5px;top:85px;bottom:5px;right:5px;float:left;">
  179. </div>
  180. </body>
  181. </html>