之前有提过用 InfoTemplate 类对 FeatureLayer 的基本信息进行展示,今天为大家介绍 esri/dijit/Popup 的使用,这东西还有

简单的图表展示功能呢!

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Popup</title> <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
<style>
html, body, #map {
padding: 0;
margin: 0;
height: 100%;
} .esriPopup.dark div.titleButton,
.esriPopup.dark div.titlePane .title,
.esriPopup.dark div.actionsPane .action {
color: #A4CE67;
} .esriPopup.dark .esriPopupWrapper {
border: none;
}
.esriPopup .contentPane {
text-align: center;
}
.esriViewPopup .gallery {
margin: 0 auto;
}
</style> <script src="http://js.arcgis.com/3.10/"></script>
<script>
var map;
require([
"esri/map",
"esri/dijit/Popup", "esri/dijit/PopupTemplate",
"esri/layers/FeatureLayer",
"esri/symbols/SimpleFillSymbol", "esri/Color",
"dojo/dom-class", "dojo/dom-construct", "dojo/on",
"dojox/charting/Chart", "dojox/charting/themes/Dollar",
"dojo/domReady!"
], function(
Map,
Popup, PopupTemplate,
FeatureLayer,
SimpleFillSymbol, Color,
domClass, domConstruct, on,
Chart, theme
) {
var fill = new SimpleFillSymbol("solid", null, new Color("#A4CE67"));
var popup = new Popup({
fillSymbol: fill,
titleInBody: false
}, domConstruct.create("div"));
domClass.add(popup.domNode, "dark"); map = new Map("map", {
basemap: "gray",
center: [-98.57, 39.82],
zoom: 4,
infoWindow: popup
}); var template = new PopupTemplate({
title: "Boston Marathon 2013",
description: "{STATE_NAME}: {Percent_Fi} of starters finished",
fieldInfos: [{
fieldName: "Number_Ent", //属性名
label: "Entrants" //图表显示名
},{
fieldName: "Number_Sta",
label: "Starters"
},{
fieldName: "Number_Fin",
label: "Finishers"
}],
mediaInfos:[{
caption: "",
type:"barchart",
value:{
theme: "Dollar",
fields:["Number_Ent","Number_Sta","Number_Fin"]
}
}]
}); var featureLayer = new FeatureLayer("http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Boston_Marathon/FeatureServer/0",{
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
infoTemplate: template
});
map.addLayer(featureLayer);
});
</script>
</head> <body class="claro">
<div id="map"></div>
</body> </html>

效果:

                                    

机智的Popup,带着简单的图表感觉酷酷的的更多相关文章

  1. sChart.js:一个小型简单的图表库

    介绍 sChart.js 作为一个小型简单的图表库,没有过多的图表类型,只包含了柱状图.折线图.饼状图和环形图四种基本的图表.麻雀虽小,五脏俱全.sChart.js 基本可以满足这四种图表的需求.而它 ...

  2. 带你简单了解python协程和异步

    带你简单了解python的协程和异步 前言 对于学习异步的出发点,是写爬虫.从简单爬虫到学会了使用多线程爬虫之后,在翻看别人的博客文章时偶尔会看到异步这一说法.而对于异步的了解实在困扰了我好久好久,看 ...

  3. 带你简单了解域名系统DNS

    带你简单了解域名系统DNS 一.域名简介 1.1.DNS服务的作用 负责解析域名,将域名解析成IP地址. 1.2.域名系统概述 由于32位的IP地址并不容易记忆,人们往往喜欢记忆网站的域名.所以当我们 ...

  4. Android高级控件(四)——VideoView 实现引导页播放视频欢迎效果,超级简单却十分的炫酷

    Android高级控件(四)--VideoView 实现引导页播放视频欢迎效果,超级简单却十分的炫酷 是不是感觉QQ空间什么的每次新版本更新那炫炫的引导页就特别的激动,哈哈,其实他实现起来真的很简单很 ...

  5. socket.io简单入门(一.实现简单的图表推送)

    引子:随着nodejs蓬勃发展,虽然主要业务系统因为架构健壮性不会选择nodejs座位应用服务器.但是大量的内部系统却可以使用nodejs试水,大量的前端开发人员转入全堆开发也是一个因素. 研究本例主 ...

  6. WPF制作带明细的环形图表

    效果 明细用Popup实现的,录gif时,Popup显示不出来,不知道为什么,所以静态图凑合看吧 大体思路 图表使用Arc+Popup实现 图表分为两部分,一是环形部分,一是标注的明细部分. 环形部分 ...

  7. D3.js 做一个简单的图表(条形图)

    柱形图是一种最简单的可视化图标,主要有矩形.文字标签.坐标轴组成. 本文为简单起见,只绘制矩形的部分,用以讲解如何使用 D3 在 SVG 画布中绘图. 一. 画布是什么 前几章的处理对象都是 HTML ...

  8. 【 D3.js 入门系列 --- 3 】 做一个简单的图表!

    前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...

  9. RDLC报表系列(五) 简单的图表-柱状图

    继续接上一篇的内容,本文主要是讲图标的内容,本文就是简单的图标,复杂的柱状图和折线图在下一文章中介绍. 数据源还是上文RDLC报表系列(四) 矩阵中的相同 1.还是继续使用demo2的文件

