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 ...
随机推荐
- 38.angular的scope作用域
转自:https://www.cnblogs.com/best/tag/Angular/ 1. Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. S ...
- Java 类和对象7
创建一个三角形类,成员变量三边,方法求周长,创建类主类A来测试它. public class sanjiaoxing { private double a; private double b; pri ...
- WebApp之H5登录注册
代码indexhtml <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...
- CSS的flex布局和Grid布局
一.什么是 flex 布局 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这 ...
- UI Framework-1: Aura Gesture Recognizer
Gesture Recognizer Gesture Recognizer Overview This document describes the process by which Touch Ev ...
- Ubuntu 18.04 安装 Broadcom Limited BCM43142无线网卡驱动
系统默认没有集成 BCM43142无线网卡驱动可以通过下面的方法安装--------------------------------------------------------------root ...
- POJ2104 K-th Number(整体二分）
题解 又一次做这个题上一次用的是线段树上二分.这次用的是整体二分.结果: (第一个是整体二分) 整体二分就是对于所有查询都二分一个值.然后根据能不能成立把询问修改分成两部分,然后第二部分继承第一部分的 ...
- ArcGIS api for javascript——渲染-使用唯一值渲染
描述 本例使用唯一值渲染器来作为美国的符号.每个州有一个字符串属性"SUB_REGION"表示它的国家的地区.UniqueValueRenderer.addValue()方法被用来 ...
- apache kafka监控系列-KafkaOffsetMonitor
apache kafka中国社区QQ群:162272557 概览 近期kafka server消息服务上线了,基于jmx指标參数也写到zabbix中了.但总认为缺少点什么东西.可视化可操作的界面. z ...
- Launcher3实现壁纸居中
Launcher3的wallpaper显示是动态的,与Launcher预置桌面数目有关,让壁纸居中,仅仅能确保第一次开机时壁纸居中,后面用户改动桌面数目后,就无法达到了.怎样要在默认桌面数目配置时居中 ...