Supermap 组合单值专题图与标签专题图演示样例
生活随笔
收集整理的這篇文章主要介紹了
Supermap 组合单值专题图与标签专题图演示样例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果圖例如以下：單值專題圖并顯示每一個區域的相關文字信息
?
代碼：
<!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: 520px; border:1px solid #3473b7; } #toolbar{ position: relative; height: 33px; padding-top:5; } </style> <script src='./supermap_iclient_for_JavaScript_712_12428_1122/libs/SuperMap.Include.js'></script> <script type="text/javascript"> var map, local, baseLayer, layersID, themeLayer, host = document.location.toString().match(/file:\/\//)?"http://localhost:8090":'http://' + document.location.host, url=host+"/iserver/services/map-China400/rest/maps/China"; function init(){ map = new SuperMap.Map("map",{controls: [ new SuperMap.Control.LayerSwitcher(), new SuperMap.Control.ScaleLine(), new SuperMap.Control.Zoom(), new SuperMap.Control.Navigation({ dragPanOptions: { enableKinetic: true } })] }); baseLayer = new SuperMap.Layer.TiledDynamicRESTLayer("China400", url, {transparent: true, cacheEnabled: true}, {maxResolution: "auto"}); baseLayer.events.on({"layerInitialized": addLayer}); }function addLayer() { map.addLayer(baseLayer); map.setCenter(new SuperMap.LonLat(12080677, 4591416), 3); map.allOverlays = true; } /** *疊加專題圖 */ function addThemeUnique() { removeTheme(); var themeService = new SuperMap.REST.ThemeService(url, {eventListeners:{"processCompleted": themeCompleted, "processFailed": themeFailed}}); var style1, style2, style3, style4, style5, style6; var style1, style2, style3, style4, style5, style6; style1 = new SuperMap.REST.ServerStyle({ fillForeColor: new SuperMap.REST.ServerColor(248, 203, 249), lineColor: new SuperMap.REST.ServerColor(0, 0, 0), lineWidth: 0.1 }); style2 = new SuperMap.REST.ServerStyle({ fillForeColor: new SuperMap.REST.ServerColor(196, 255, 189), lineColor: new SuperMap.REST.ServerColor(0, 0, 0), lineWidth: 0.1 }); style3 = new SuperMap.REST.ServerStyle({ fillForeColor: new SuperMap.REST.ServerColor(255, 173, 173), lineColor: new SuperMap.REST.ServerColor(0, 0, 0), lineWidth: 0.1 }); style4 = new SuperMap.REST.ServerStyle({ fillForeColor: new SuperMap.REST.ServerColor(255, 239, 168), lineColor: new SuperMap.REST.ServerColor(0, 0, 0), lineWidth: 0.1 }); style5 = new SuperMap.REST.ServerStyle({ fillForeColor: new SuperMap.REST.ServerColor(173, 209, 255), lineColor: new SuperMap.REST.ServerColor(0, 0, 0), lineWidth: 0.1 }); style6 = new SuperMap.REST.ServerStyle({ fillForeColor: new SuperMap.REST.ServerColor(132, 164, 232), lineColor: new SuperMap.REST.ServerColor(0, 0, 0), lineWidth: 0.1 });var themeUniqueIteme1 = new SuperMap.REST.ThemeUniqueItem({ unique: "黑龍江省", style: style1 }), themeUniqueIteme2 = new SuperMap.REST.ThemeUniqueItem({ unique: "湖北省", style: style2 }), themeUniqueIteme3 = new SuperMap.REST.ThemeUniqueItem({ unique: "吉林省", style: style3 }), themeUniqueIteme4 = new SuperMap.REST.ThemeUniqueItem({ unique: "內蒙古自治區", style: style4 }), themeUniqueIteme5 = new SuperMap.REST.ThemeUniqueItem({ unique: "青海省", style: style5 }), themeUniqueIteme6 = new SuperMap.REST.ThemeUniqueItem({ unique: "新疆維吾爾自治區", style: style6 }), themeUniqueIteme7 = new SuperMap.REST.ThemeUniqueItem({ unique: "云南省", style: style1 }), themeUniqueIteme8 = new SuperMap.REST.ThemeUniqueItem({ unique: "四川省", style: style4 }), themeUniqueIteme9 = new SuperMap.REST.ThemeUniqueItem({ unique: "貴州省", style: style3 }), themeUniqueIteme10 = new SuperMap.REST.ThemeUniqueItem({ unique: "甘肅省", style: style3 }), themeUniqueIteme11 = new SuperMap.REST.ThemeUniqueItem({ unique: "寧夏回族自治區", style: style5 }), themeUniqueIteme12 = new SuperMap.REST.ThemeUniqueItem({ unique: "重慶市", style: style6 }), themeUniqueIteme13 = new SuperMap.REST.ThemeUniqueItem({ unique: "山東省", style: style1 }), themeUniqueIteme14 = new SuperMap.REST.ThemeUniqueItem({ unique: "安徽省", style: style2 }), themeUniqueIteme15 = new SuperMap.REST.ThemeUniqueItem({ unique: "江西省", style: style3 }), themeUniqueIteme16 = new SuperMap.REST.ThemeUniqueItem({ unique: "浙江省", style: style4 }), themeUniqueIteme17 = new SuperMap.REST.ThemeUniqueItem({ unique: "臺灣省", style: style2 }), themeUniqueIteme18 = new SuperMap.REST.ThemeUniqueItem({ unique: "江蘇省", style: style6 }), themeUniqueIteme19 = new SuperMap.REST.ThemeUniqueItem({ unique: "湖南省", style: style5 }), themeUniqueIteme20 = new SuperMap.REST.ThemeUniqueItem({ unique: "河南省", style: style4 }), themeUniqueIteme21 = new SuperMap.REST.ThemeUniqueItem({ unique: "河北省", style: style3 }), themeUniqueIteme22 = new SuperMap.REST.ThemeUniqueItem({ caption:"福建省", unique: "福建省", style: style5 }), themeUniqueIteme23 = new SuperMap.REST.ThemeUniqueItem({ unique: "廣西壯族自治區", style: style6 }), themeUniqueIteme24 = new SuperMap.REST.ThemeUniqueItem({ unique: "西藏自治區", style: style2 }), themeUniqueIteme25 = new SuperMap.REST.ThemeUniqueItem({ unique: "廣東省", style: style4 }), themeUniqueIteme26 = new SuperMap.REST.ThemeUniqueItem({ unique: "山西省", style: style2 }), themeUniqueIteme27 = new SuperMap.REST.ThemeUniqueItem({ unique: "陜西省", style: style1 }), themeUniqueIteme28 = new SuperMap.REST.ThemeUniqueItem({ unique: "天津市", style: style5 }), themeUniqueIteme29 = new SuperMap.REST.ThemeUniqueItem({ unique: "北京市", style: style2 }), themeUniqueIteme30 = new SuperMap.REST.ThemeUniqueItem({ unique: "遼寧省", style: style1 });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];var themeUnique = new SuperMap.REST.ThemeUnique({ uniqueExpression: "Name", items: themeUniqueItemes, defaultStyle: style1 });//label專題圖 style1 = new SuperMap.REST.ServerTextStyle({fontHeight: 4,foreColor: new SuperMap.REST.ServerColor(100,20,50),<strong><span style="color:#ff0000;"> sizeFixed: true,//當 sizeFixed 為 True 時，單位為毫米（mm）。</span></strong>bold:true }),style2 = new SuperMap.REST.ServerTextStyle({fontHeight: 0,foreColor: new SuperMap.REST.ServerColor(100,20,50),sizeFixed: true,//當 sizeFixed 為 True 時，單位為毫米（mm）。bold:true }), //設置標簽專題圖的子項themeLabelIteme1 = new SuperMap.REST.ThemeLabelItem({start: 0.0,end: 20.0,style: style1}),<strong><span style="color:#ff0000;">//設置不要顯示的數據。必須設置不然所有顯示出來</span></strong>themeLabelIteme2 = new SuperMap.REST.ThemeLabelItem({start: 20.0,end: 1000.0,style: style2, <span style="white-space:pre"> </span><span style="color:#ff0000;"><strong>visible:false</strong></span>}),themeLabelOne = new SuperMap.REST.ThemeLabel({labelExpression: "NAME",//標注字段表達式rangeExpression: "SMID",numericPrecision: 0,items: [themeLabelIteme1,themeLabelIteme2]}),//創建矩陣標簽元素LabelThemeCellOne=new SuperMap.REST.LabelThemeCell({themeLabel: themeLabelOne}),//矩陣背景backStyle=new SuperMap.REST.ServerStyle({fillForeColor: new SuperMap.REST.ServerColor(255,255,0),fillOpaqueRate: 60,lineWidth: 0.1}), <span style="white-space:pre"> </span>//創建矩陣標簽專題圖themeLabel = new SuperMap.REST.ThemeLabel({matrixCells: [[LabelThemeCellOne]],<span style="white-space:pre"> </span>maxLabelLength:20,<span style="white-space:pre"> </span><span style="color:#ff0000;"><strong>smallGeometryLabeled:true,//關鍵點不然有可能看不到文字效果哦</strong></span>background:new SuperMap.REST.ThemeLabelBackground({backStyle: backStyle, labelBackShape:"RECT"})}), themeParameters = new SuperMap.REST.ThemeParameters({ datasetNames: ["China_Province_R"], dataSourceNames: ["China400"], <span style="color:#ff0000;"><strong>themes: [themeLabel,themeUnique]//兩個專題圖組合</strong></span> }); themeService.processAsync(themeParameters); }function themeCompleted(themeEventArgs) { if(themeEventArgs.result.resourceInfo.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 οnlοad="init()"><br> <div id="toolbar"> <input type="button" value="創建專題圖" οnclick="addThemeUnique()" /> <input type="button" value="移除專題圖" οnclick="removeTheme()" /> </div> <div id="map"></div> </body> </html>轉載于:https://www.cnblogs.com/yutingliuyl/p/6941346.html
總結
以上是生活随笔為你收集整理的Supermap 组合单值专题图与标签专题图演示样例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： html 属性中嵌套php,如何在PHP
- 下一篇： 干货分享！DevExpressv16.2