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 ...
随机推荐
- Python TurtleWorld configuration and simple test
TurtleWorld provides a set of functions for drawing lines by steering turtles around the screen. You ...
- kali 2.0 linux中的Nmap的操作系统扫描功能
不多说,直接上干货! 可以使用-O选项,让Nmap对目标的操作系统进行识别. msf > nmap -O 202.193.58.13 [*] exec: nmap -O 202.193.58.1 ...
- 基于分布式的短文本命题实体识别之----人名识别（python实现）
目前对中文分词精度影响最大的主要是两方面:未登录词的识别和歧义切分. 据统计:未登录词中中文姓人名在文本中一般只占2%左右,但这其中高达50%以上的人名会产生切分错误.在所有的分词错误中,与人名有关的 ...
- .net 操作INI文件
using System.Runtime.InteropServices; using System.Text; namespace FaureciaManager { public class Fi ...
- windows, fast-rcnn CPU版本的安装配置
一:安装准备 1:caffe的安装配置,本人用的是happynear大神的caffe版本,具体链接https://github.com/happynear/caffe-windows,编译时需要用到p ...
- 浅谈Sass与Less区别、优缺点
Sass是一种动态样式语言,Sass语法的缩排语法,比Css比多出很多功能,如变量,嵌套,运算,继承,颜色处理,函数等,易于阅读.Cass的安装需要安装Ruby环境,是服务器端处理的,Less是需要引 ...
- apache（XAMPP）禁止IP访问的httpd-vhosts.conf设置
httpd-vhosts.conf <virtualhost *:80> ServerName 123.123.123.123 ServerAlias 123.123.123.123 ...
- 洛谷3857 [TJOI2008]彩灯
题目描述 已知一组彩灯是由一排N个独立的灯泡构成的,并且有M个开关控制它们.从数学的角度看,这一排彩灯的任何一个彩灯只有亮与不亮两个状态,所以共有2N个样式.由于技术上的问题,Peter设计的每个开关 ...
- Linux 下安装 redis 详情
一:将redis 压缩包上传到 Linux usr/local下 (一):在local 下创建一个 redis 目录 (二):上传redis压缩包到此目录下. 二:Linux 进入 local目录下 ...
- 基于请求响应的MVC框架调用分析
一.使用Servlet来处理请求响应 当client提交数据之后.接着发送请求,请求被封装成对象,server接收到请求,依据请求的URL.来推断将请求对象交由哪个Servlet处理. 在servle ...