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:\/\//)?":8090":'' + 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 onload="init()"><br><div id="toolbar"><input type="button" value="创建专题图" onclick="addThemeUnique()" /><input type="button" value="移除专题图" onclick="removeTheme()" /></div><div id="map"></div></body></html>

,开上一部车,装着我们的故事,

Supermap 组合单值专题图与标签专题图示例

相关文章:

你感兴趣的文章:

标签云: