Supermap 组合单值专题图与标签专题图演示样例
效果图例如以下：单值专题图并显示每一个区域的相关文字信息
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc29uZ2hmdQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
代码：
<!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>
Supermap 组合单值专题图与标签专题图演示样例的更多相关文章
- 图标插件--jqplot实现柱状图及饼图，表盘图演示样例
柱状图 在jqPlot图表插件使用说明(一)中,我们已经能够通过jqPlot绘制出比較简单的线形图.通过查看源码.我们也能够看出,线形图是jqPlot默认的图表类型: /** * Class: Ser ...
- PHPCMS中GET标签概述、 get 标签语法、get 标签创建工具、get 调用本系统演示样例、get 调用其它系统演示样例
一.get 标签概述 通俗来讲,get 标签是Phpcms定义的能直接调用数据库里面内容的简单化.友好化代码,她可调用本系统和外部数据,仅仅有你对SQL有一定的了解,她就是你的绝世好剑!也就是适合熟悉 ...
- supermap iclient for js 标签专题图（服务端）
<!DOCTYPE><html> <head> <meta http-equiv="Content-Type" content=" ...
- PhpCMS标签：专题模块special标签
专题模块 专题模块PC标签调用说明 模块名:special 模块提供的可用操作 操作名 说明 lists 专题列表 content_list 专题信息列表 hits 专题信息点击排序 下面对所有的操作 ...
- SuperMap iDesktop .NET 10i制图技巧-----如何贴图
当我们在没有模型数据的情况下,我们只能通过造白膜来模拟三维建筑了,但是光秃秃的建筑物显然缺乏代入感,因此需要贴图来给场景润色,本文介绍如何给道路贴图和如何给白膜贴图 道路贴图: 1.打开二维道路数据 ...
- Android绘图机制（四）——使用HelloCharts开源框架搭建一系列炫酷图表，柱形图，折线图，饼状图和动画特效，抽丝剥茧带你认识图表之美
Android绘图机制(四)--使用HelloCharts开源框架搭建一系列炫酷图表,柱形图,折线图,饼状图和动画特效,抽丝剥茧带你认识图表之美 这里为什么不继续把自定义View写下去呢,因为最近项目 ...
- canvas绘图，html5 k线图，股票行情图
canvas绘图,html5 k线图,股票行情图 canvas跟其他标签一样,也可以通过css来定义样式.但这里需要注意的是:canvas的默认宽高为300px * 150px,在css中为canva ...
- Python word_cloud 样例 标签云系列（三）
转载地址:https://zhuanlan.zhihu.com/p/20436642word_cloud/examples at master · amueller/word_cloud · GitH ...
- java 柱状图、折线图、饼状图
1.绘制柱状图: //BarChartTool工具类代码 package GUIview; import HibernateTool.HibernateTools; import ProductCla ...
随机推荐
- hdu_5139 概率问题
#include<iostream> #include<cstdio> #include<cmath> using namespace std; int main( ...
- 曲根英语万词---二、evoke
曲根英语万词---二.evoke 一.总结 一句话总结:evoke v.唤起,引起 词根:-voc-, -vok- [词根含义]:声音,叫喊 1.consecrate? v,供奉,奉为神圣 -ate, ...
- spark groupByKey 也是可以filter的
>>> v=sc.parallelize(["one", "two", "two", "three", ...
- struts2标签#、%、$取值
转自:https://blog.csdn.net/kosum/article/details/21375635 首先了解下OGNL的概念: OGNL是Object-Graph Navigation L ...
- Webfont 的兼容性问题[持续更新]
低版安卓手机的 webview 显示不了,另外黑莓手机显示出来是这样: 生成工具: 离线字体生成工具:webfont 在线字体生成平台:icomoon.io, iconfont.cn均有问题 其他一些 ...
- iview 分页的案例
//html部分 //js部分
- Maven（一）之Maven入门
一.Maven简介 Maven可以翻译为“知识的积累”.“专家”.“内行”.作为Apache组织中的一个颇为成功的开源项目,Maven主要服务于基于Java平台的项目构建.依赖管理.和项目信息管理.M ...
- Benelux Algorithm Programming Contest 2014 Final（第二场）
B:Button Bashing You recently acquired a new microwave, and noticed that it provides a large number ...
- caffe(3) 视觉层及参数
本文只讲解视觉层(Vision Layers)的参数,视觉层包括Convolution, Pooling, Local Response Normalization (LRN)局部相应归一化, im2 ...
- vue滚动行为
有人问道如何记录vue页面的滚动条位置,再次载入组件的时候页面滚动到记录的位置? 思路: 记录滚动条位置我们好记 我们要在组件销毁之前也就是页面跳转的时候 需要用到生命周期beforeDistory将 ...