效果图例如以下：单值专题图并显示每一个区域的相关文字信息

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc29uZ2hmdQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

代码：

  1. <!DOCTYPE>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>单值专题图</title>
  6. <style type="text/css">
  7. body{
  8. margin: 0;
  9. overflow: hidden;
  10. background: #fff;
  11. }
  12. #map{
  13. position: relative;
  14. height: 520px;
  15. border:1px solid #3473b7;
  16. }
  17. #toolbar{
  18. position: relative;
  19. height: 33px;
  20. padding-top:5;
  21. }
  22. </style>
  23. <script src='./supermap_iclient_for_JavaScript_712_12428_1122/libs/SuperMap.Include.js'></script>
  24. <script type="text/javascript">
  25. var map, local, baseLayer, layersID, themeLayer,
  26. host = document.location.toString().match(/file:\/\//)?"http://localhost:8090":'http://' + document.location.host,
  27. url=host+"/iserver/services/map-China400/rest/maps/China";
  28. function init(){
  29. map = new SuperMap.Map("map",{controls: [
  30. new SuperMap.Control.LayerSwitcher(),
  31. new SuperMap.Control.ScaleLine(),
  32. new SuperMap.Control.Zoom(),
  33. new SuperMap.Control.Navigation({
  34. dragPanOptions: {
  35. enableKinetic: true
  36. }
  37. })]
  38. });
  39. baseLayer = new SuperMap.Layer.TiledDynamicRESTLayer("China400", url, {transparent: true, cacheEnabled: true}, {maxResolution: "auto"});
  40. baseLayer.events.on({"layerInitialized": addLayer});
  41. }
  42.  
  43. function addLayer() {
  44. map.addLayer(baseLayer);
  45. map.setCenter(new SuperMap.LonLat(12080677, 4591416), 3);
  46. map.allOverlays = true;
  47. }
  48. /**
  49. *叠加专题图
  50. */
  51. function addThemeUnique() {
  52. removeTheme();
  53. var themeService = new SuperMap.REST.ThemeService(url, {eventListeners:{"processCompleted": themeCompleted, "processFailed": themeFailed}});
  54. var style1, style2, style3, style4, style5, style6;
  55. var style1, style2, style3, style4, style5, style6;
  56. style1 = new SuperMap.REST.ServerStyle({
  57. fillForeColor: new SuperMap.REST.ServerColor(248, 203, 249),
  58. lineColor: new SuperMap.REST.ServerColor(0, 0, 0),
  59. lineWidth: 0.1
  60. });
  61. style2 = new SuperMap.REST.ServerStyle({
  62. fillForeColor: new SuperMap.REST.ServerColor(196, 255, 189),
  63. lineColor: new SuperMap.REST.ServerColor(0, 0, 0),
  64. lineWidth: 0.1
  65. });
  66. style3 = new SuperMap.REST.ServerStyle({
  67. fillForeColor: new SuperMap.REST.ServerColor(255, 173, 173),
  68. lineColor: new SuperMap.REST.ServerColor(0, 0, 0),
  69. lineWidth: 0.1
  70. });
  71. style4 = new SuperMap.REST.ServerStyle({
  72. fillForeColor: new SuperMap.REST.ServerColor(255, 239, 168),
  73. lineColor: new SuperMap.REST.ServerColor(0, 0, 0),
  74. lineWidth: 0.1
  75. });
  76. style5 = new SuperMap.REST.ServerStyle({
  77. fillForeColor: new SuperMap.REST.ServerColor(173, 209, 255),
  78. lineColor: new SuperMap.REST.ServerColor(0, 0, 0),
  79. lineWidth: 0.1
  80. });
  81. style6 = new SuperMap.REST.ServerStyle({
  82. fillForeColor: new SuperMap.REST.ServerColor(132, 164, 232),
  83. lineColor: new SuperMap.REST.ServerColor(0, 0, 0),
  84. lineWidth: 0.1
  85. });
  86.  
  87. var themeUniqueIteme1 = new SuperMap.REST.ThemeUniqueItem({
  88. unique: "黑龙江省",
  89. style: style1
  90. }),
  91. themeUniqueIteme2 = new SuperMap.REST.ThemeUniqueItem({
  92. unique: "湖北省",
  93. style: style2
  94. }),
  95. themeUniqueIteme3 = new SuperMap.REST.ThemeUniqueItem({
  96. unique: "吉林省",
  97. style: style3
  98. }),
  99. themeUniqueIteme4 = new SuperMap.REST.ThemeUniqueItem({
  100. unique: "内蒙古自治区",
  101. style: style4
  102. }),
  103. themeUniqueIteme5 = new SuperMap.REST.ThemeUniqueItem({
  104. unique: "青海省",
  105. style: style5
  106. }),
  107. themeUniqueIteme6 = new SuperMap.REST.ThemeUniqueItem({
  108. unique: "新疆维吾尔自治区",
  109. style: style6
  110. }),
  111. themeUniqueIteme7 = new SuperMap.REST.ThemeUniqueItem({
  112. unique: "云南省",
  113. style: style1
  114. }),
  115. themeUniqueIteme8 = new SuperMap.REST.ThemeUniqueItem({
  116. unique: "四川省",
  117. style: style4
  118. }),
  119. themeUniqueIteme9 = new SuperMap.REST.ThemeUniqueItem({
  120. unique: "贵州省",
  121. style: style3
  122. }),
  123. themeUniqueIteme10 = new SuperMap.REST.ThemeUniqueItem({
  124. unique: "甘肃省",
  125. style: style3
  126. }),
  127. themeUniqueIteme11 = new SuperMap.REST.ThemeUniqueItem({
  128. unique: "宁夏回族自治区",
  129. style: style5
  130. }),
  131. themeUniqueIteme12 = new SuperMap.REST.ThemeUniqueItem({
  132. unique: "重庆市",
  133. style: style6
  134. }),
  135. themeUniqueIteme13 = new SuperMap.REST.ThemeUniqueItem({
  136. unique: "山东省",
  137. style: style1
  138. }),
  139. themeUniqueIteme14 = new SuperMap.REST.ThemeUniqueItem({
  140. unique: "安徽省",
  141. style: style2
  142. }),
  143. themeUniqueIteme15 = new SuperMap.REST.ThemeUniqueItem({
  144. unique: "江西省",
  145. style: style3
  146. }),
  147. themeUniqueIteme16 = new SuperMap.REST.ThemeUniqueItem({
  148. unique: "浙江省",
  149. style: style4
  150. }),
  151. themeUniqueIteme17 = new SuperMap.REST.ThemeUniqueItem({
  152. unique: "台湾省",
  153. style: style2
  154. }),
  155. themeUniqueIteme18 = new SuperMap.REST.ThemeUniqueItem({
  156. unique: "江苏省",
  157. style: style6
  158. }),
  159. themeUniqueIteme19 = new SuperMap.REST.ThemeUniqueItem({
  160. unique: "湖南省",
  161. style: style5
  162. }),
  163. themeUniqueIteme20 = new SuperMap.REST.ThemeUniqueItem({
  164. unique: "河南省",
  165. style: style4
  166. }),
  167. themeUniqueIteme21 = new SuperMap.REST.ThemeUniqueItem({
  168. unique: "河北省",
  169. style: style3
  170. }),
  171. themeUniqueIteme22 = new SuperMap.REST.ThemeUniqueItem({
  172. caption:"福建省",
  173. unique: "福建省",
  174. style: style5
  175. }),
  176. themeUniqueIteme23 = new SuperMap.REST.ThemeUniqueItem({
  177. unique: "广西壮族自治区",
  178. style: style6
  179. }),
  180. themeUniqueIteme24 = new SuperMap.REST.ThemeUniqueItem({
  181. unique: "西藏自治区",
  182. style: style2
  183. }),
  184. themeUniqueIteme25 = new SuperMap.REST.ThemeUniqueItem({
  185. unique: "广东省",
  186. style: style4
  187. }),
  188. themeUniqueIteme26 = new SuperMap.REST.ThemeUniqueItem({
  189. unique: "山西省",
  190. style: style2
  191. }),
  192. themeUniqueIteme27 = new SuperMap.REST.ThemeUniqueItem({
  193. unique: "陕西省",
  194. style: style1
  195. }),
  196. themeUniqueIteme28 = new SuperMap.REST.ThemeUniqueItem({
  197. unique: "天津市",
  198. style: style5
  199. }),
  200. themeUniqueIteme29 = new SuperMap.REST.ThemeUniqueItem({
  201. unique: "北京市",
  202. style: style2
  203. }),
  204. themeUniqueIteme30 = new SuperMap.REST.ThemeUniqueItem({
  205. unique: "辽宁省",
  206. style: style1
  207. });
  208.  
  209. var themeUniqueItemes=[themeUniqueIteme1, themeUniqueIteme2, themeUniqueIteme3, themeUniqueIteme4, themeUniqueIteme5, themeUniqueIteme6,themeUniqueIteme7,themeUniqueIteme8,themeUniqueIteme9,themeUniqueIteme10,themeUniqueIteme11,themeUniqueIteme12, themeUniqueIteme13,themeUniqueIteme14,themeUniqueIteme15,themeUniqueIteme16,themeUniqueIteme17,themeUniqueIteme18,themeUniqueIteme19,themeUniqueIteme20,themeUniqueIteme21,themeUniqueIteme22,themeUniqueIteme23,themeUniqueIteme24,themeUniqueIteme25,themeUniqueIteme26,themeUniqueIteme27,themeUniqueIteme28,themeUniqueIteme29,themeUniqueIteme30];
  210.  
  211. var themeUnique = new SuperMap.REST.ThemeUnique({
  212. uniqueExpression: "Name",
  213. items: themeUniqueItemes,
  214. defaultStyle: style1
  215. });
  216.  
  217. //label专题图
  218. style1 = new SuperMap.REST.ServerTextStyle({
  219.                 fontHeight: 4,
  220.                 foreColor: new SuperMap.REST.ServerColor(100,20,50),
  221.                <strong><span style="color:#ff0000;"> sizeFixed: true,//当 sizeFixed 为 True 时，单位为毫米（mm）。</span></strong>
  222.                 bold:true
  223.             }),
  224.             style2 = new SuperMap.REST.ServerTextStyle({
  225.                 fontHeight: 0,
  226.                 foreColor: new SuperMap.REST.ServerColor(100,20,50),
  227.                 sizeFixed: true,//当 sizeFixed 为 True 时，单位为毫米（mm）。
  228.                 bold:true
  229.             }),
  230. //设置标签专题图的子项
  231.             themeLabelIteme1 = new SuperMap.REST.ThemeLabelItem({
  232.                 start: 0.0,
  233.                 end: 20.0,
  234.                 style: style1
  235.             }),
  236.   <strong><span style="color:#ff0000;">//设置不要显示的数据。必须设置不然所有显示出来</span></strong>
  237.    themeLabelIteme2 = new SuperMap.REST.ThemeLabelItem({
  238.                 start: 20.0,
  239.                 end: 1000.0,
  240.                 style: style2,
  241. <span style="white-space:pre">		</span><span style="color:#ff0000;"><strong>visible:false</strong></span>
  242.             }),
  243.  
  244.             themeLabelOne = new SuperMap.REST.ThemeLabel({
  245.                 labelExpression: "NAME",//标注字段表达式
  246.                 rangeExpression: "SMID",
  247.                 numericPrecision: 0,
  248.                 items: [themeLabelIteme1,themeLabelIteme2]
  249.             }),
  250.             //创建矩阵标签元素
  251.             LabelThemeCellOne=new SuperMap.REST.LabelThemeCell({
  252.                 themeLabel: themeLabelOne
  253.             }),
  254.             //矩阵背景
  255.             backStyle=new SuperMap.REST.ServerStyle({
  256.                 fillForeColor: new SuperMap.REST.ServerColor(255,255,0),
  257.                 fillOpaqueRate: 60,
  258.                 lineWidth: 0.1
  259.             }),
  260. <span style="white-space:pre">	</span>//创建矩阵标签专题图
  261.             themeLabel = new SuperMap.REST.ThemeLabel({
  262.                  matrixCells: [[LabelThemeCellOne]],
  263.  <span style="white-space:pre">		</span>maxLabelLength:20,
  264.  <span style="white-space:pre">		</span><span style="color:#ff0000;"><strong>smallGeometryLabeled:true,//关键点不然有可能看不到文字效果哦</strong></span>
  265.                  background:new SuperMap.REST.ThemeLabelBackground({
  266.                     backStyle: backStyle,
  267.                     labelBackShape:"RECT"
  268.                  })
  269.             }),
  270. themeParameters = new SuperMap.REST.ThemeParameters({
  271. datasetNames: ["China_Province_R"],
  272. dataSourceNames: ["China400"],
  273. <span style="color:#ff0000;"><strong>themes: [themeLabel,themeUnique]//两个专题图组合</strong></span>
  274. });
  275. themeService.processAsync(themeParameters);
  276. }
  277.  
  278. function themeCompleted(themeEventArgs) {
  279. if(themeEventArgs.result.resourceInfo.id) {
  280. themeLayer = new SuperMap.Layer.TiledDynamicRESTLayer("中国行政区划_专题图", url, {cacheEnabled:false,transparent: true,layersID: themeEventArgs.result.resourceInfo.id}, {"maxResolution": "auto"});
  281. themeLayer.events.on({"layerInitialized": addThemeLayer});
  282. }
  283. }
  284. function addThemeLayer() {
  285. map.addLayer(themeLayer);
  286. }
  287.  
  288. function themeFailed(serviceFailedEventArgs) {
  289. //doMapAlert("",serviceFailedEventArgs.error.errorMsg,true);
  290. alert(serviceFailedEventArgs.error.errorMsg);
  291. }
  292. function removeTheme() {
  293. if (map.layers.length > 1) {
  294. map.removeLayer(themeLayer, true);
  295. }
  296. }
  297. </script>
  298. </head>
  299. <body onload="init()"><br>
  300. <div id="toolbar">
  301. <input type="button" value="创建专题图" onclick="addThemeUnique()" />
  302. <input type="button" value="移除专题图" onclick="removeTheme()" />
  303. </div>
  304. <div id="map"></div>
  305. </body>
  306. </html>

Supermap 组合单值专题图与标签专题图演示样例的更多相关文章

  1. 图标插件--jqplot实现柱状图及饼图，表盘图演示样例

    柱状图 在jqPlot图表插件使用说明(一)中,我们已经能够通过jqPlot绘制出比較简单的线形图.通过查看源码.我们也能够看出,线形图是jqPlot默认的图表类型: /** * Class: Ser ...

  2. PHPCMS中GET标签概述、 get 标签语法、get 标签创建工具、get 调用本系统演示样例、get 调用其它系统演示样例

    一.get 标签概述 通俗来讲,get 标签是Phpcms定义的能直接调用数据库里面内容的简单化.友好化代码,她可调用本系统和外部数据,仅仅有你对SQL有一定的了解,她就是你的绝世好剑!也就是适合熟悉 ...

  3. supermap iclient for js 标签专题图（服务端）

    <!DOCTYPE><html> <head> <meta http-equiv="Content-Type" content=" ...

  4. PhpCMS标签：专题模块special标签

    专题模块 专题模块PC标签调用说明 模块名:special 模块提供的可用操作 操作名 说明 lists 专题列表 content_list 专题信息列表 hits 专题信息点击排序 下面对所有的操作 ...

  5. SuperMap iDesktop .NET 10i制图技巧-----如何贴图

    当我们在没有模型数据的情况下,我们只能通过造白膜来模拟三维建筑了,但是光秃秃的建筑物显然缺乏代入感,因此需要贴图来给场景润色,本文介绍如何给道路贴图和如何给白膜贴图 道路贴图: 1.打开二维道路数据 ...

  6. Android绘图机制（四）——使用HelloCharts开源框架搭建一系列炫酷图表，柱形图，折线图，饼状图和动画特效，抽丝剥茧带你认识图表之美

    Android绘图机制(四)--使用HelloCharts开源框架搭建一系列炫酷图表,柱形图,折线图,饼状图和动画特效,抽丝剥茧带你认识图表之美 这里为什么不继续把自定义View写下去呢,因为最近项目 ...

  7. canvas绘图，html5 k线图，股票行情图

    canvas绘图,html5 k线图,股票行情图 canvas跟其他标签一样,也可以通过css来定义样式.但这里需要注意的是:canvas的默认宽高为300px * 150px,在css中为canva ...

  8. Python word_cloud 样例 标签云系列（三）

    转载地址:https://zhuanlan.zhihu.com/p/20436642word_cloud/examples at master · amueller/word_cloud · GitH ...

  9. java 柱状图、折线图、饼状图

    1.绘制柱状图: //BarChartTool工具类代码 package GUIview; import HibernateTool.HibernateTools; import ProductCla ...

随机推荐

  1. OLTP 与 OLAP

    OLTP:On-Line Transaction Processing(联机事务处理过程).也称为面向交易的处理过程,其基本特征是前台接收的用户数据可以立即传送到计算中心进行处理,并在很短的时间内给出 ...

  2. Storm Zookeeper

    本文记录了storm 1.1.0 在zookeeper中保存的信息. 下面的图是在[4]的基础上进行修改的. /-storm -- storm在zookeeper上的根目录 | |-/assignme ...

  3. ivew语法中'${}`的用法

  4. BootStrap--panel面板

    1 <div class="panel panel-default"> <div class="panel-body"> 这是一个基本的 ...

  5. zookeeper启动闪退

    编辑zkServer.cmd在它的尾行加上 pause      就可以将闪退停住来观察闪退的原因. 遇到Exception in thread "main" java.lang. ...

  6. caffe(7) solver及其配置

    solver算是caffe的核心的核心,它协调着整个模型的运作.caffe程序运行必带的一个参数就是solver配置文件.运行代码一般为 # caffe train --solver=*_slover ...

  7. ArcGIS api for javascript—测量，测距问题

    首先量测 var map, toolbar, geometryService ; function init() { map=new esri.Map("map",{ extent ...

  8. js 阻断网页选中和右键

    $(document).bind("contextmenu", function () { return false; }); $(document).bind("sel ...

  9. 泛泰A820L (高通MSM8660 cpu) 3.4内核的CM10.1(Android 4.2.2) 測试版第二版

    欢迎关注泛泰非盈利专业第三方开发团队 VegaDevTeam  (本team 由 syhost suky zhaochengw(z大) xuefy(大星星) tenfar(R大师) loogeo cr ...

  10. js最近天数

    //七天查询 recent(6); //30天查询 recent(30); //最近天数 var recent=function(arg){ var myDate = new Date(); //获取 ...