随机推荐

  1. FPGA基础学习(6) -- 原语

    目录 1. IBUF和IBUFDS(IO) 2. IDDR(Input/Output Functions) 3. IBUFG和IBUFGDS(IO) 原语,即primitive.不同的厂商,原语不同: ...

  2. 带领技术小白入门——基于java的微信公众号开发(包括服务器配置、java web项目搭建、tomcat手动发布web项目、微信开发所需的url和token验证)

    微信公众号对于每个人来说都不陌生,但是许多人都不清楚是怎么开发的.身为技术小白的我,在闲暇之余研究了一下基于java的微信公众号开发.下面就是我的实现步骤,写的略显粗糙,希望大家多多提议! 一.申请服 ...

  3. linux ssh 上传 文件

    在linux下一般用scp这个命令来通过ssh传输文件. 1.从服务器上下载文件scp username@servername:/path/filename /var/www/local_dir(本地 ...

  4. Angular material mat-icon 资源参考_Action

    ul,li>ol { margin-bottom: 0 } dt { font-weight: 700 } dd { margin: 0 1.5em 1.5em } img { height: ...

  5. 论文阅读 | FPN:Feature Pyramid Networks for Object Detection

    论文地址:https://arxiv.org/pdf/1612.03144v2.pdf 代码地址:https://github.com/unsky/FPN 概述 FPN是FAIR发表在CVPR 201 ...

  6. STM32的固件升级(RTT

    STM32 通用 Bootloader ,让 OTA 更加 Easy 目前支持F1/F4,在线制作bootloader,准备固件升级,是RTT的云设备管理平台 https://mp.weixin.qq ...

  7. springboot+自定义注解实现灵活的切面配置

    利用aop我们可以实现业务代码与系统级服务例如日志记录.事务及安全相关业务的解耦,使我们的业务代码更加干净整洁. 最近在做数据权限方面的东西,考虑使用切面对用户访问进行拦截,进而确认用户是否对当前数据 ...

  8. 案例17-validate自定义校验规则校验验证码是否输入正确

    1 自定义校验规则代码 <script type="text/javascript"> //使用validate插件进行表单的校验 $(function(){ $(&q ...

  9. 远程连接postgresql和redis设置

    1. 让Postgresql服务器被远程访问 1.1 编辑 pg_hba.conf,配置用户的访问权限 vi /etc/postgresql/8.4/main/pg_hba.conf 增加设置项 ho ...

  10. Memcached 查询stats及各项状态解释

    一.两个最常用状态查询(掌握第一个就完全OK了) 1)查看状态:printf “stats\r\n” |nc 127.0.0.1 11211      2)模拟top命令查看状态:watch “ech ...