<!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. JavaScript 开发技巧 || 返回有效值

    <script type="text/javascript">var objOne = undefined || "" || null || 1 | ...

  2. 【原创】开源Math.NET基础数学类库使用(13)C#实现其他随机数生成器

                   本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新  开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录 前言 ...

  3. C#线程同步自动重置事件——AutoResetEvent

    AutoResetEvent对象用来进行线程同步操作,AutoResetEvent类继承waitHandle类. AutoResetEvent对象有终止和非终止两种状态,终止状态是线程继续执行,非终止 ...

  4. 微软消息分析器（Microsoft Message Analyzer ）更新至1.2版-2015-1-20

    就在刚才,收到了微软Connect的邮件推送,大名鼎鼎的微软消息分析器更新至1.2版,并且有公众下载链接,大家可以在这里进行下载. 这里简单摘录一下博客里面提到的新版所增加的功能与功能的改进方面. G ...

  5. 多种方法实现Loading（加载）动画效果

    当我们ajax提交一个按钮的时候,给那个按钮来个Loading效果会高端很多,体验也会上升个层次. 既能让用户知道正在提交中,也能防止二次提交,好处多多呢.

  6. html5 meta(移动端）介绍及使用

    随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的选择.然而,每一款手机有不同的分辨率,不同屏幕 ...

  7. struts2学习笔记--动手搭建环境+第一个helloworld项目

    在Myeclipse中已经内置好了struts2的环境,但是为了更好的理解,这里自己从头搭建一下: 前期准备:下载struts2的完整包,下载地址:https://struts.apache.org/ ...

  8. kafka配置参数

    Kafka为broker,producer和consumer提供了很多的配置参数. 了解并理解这些配置参数对于我们使用kafka是非常重要的.本文列出了一些重要的配置参数. 官方的文档 Configu ...

  9. 【十大经典数据挖掘算法】kNN

    [十大经典数据挖掘算法]系列 C4.5 K-Means SVM Apriori EM PageRank AdaBoost kNN Naïve Bayes CART 1. 引言 顶级数据挖掘会议ICDM ...

  10. 4.DB Initialization（数据库初始化）[EF Code-First系列]

    前面的例子中,我们已经看到了Code-First自动为我们创建数据库的例子. 这里我们将要学习的是,当初始化的时候,Code-First是怎么决定数据库的名字和服务的呢??? 下面的图,解释了这一切! ...