1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.     <!--The viewport meta tag is used to improve the presentation and behavior of the samples
  6.       on iOS devices-->
  7.     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  8.     <title>Feature Layer - display results as an InfoWindow onHover</title>
  9.  
  10.     <link rel="stylesheet" type="text/css" href="./arcgis_js_api/library/3.12/3.12/dijit/themes/tundra/tundra.css" />
  11.     <link rel="stylesheet" type="text/css" href="./arcgis_js_api/library/3.12/3.12/esri/css/esri.css" />
  12.     <style>
  13.         html, body, #mapDiv {
  14.             padding: 0;
  15.             margin: 0;
  16.             height: 100%;
  17.         }
  18.  
  19.         #mapDiv {
  20.             position: relative;
  21.         }
  22.  
  23.         #info {
  24.             background: #fff;
  25.             box-shadow: 0 0 5px #888;
  26.             left: 1em;
  27.             padding: 0.5em;
  28.             position: absolute;
  29.             bottom: 1em;
  30.             z-index: 40;
  31.         }
  32.     </style>
  33.  
  34.     <script src="./arcgis_js_api/library/3.12/3.12/init.js"></script>
  35.     <script src="./arcgis_js_api/library/3.12/3.12/js/dojo/dojo/dojo.js"></script>
  36.     <script>
  37.         var map, dialog;
  38.         // legacy
  39.         dojo.require("esri.map");
  40.         dojo.require("esri.layers.FeatureLayer");
  41.         dojo.require("esri.symbols.SimpleFillSymbol");
  42.         dojo.require("esri.symbols.SimpleLineSymbol");
  43.         dojo.require("esri.renderers.SimpleRenderer");
  44.         dojo.require("esri.graphic");
  45.         dojo.require("esri.lang");
  46.         dojo.require("esri.Color");
  47.         dojo.require("dojo.number");
  48.         dojo.require("dojo.dom-style");
  49.         dojo.require("dijit.TooltipDialog");
  50.         dojo.require("dijit.popup");
  51.         dojo.require("dojo.domReady");
  52.  
  53.         function init() {
  54.             map = new esri.Map("mapDiv", {
  55.                 center:[41486975.02495959, 5053546.601156929],
  56.                 zoom: 8,
  57.                 slider: true
  58.             });
  59.  
  60.             //添加一个图层
  61.             var censusMapLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://192.168.135.250:6080/arcgis/rest/services/CZDJ/CZDJ_ZD/MapServer");
  62.             map.addLayer(censusMapLayer);
  63.  
  64.             var baiChengCity = new esri.layers.FeatureLayer("http://192.168.135.250:6080/arcgis/rest/services/CZDJ/CZDJ_ZD/MapServer/2", {
  65.                 mode: esri.layers.FeatureLayer.MODE_SNAPSHOT, // be careful with the namespace using between AMD with Legacy
  66.                 outFields: ["QLR", "TDZL", "DJH", "YSDM", "ZDID"]
  67.             });
  68.  
  69.             // set define zone
  70.             // baiChengCity.setDefinitionExpression("YSDM =  '2006010100'");
  71.  
  72.             var symbol = new esri.symbol.SimpleFillSymbol(
  73.                 esri.symbol.SimpleFillSymbol.STYLE_SOLID,
  74.               new esri.symbol.SimpleLineSymbol(
  75.                 esri.symbol.SimpleLineSymbol.STYLE_SOLID,
  76.                 new esri.Color([255, 255, 255, 0.35]),
  77.                 1
  78.               ),
  79.               new esri.Color([125, 125, 125, 0.35])
  80.             );
  81.  
  82.             baiChengCity.setRenderer(new esri.renderer.SimpleRenderer(symbol));
  83.             map.addLayer(baiChengCity);
  84.  
  85.             // info window
  86.             map.infoWindow.resize(245, 125);
  87.  
  88.             dialog = new dijit.TooltipDialog({
  89.                 id: "tooltipDialog",
  90.                 style: "position: absolute; width: 250px; font: normal normal normal 10pt Helvetica;z-index:100"
  91.             });
  92.             dialog.startup();
  93.  
  94.             var highlightSymbol = new esri.symbol.SimpleFillSymbol(
  95.               esri.symbol.SimpleFillSymbol.STYLE_SOLID,
  96.               new esri.symbol.SimpleLineSymbol(
  97.                 esri.symbol.SimpleLineSymbol.STYLE_SOLID,
  98.                 new esri.Color([255, 0, 0]), 3
  99.               ),
  100.               new esri.Color([125, 125, 125, 0.35])
  101.             );
  102.  
  103.             //close the dialog when the mouse leaves the highlight graphic
  104.             map.on("load", function () {
  105.                 map.graphics.enableMouseEvents();
  106.                 map.graphics.on("mouse-out", closeDialog);
  107.  
  108.             });
  109.  
  110.             //listen for when the onMouseOver event fires on the countiesGraphicsLayer
  111.             //when fired, create a new graphic with the geometry from the event.graphic and add it to the maps graphics layer
  112.             baiChengCity.on("mouse-over", function (evt) {
  113.                 var t = "<b>${QLR}</b><hr><b>Land Class: </b>${TDZL}<br>"
  114.                   + "<b>Land Registration Number: </b>${DJH}<br>"
  115.                   + "<b>YSDM: </b>${YSDM}<br>"
  116.                   + "<b>Parcel ID: </b>${ZDID:NumberFormat}";
  117.  
  118.                 var content = esri.lang.substitute(evt.graphic.attributes, t);
  119.                 var highlightGraphic = new esri.graphic(evt.graphic.geometry, highlightSymbol);
  120.                 map.graphics.add(highlightGraphic);
  121.  
  122.                 dialog.setContent(content);
  123.  
  124.                 dojo['dom-style'].set(dialog.domNode, "opacity", 0.85);
  125.                 dijit.popup.open({
  126.                     popup: dialog,
  127.                     x: evt.pageX,
  128.                     y: evt.pageY
  129.                 });
  130.             });
  131.  
  132.             //显示坐标
  133.             dojo.connect(map, "onLoad", function () {
  134.                 dojo.connect(map, "onMouseMove", showCoordinates);
  135.                 dojo.connect(map, "onMouseDrag", showCoordinates);
  136.             });
  137.  
  138.         }
  139.  
  140.         function closeDialog()
  141.         {
  142.             map.graphics.clear();
  143.             dijit.popup.close(dialog);
  144.         }
  145.  
  146.         function showCoordinates(evt) {
  147.             var mp = evt.mapPoint;
  148.             dojo.byId("infoXY").innerHTML = "X: " + mp.x + "<br/>" + "Y: " + mp.y;
  149.         }
  150.         dojo.addOnLoad(init);
  151.  
  152.         /* AMD
  153.         require([
  154.           "esri/map", "esri/layers/FeatureLayer",
  155.           "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol",
  156.           "esri/renderers/SimpleRenderer", "esri/graphic", "esri/lang",
  157.           "esri/Color", "dojo/number", "dojo/dom-style",
  158.           "dijit/TooltipDialog", "dijit/popup", "dojo/domReady!"
  159.         ], function (
  160.           Map, FeatureLayer,
  161.           SimpleFillSymbol, SimpleLineSymbol,
  162.           SimpleRenderer, Graphic, esriLang,
  163.           Color, number, domStyle,
  164.           TooltipDialog, dijitPopup
  165.         ) {
  166.             map = new Map("mapDiv", {
  167.                 basemap: "streets",
  168.                 center: [-80.94, 33.646],
  169.                 zoom: 8,
  170.                 slider: false
  171.             });
  172.  
  173.             var southCarolinaCounties = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3", {
  174.                 mode: FeatureLayer.MODE_SNAPSHOT,
  175.                 outFields: ["NAME", "POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI"]
  176.             });
  177.             southCarolinaCounties.setDefinitionExpression("STATE_NAME = 'South Carolina'");
  178.  
  179.             var symbol = new SimpleFillSymbol(
  180.               SimpleFillSymbol.STYLE_SOLID,
  181.               new SimpleLineSymbol(
  182.                 SimpleLineSymbol.STYLE_SOLID,
  183.                 new Color([255, 255, 255, 0.35]),
  184.                 1
  185.               ),
  186.               new Color([125, 125, 125, 0.35])
  187.             );
  188.             southCarolinaCounties.setRenderer(new SimpleRenderer(symbol));
  189.             map.addLayer(southCarolinaCounties);
  190.  
  191.             map.infoWindow.resize(245, 125);
  192.  
  193.             dialog = new TooltipDialog({
  194.                 id: "tooltipDialog",
  195.                 style: "position: absolute; width: 250px; font: normal normal normal 10pt Helvetica;z-index:100"
  196.             });
  197.             dialog.startup();
  198.  
  199.             var highlightSymbol = new SimpleFillSymbol(
  200.               SimpleFillSymbol.STYLE_SOLID,
  201.               new SimpleLineSymbol(
  202.                 SimpleLineSymbol.STYLE_SOLID,
  203.                 new Color([255, 0, 0]), 3
  204.               ),
  205.               new Color([125, 125, 125, 0.35])
  206.             );
  207.  
  208.             //close the dialog when the mouse leaves the highlight graphic
  209.             map.on("load", function () {
  210.                 map.graphics.enableMouseEvents();
  211.                 map.graphics.on("mouse-out", closeDialog);
  212.  
  213.             });
  214.  
  215.             //listen for when the onMouseOver event fires on the countiesGraphicsLayer
  216.             //when fired, create a new graphic with the geometry from the event.graphic and add it to the maps graphics layer
  217.             southCarolinaCounties.on("mouse-over", function (evt) {
  218.                 var t = "<b>${NAME}</b><hr><b>2000 Population: </b>${POP2000:NumberFormat}<br>"
  219.                   + "<b>2000 Population per Sq. Mi.: </b>${POP00_SQMI:NumberFormat}<br>"
  220.                   + "<b>2007 Population: </b>${POP2007:NumberFormat}<br>"
  221.                   + "<b>2007 Population per Sq. Mi.: </b>${POP07_SQMI:NumberFormat}";
  222.  
  223.                 var content = esriLang.substitute(evt.graphic.attributes, t);
  224.                 var highlightGraphic = new Graphic(evt.graphic.geometry, highlightSymbol);
  225.                 map.graphics.add(highlightGraphic);
  226.  
  227.                 dialog.setContent(content);
  228.  
  229.                 domStyle.set(dialog.domNode, "opacity", 0.85);
  230.                 dijitPopup.open({
  231.                     popup: dialog,
  232.                     x: evt.pageX,
  233.                     y: evt.pageY
  234.                 });
  235.             });
  236.  
  237.             function closeDialog() {
  238.                 map.graphics.clear();
  239.                 dijitPopup.close(dialog);
  240.             }
  241.  
  242.         });*/
  243.     </script>
  244. </head>
  245. <body class="tundra">
  246.     <div id="mapDiv">
  247.  
  248.       <div id="info">
  249.             Hover over a county in BaiCheng City to get more information.
  250.        </div>
  251.        <div id="infoXY" style="position:absolute; right:25px; bottom:5px; color:#000; z-index:40;"></div>
  252.  
  253.     </div>
  254. </body>
  255. </html>

