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 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>
时间： 2024-10-02 12:22:25

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

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

效果图例如以下:单值专题图并显示每一个区域的相关文字信息 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc29uZ2hmdQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" > 代码: <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type

PhpCMS标签：专题模块special标签

专题模块 专题模块PC标签调用说明 模块名:special 模块提供的可用操作 操作名 说明 lists 专题列表 content_list 专题信息列表 hits 专题信息点击排序 下面对所有的操作分开说明 专题列表(lists): 可用参数: 参数名 是否必须 默认值 说明 siteid 否 当前站点 站点ID elite 否 null 是否推荐 isthumb 否 null 必须有缩略图 listorder 否 null 排序方式 代码例子: {pc:special action="lis

图的算法专题——最短路径

概要: Dijkstra算法 Bellman-Ford算法 SPFA算法 Floyd算法 1.Dijkstra算法用于解决单源最短路径问题,严格讲是无负权图的最短路径问题. 邻接矩阵版 1 const int maxv=1000; 2 const int INF=1000000000; 3 int n,G[maxv][maxv]; 4 int d[maxv]; //起点到各点的最短路径长度 5 bool vis[maxv]={false}; 6 7 void Dijkstra(int s){ /

HTML5标签与HTML4标签的区别示例介绍_html5教程技巧

(1)概念的变化: HTML5专注内容与结构,而不专注的表现 <header> <hgroup>导航相关数据</hgroup> </header> <nav>菜单</nav> <article> <h1>标题:HTML5专题视频教程</h1> (2)声明与标签: HTML5在更多的声明和标签上面做了简化,也对兼容做了详细的规定,废除了部分元素,增加了部分元素. HTML5标签语法介绍及新增标记 1.

UML9种图中的序列图和协作图

序列图 序列图是系统动态模型中的一种交互视图,描述了执行系统功能的各个角色之间相互传递消息的顺序,侧重于强调时间顺序,从一定程度上更加详细地描述了用例的需求. 在面向动态行为进行建模时,通过描述一组相关联.彼此相互作用的对象之间的动作序列和配合关系,以及这些对象之间传递.接受的消息来描述系统为实现自身的某个功能而展开的一组动态行为.在面向控制流进行建模时,可以针对一个用例.一个业务操作过程.系统操作过程.整个系统.重点在于消息在系统内如何按照时间顺序被发送.接受和处理的. 序列图的作用: 1. 

量化投资_关于Multicharts砖型图(传统砖型图和非传统砖型图)最详细的解释

1. Multicharts的图表中有砖型图的解释,参考官方论坛解释:https://forum.multicharts.cn/forum/cat/1/thread/2821?k=%E7%A0%96 2. 砖型图在交易中会非常棒的提升交易绩效,因为砖型图起到了降噪和二分的作用,降噪不用多解释,因为事先设定砖型图的波动单位,不符合这个单位的小波动就被过滤掉了:所谓二分就是在砖型图的世界中只有两种状态:涨和跌,因此对于绩效的提升非常棒. 3. 但是在Multicharts砖型图不能直接用于交易,这就

Android之自定义控件实现天气温度折线图和饼状图

以前写了个天气的APP,最近把他更新了一个版本,就抽取其中的天气温度折现图这个功能写了这篇博客,来与大家分享,希望对你有所帮助. 效果如图: 代码: MainActivity.Java /**** * 饼状图和天气折线图 */ public class MainActivity extends AppCompatActivity { private WeatnerChartView chart1; private WeatnerChartView chart2; private PinChart

数据结构之图（一）图的存储结构

图的存储结构相对于线性表和树来说更为复杂,因为图中的顶点具有相对概念,没有固定的位置.那我们怎么存储图的数据结构呢?我们知道,图是由(V, E)来表示的,对于无向图来说,其中 V = (v0, v1, ... , vn),E = { (vi,vj) (0 <=  i, j <=  n且i 不等于j)},对于有向图,E = { < vi,vj > (0 <=  i, j <=  n且i 不等于j)}.V是顶点的集合,E是边的集合.所以我们只要把顶点和边的集合储存起来,那么

Web前端设计:Html强制不换行&lt;nobr&gt;标签用法代码示例

在网页排版布局中比如文章列表标题排版,无论多少文字均不希望换行显示,需要强制在一行显示完内容.这就可以nobr标签来实现.它起到的作用与word-break:keep-all 是一样的.nobr 是 No Break 的缩写,意思是禁止换行.通常在浏览器上显示的文档会在到达浏览器的横幅底端时自动换行,但是如果文字被包含在<nobr>-</nobr>标签里的话,则不会换行.由www.169it.com搜集整理 一.nobr语法 1 <nobr>内容</nobr>