<!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: 510px;
border:1px solid #3473b7;
}

#toolbar {
position: relative;
padding-top: 5px;
padding-bottom: 10px;
}
</style>
<link href='./css/bootstrap.min.css' rel='stylesheet' />
<link href='./css/bootstrap-responsive.min.css' rel='stylesheet' />
<script src='./libs/SuperMap.Include.js'></script>
<script type="text/javascript">
var map, local, baseLayer, layersID, themeLayer,
url="http://localhost:8090/iserver/services/map-yh/rest/maps/world";
//url="http://192.168.15.133:8090/iserver/services/map-yh/rest/maps/world";
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("world", url, {transparent: true, cacheEnabled: false}, {maxResolution:"auto"});
baseLayer.events.on({"layerInitialized":addLayer});
}
function addLayer() {
map.addLayer(baseLayer);
map.setCenter(new SuperMap.LonLat(0.0,-3.19), 0);
map.allOverlays = true;
}

//添加标签专题图
function addThemeLabel() {
removeTheme();
var themeService = new SuperMap.REST.ThemeService(url, {eventListeners:{"processCompleted": themeCompleted, "processFailed": themeFailed}}),

//创建矩阵标签专题图
themeLabel = new SuperMap.REST.ThemeLabel({
labelExpression: "CAPITAL_CH",
numericPrecision: 2,
overlapAvoided: true
}),
themeParameters = new SuperMap.REST.ThemeParameters({
themes: [themeLabel],
datasetNames: ["Capital"],
dataSourceNames: ["ORCL"]

});
themeService.processAsync(themeParameters);
}
function themeCompleted(themeEventArgs) {
if(themeEventArgs.result.resourceInfo.id) {
themeLayer = new SuperMap.Layer.TiledDynamicRESTLayer("各国首都标签专题图", url, {cacheEnabled:false,transparent: true,overlapDisplayed: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()">
<div id="toolbar">
<input type="button" class="btn" value="创建专题图" onclick="addThemeLabel()" />
<input type="button" class="btn" value="移除专题图" onclick="removeTheme()" />
</div>
<div id="map"></div>
</body>
</html>

注：得到的结果图如下：

supermap iclient for js 标签专题图（服务端）的更多相关文章

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

    效果图例如以下:单值专题图并显示每一个区域的相关文字信息 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc29uZ2hmdQ==/font/5a6L5L2T ...

  2. SuperMap iClient for JavaScript image出图

    SuperMap iClient for JavaScript 客户端基于openlayers 开发. 目前最高版本为811,9D产品后推荐客户使用leaflet.openlayers客户端开发. 问 ...

  3. js发送请求给服务端

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. SuperMap iClient 7C——网络客户端GIS开发平台 产品新特性

    SuperMap iClient 7C是空间信息和服务的可视化交互开发平台,是SuperMap服务器系列产品的统一客户端.产品基于统一的架构体系,面向Web端和移动端提供了多种类型的SDK开发包,帮助 ...

  5. SuperMap iClient

    SuperMap iClient 7C——网络客户端GIS开发平台 产品新特性   SuperMap iClient 7C是空间信息和服务的可视化交互开发平台,是SuperMap服务器系列产品的统一客 ...

  6. 使用DWR实现JS调用服务端Java代码

    DWR简介 DWR全称Direct Web Remoting,是一款非常优秀的远程过程调用(Remote Procedure Call)框架,通过浏览器提供的Ajax引擎实现在前端页面的JS代码中调用 ...

  7. [vue] vue服务端渲染nuxt.js

    初始化 使用脚手架工具 create-nuxt-app 快速创建 npx create-nuxt-app <项目名> npx create-nuxt-app 执行一些选择 在集成的服务器端 ...

  8. Angular开发实践（六）：服务端渲染

    Angular Universal Angular在服务端渲染方面提供一套前后端同构解决方案,它就是 Angular Universal(统一平台),一项在服务端运行 Angular 应用的技术. 标 ...

  9. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十五║初探SSR服务端渲染（个人博客二）

    缘起 时间真快,现在已经是这个系列教程的下半部 Vue 第 12 篇了,昨天我也简单思考了下,可能明天再来一篇,Vue 就基本告一段落了,因为什么呢,这里给大家说个题外话,当时写博文的时候,只是想给大 ...

随机推荐

  1. C#设计模式系列：迭代器模式（Iterator）

    迭代器模式把对象的职责分离,职责分离可以最大限度减少彼此之间的耦合程度,从而建立一个松耦合的对象.职责分离的要点是对被分离的职责进行封装,并以抽象的方式建立彼此之间的关系. 1.迭代器模式简介 1.1 ...

  2. sizzle分析记录：getAttribute和getAttributeNode

    部分IE游览器下无法通过getAttribute取值? <form name="aaron"> <input type="text" name ...

  3. alert()与console.log()的区别

    [1]alert() [1.1]有阻塞作用,不点击确定,后续代码无法继续执行 [1.2]alert()只能输出string,如果alert输出的是对象会自动调用toString()方法 e.g. al ...

  4. Activity四种启动模式

    转载博客:http://blog.csdn.net/shinay/article/details/7898492 Activity启动方式有四种,分别是:standardsingleTopsingle ...

  5. Notes: select选择框

    HTML选择框通过select标签创建,该元素是HTMLSelectElement的实例,拥有以下属性和方法: selectedIndex:选中项的索引 options:选择框的所有选项 add:向选 ...

  6. 相克军_Oracle体系_随堂笔记005-Database buffer cache

    本章主要阐述SGA中的Database buffer cache. Buffer cache { 1.pin (读写瞬间的状态) 2.clean 3.dirty 4.unused } --Databa ...

  7. MySQL入门04-MySQL主从配置

    1.主节点授权同步用户 2.主节点修改配置文件 3.从节点修改配置文件 4.主节点锁定后查看状态 5.从节点配置并启动同步.查看状态 6.主节点解锁并验证从节点是否正常同步 环境:CentOS 6.7 ...

  8. Ubuntu下搭建ryu环境

    RYU环境搭建总共四步: step1:首先下载相应的python套件,并且更新pip $ sudo apt-get install python-pip python-dev build-essent ...

  9. Android之assets资源

    assets目录下存放的原生资源文件,通过getAssets()方法获取. 使用: InputStream inputStream; try { inputStream = getAssets().o ...

  10. byte为什么要与上0xff？

    无意间翻看之间的代码,发现了一段难以理解的代码. byte[] bs = digest.digest(origin.getBytes(Charset.forName(charsetName))) ; ...