最近研究了一段时间Arcgis Javascript的 Web 前段开发, 虽然资料很多，但是还是感觉困难重重。

终于今天努力照着示例做出了一个像模像样的地图，虽然功能很简单，但是碰到了本地化js和Legacy的dojo使用方法很多细节问题，需要在以后工作中特别注意。

以后的路还很长，，，， To be continue。。。

第一个自定义开发的Arcgis地图的更多相关文章

  1. 转：arcgis api for js入门开发系列四地图查询

    原文地址:arcgis api for js入门开发系列四地图查询 arcgis for js的地图查询方式,一般来说,总共有三种查询方式:FindTask.IdentifyTask.QueryTas ...

  2. openlayers4 入门开发系列之地图导航控件篇（附源码下载）

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  3. openlayers4 入门开发系列之地图展示篇（附源码下载）

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  4. arcgis地图数据集合

    一.全国的ArcGIS地图SHP格式数据,覆盖的图层信息量基本齐全,除了ArcGIS之外,其他GIS软件(superMap和MapGIS.MapInfo等等)也是用之,适合为GIS开发提供数据素材. ...

  5. openlayers4 入门开发系列之地图模态层篇（附源码下载）

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  6. openlayers4 入门开发系列之地图属性查询篇（附源码下载）

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  7. openlayers4 入门开发系列之地图空间查询篇（附源码下载）

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  8. openlayers4 入门开发系列之地图工具栏篇（附源码下载）

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  9. openlayers4 入门开发系列之地图切换篇（附源码下载）

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

