之前有提过用 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. Jmeter打开url时提示“请在微信客户端打开链接问题”

    前提: 1.HTTP信息头管理器已添加了“User-Agent” 2.工作台添加HTTP代理服务器(注意端口和客户端填写的代理端口要一致) 但是运行的时候总是提示“请在微信客户端打开链接” 查阅各种资 ...

  2. 九校联考（DL24凉心模拟） 整除（中国剩余定理＋原根性质）

    题意简述 给定 \(n, m\),求 \(n|x^m - x\) 在满足 \(x \in [1, n]\) 时合法的 \(x\) 的数量.答案模 \(998244353\).单个测试点包含多组数据. ...

  3. CSS定位属性

                  定位属性                                                              position属性 1.      s ...

  4. Python——Django学习笔记

    Django——一个封装好的神奇框架 若本文有任何内容错误,望各位大佬指出批评,并请直接联系作者修改,谢谢!小白学习不易. 一.简要模型 模型类操作数据表: python manage.py shel ...

  5. 送给张思漫，李志媛和王颖的C语言经典例题

    1.打印乘法口诀表 #include<stdio.h> int main() { int i, j; ; i <= ; i++){ ; j <= i; j++) { print ...

  6. gcc 常用命令

    gcc编译器 $ gcc -o XX.exe XXX.c ddd.c $ gcc -o XX.asm -S XXX.c  编译生成可执行文件,并执行程序,缺省的时候,gcc 编译出来的文件是a.out ...

  7. php查询某个字段指定值的所有条数

    一.查询某个字段指定值的所有条数 以name叫张三的人为例,查询表中叫张三的人的总数 $where['name']='张三'; $count=M('table')->where($where)- ...

  8. MyBatis逆向工程详细教程

    1 导入逆向工程到eclipse中 2 修改配置文件 注意修改以下几点: 修改要生成的数据库表 pojo文件所在包路径 Mapper所在的包路径 配置文件如下: <?xml version=&q ...

  9. Array【数组】和Object【对象】的特性比较

    数组是JavaScript提供的一个内部对象,它是一个标准的集合,我们可以添加(push).删除(shift)里面元素,我们还可以通过for循环遍历里面的元素. 那么除了数组我们在JavaScript ...

  10. Ubuntu 下常用的命令 简略记录

    # 动态显示 NVIDIA watch -n 1 nvidia-smi #查看某一目录下文件的总数(不包含子目录) ls -l | wc -l #挂载硬盘或者U盘 mount /dev/sdb1 /m ...