随机推荐

  1. python 终端模拟模块 pexpect

    简单介绍pexpect是 Don Libes 的 Expect 语言的一个 Python 实现,是一个用来启动子程序,并使用正则表达式对程序输出做出特定响应,以此实现与其自动交互的 Python 模块 ...

  2. ubuntu下某些文件目录

    1.#include <stdio.h> 2.#include <stdlib.h> stdio.h和stdlib.h的路径:/usr/include

  3. 反向代理服务器（Reverse Proxy）

    反向代理服务器(Reverse Proxy)   普通代理服务器是帮助内部网络的计算机访问外部网络.通常,代理服务器同时连接内网和外网.首先内网的计算机需要设置代理服务器地址和端口,然后将HTTP请求 ...

  4. css查缺补漏1

    css可以写在哪里 1.和要装饰的标签写在一起 2.内部样式表(内嵌式)是写在head头部标签中,并且用style标签定义 3.外部样式表(外链式) <head><link rel= ...

  5. PAT甲级练习题1001、1002

    1001 A+B Format (20 分)   Calculate a+b and output the sum in standard format -- that is, the digits ...

  6. HDU3625 Examining the Rooms

    @(HDU)[Stirling數] Problem Description A murder happened in the hotel. As the best detective in the t ...

  7. JavaScript奇技淫巧44招（2）

    JavaScript是一个绝冠全球的编程语言,可用于Web开发.移动应用开发(PhoneGap.Appcelerator).服务器端开发(Node.js和Wakanda)等等.JavaScript还是 ...

  8. mac升级系统自带numpy失败解决方案

    sudo pip install -U numpy 后抛出 OSError: [Errno 1] Operation not permitted: '/tmp/pip-o2xinZ-uninstall ...

  9. Hibernate操作Blob数据

      首先看数据库.数据库中新建一个BlobTable表,表中有两个字段,一个id(主键)一个picture字段是Blob类型字段.然后使用Hibernate向该数据库中写入和读取数据 在POJO类中p ...

  10. MySQL主从复制技术与读写分离技术amoeba应用

    MySQL主从复制技术与读写分离技术amoeba应用 前言:眼下在搭建一个人才站点,估计流量会非常大,须要用到分布式数据库技术,MySQL的主从复制+读写分离技术.读写分离技术有官方的MySQL-pr ...