第一个自定义开发的Arcgis地图

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <!--The viewport meta tag is used to improve the presentation and behavior of the samples

      on iOS devices-->

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

    <title>Feature Layer - display results as an InfoWindow onHover</title>

    <link rel="stylesheet" type="text/css" href="./arcgis_js_api/library/3.12/3.12/dijit/themes/tundra/tundra.css" />

    <link rel="stylesheet" type="text/css" href="./arcgis_js_api/library/3.12/3.12/esri/css/esri.css" />

    <style>

        html, body, #mapDiv {

            padding: 0;

            margin: 0;

            height: 100%;

        }

        #mapDiv {

            position: relative;

        }

        #info {

            background: #fff;

            box-shadow: 0 0 5px #888;

            left: 1em;

            padding: 0.5em;

            position: absolute;

            bottom: 1em;

            z-index: 40;

        }

    </style>

    <script src="./arcgis_js_api/library/3.12/3.12/init.js"></script>

    <script src="./arcgis_js_api/library/3.12/3.12/js/dojo/dojo/dojo.js"></script>

    <script>

        var map, dialog;

        // legacy

        dojo.require("esri.map");

        dojo.require("esri.layers.FeatureLayer");

        dojo.require("esri.symbols.SimpleFillSymbol");

        dojo.require("esri.symbols.SimpleLineSymbol");

        dojo.require("esri.renderers.SimpleRenderer");

        dojo.require("esri.graphic");

        dojo.require("esri.lang");

        dojo.require("esri.Color");

        dojo.require("dojo.number");

        dojo.require("dojo.dom-style");

        dojo.require("dijit.TooltipDialog");

        dojo.require("dijit.popup");

        dojo.require("dojo.domReady");

        function init() {

            map = new esri.Map("mapDiv", {

                center:[41486975.02495959, 5053546.601156929],

                zoom: 8,

                slider: true

            });

            //添加一个图层

            var censusMapLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://192.168.135.250:6080/arcgis/rest/services/CZDJ/CZDJ_ZD/MapServer");

            map.addLayer(censusMapLayer);

            var baiChengCity = new esri.layers.FeatureLayer("http://192.168.135.250:6080/arcgis/rest/services/CZDJ/CZDJ_ZD/MapServer/2", {

                mode: esri.layers.FeatureLayer.MODE_SNAPSHOT, // be careful with the namespace using between AMD with Legacy

                outFields: ["QLR", "TDZL", "DJH", "YSDM", "ZDID"]

            });

            // set define zone

            // baiChengCity.setDefinitionExpression("YSDM =  '2006010100'");

            var symbol = new esri.symbol.SimpleFillSymbol(

                esri.symbol.SimpleFillSymbol.STYLE_SOLID,

              new esri.symbol.SimpleLineSymbol(

                esri.symbol.SimpleLineSymbol.STYLE_SOLID,

                new esri.Color([255, 255, 255, 0.35]),

                1

              ),

              new esri.Color([125, 125, 125, 0.35])

            );

            baiChengCity.setRenderer(new esri.renderer.SimpleRenderer(symbol));

            map.addLayer(baiChengCity);

            // info window

            map.infoWindow.resize(245, 125);

            dialog = new dijit.TooltipDialog({

                id: "tooltipDialog",

                style: "position: absolute; width: 250px; font: normal normal normal 10pt Helvetica;z-index:100"

            });

            dialog.startup();

            var highlightSymbol = new esri.symbol.SimpleFillSymbol(

              esri.symbol.SimpleFillSymbol.STYLE_SOLID,

              new esri.symbol.SimpleLineSymbol(

                esri.symbol.SimpleLineSymbol.STYLE_SOLID,

                new esri.Color([255, 0, 0]), 3

              ),

              new esri.Color([125, 125, 125, 0.35])

            );

            //close the dialog when the mouse leaves the highlight graphic

            map.on("load", function () {

                map.graphics.enableMouseEvents();

                map.graphics.on("mouse-out", closeDialog);

            });

            //listen for when the onMouseOver event fires on the countiesGraphicsLayer

            //when fired, create a new graphic with the geometry from the event.graphic and add it to the maps graphics layer

            baiChengCity.on("mouse-over", function (evt) {

                var t = "<b>${QLR}</b><hr><b>Land Class: </b>${TDZL}<br>"

                  + "<b>Land Registration Number: </b>${DJH}<br>"

                  + "<b>YSDM: </b>${YSDM}<br>"

                  + "<b>Parcel ID: </b>${ZDID:NumberFormat}";

                var content = esri.lang.substitute(evt.graphic.attributes, t);

                var highlightGraphic = new esri.graphic(evt.graphic.geometry, highlightSymbol);

                map.graphics.add(highlightGraphic);

                dialog.setContent(content);

                dojo['dom-style'].set(dialog.domNode, "opacity", 0.85);

                dijit.popup.open({

                    popup: dialog,

                    x: evt.pageX,

                    y: evt.pageY

                });

            });

            //显示坐标

            dojo.connect(map, "onLoad", function () {

                dojo.connect(map, "onMouseMove", showCoordinates);

                dojo.connect(map, "onMouseDrag", showCoordinates);

            });

        }

        function closeDialog()

        {

            map.graphics.clear();

            dijit.popup.close(dialog);

        }

        function showCoordinates(evt) {

            var mp = evt.mapPoint;

            dojo.byId("infoXY").innerHTML = "X: " + mp.x + "<br/>" + "Y: " + mp.y;

        }

        dojo.addOnLoad(init);

        /* AMD

        require([

          "esri/map", "esri/layers/FeatureLayer",

          "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol",

          "esri/renderers/SimpleRenderer", "esri/graphic", "esri/lang",

          "esri/Color", "dojo/number", "dojo/dom-style",

          "dijit/TooltipDialog", "dijit/popup", "dojo/domReady!"

        ], function (

          Map, FeatureLayer,

          SimpleFillSymbol, SimpleLineSymbol,

          SimpleRenderer, Graphic, esriLang,

          Color, number, domStyle,

          TooltipDialog, dijitPopup

        ) {

            map = new Map("mapDiv", {

                basemap: "streets",

                center: [-80.94, 33.646],

                zoom: 8,

                slider: false

            });

            var southCarolinaCounties = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3", {

                mode: FeatureLayer.MODE_SNAPSHOT,

                outFields: ["NAME", "POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI"]

            });

            southCarolinaCounties.setDefinitionExpression("STATE_NAME = 'South Carolina'");

            var symbol = new SimpleFillSymbol(

              SimpleFillSymbol.STYLE_SOLID,

              new SimpleLineSymbol(

                SimpleLineSymbol.STYLE_SOLID,

                new Color([255, 255, 255, 0.35]),

                1

              ),

              new Color([125, 125, 125, 0.35])

            );

            southCarolinaCounties.setRenderer(new SimpleRenderer(symbol));

            map.addLayer(southCarolinaCounties);

            map.infoWindow.resize(245, 125);

            dialog = new TooltipDialog({

                id: "tooltipDialog",

                style: "position: absolute; width: 250px; font: normal normal normal 10pt Helvetica;z-index:100"

            });

            dialog.startup();

            var highlightSymbol = new SimpleFillSymbol(

              SimpleFillSymbol.STYLE_SOLID,

              new SimpleLineSymbol(

                SimpleLineSymbol.STYLE_SOLID,

                new Color([255, 0, 0]), 3

              ),

              new Color([125, 125, 125, 0.35])

            );

            //close the dialog when the mouse leaves the highlight graphic

            map.on("load", function () {

                map.graphics.enableMouseEvents();

                map.graphics.on("mouse-out", closeDialog);

            });

            //listen for when the onMouseOver event fires on the countiesGraphicsLayer

            //when fired, create a new graphic with the geometry from the event.graphic and add it to the maps graphics layer

            southCarolinaCounties.on("mouse-over", function (evt) {

                var t = "<b>${NAME}</b><hr><b>2000 Population: </b>${POP2000:NumberFormat}<br>"

                  + "<b>2000 Population per Sq. Mi.: </b>${POP00_SQMI:NumberFormat}<br>"

                  + "<b>2007 Population: </b>${POP2007:NumberFormat}<br>"

                  + "<b>2007 Population per Sq. Mi.: </b>${POP07_SQMI:NumberFormat}";

                var content = esriLang.substitute(evt.graphic.attributes, t);

                var highlightGraphic = new Graphic(evt.graphic.geometry, highlightSymbol);

                map.graphics.add(highlightGraphic);

                dialog.setContent(content);

                domStyle.set(dialog.domNode, "opacity", 0.85);

                dijitPopup.open({

                    popup: dialog,

                    x: evt.pageX,

                    y: evt.pageY

                });

            });

            function closeDialog() {

                map.graphics.clear();

                dijitPopup.close(dialog);

            }

        });*/

    </script>

</head>

<body class="tundra">

    <div id="mapDiv">

      <div id="info">

            Hover over a county in BaiCheng City to get more information.

       </div>

       <div id="infoXY" style="position:absolute; right:25px; bottom:5px; color:#000; z-index:40;"></div>

    </div>

</body>

</html>

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

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

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

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

转：arcgis api for js入门开发系列四地图查询
原文地址:arcgis api for js入门开发系列四地图查询 arcgis for js的地图查询方式,一般来说,总共有三种查询方式:FindTask.IdentifyTask.QueryTas ...
openlayers4 入门开发系列之地图导航控件篇（附源码下载）
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
openlayers4 入门开发系列之地图展示篇（附源码下载）
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
arcgis地图数据集合
一.全国的ArcGIS地图SHP格式数据,覆盖的图层信息量基本齐全,除了ArcGIS之外,其他GIS软件(superMap和MapGIS.MapInfo等等)也是用之,适合为GIS开发提供数据素材. ...
openlayers4 入门开发系列之地图模态层篇（附源码下载）
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
openlayers4 入门开发系列之地图属性查询篇（附源码下载）
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
openlayers4 入门开发系列之地图空间查询篇（附源码下载）
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
openlayers4 入门开发系列之地图工具栏篇（附源码下载）
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
openlayers4 入门开发系列之地图切换篇（附源码下载）
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

随机推荐

Windows下Python的虚拟环境
前言在开发python的应用程序的时候,有时候会遇到依赖包的版本问题,比如之前开发tensorflow应用的时候需要用到python3.5以下的版本(还是python3),但是日常做其它应用的时候用 ...
U盘格式化时分配单元的大小的设置
格式化时主要有如下格式,且对应的操作系统的不一样: FAT32:Windows和Mac都支持,不过单个文件不能超过4G,但可以采用分包压缩的方式搞定. NTFS:Windows专用格式,Mac常规无法 ...
arcgis andriod Edit features
来自:https://developers.arcgis.com/android/guide/edit-features.htm#ESRI_SECTION1_56C60DB71AF941E98668A ...
linux 中两个文档怎么对比内容是否一致
可以用diff命令对比文档内容.[语法]: diff [参数] 文件1 文件2[说明]: 本命令比较两个文本文件,将不同的行列出来-b 将一串空格或TAB 转换成一个空格或TAB-e 生成一个编辑角本 ...
linux 文件属性与权限
内容源于: 鸟哥的linux私房菜链接如下: Linux 的文件权限与目录配置 Linux 磁盘与文件系统管理 Linux 文件与目录管理目录 Linux文件属性 [文件属性解析(SUID/SGI ...
纯JS设置首页，增加收藏，获取URL參数，解决中文乱码
雪影工作室版权全部,转载请注明[http://blog.csdn.net/lina791211] 1.前言纯Javascript 设置首页,增加收藏. 2.设置首页 // 设置为主页 functio ...
【java读书笔记】——Collection集合之六大接口（Collection、Set、List、Map、Iterator和Comparable）
两个月之前准备软考时,简单的从理论上总结了最经常使用的数据结构和算法,比方:线性表,链表,图.在进行java开发时,jdk为我们提供了一系列对应的类来实现主要的数据结构.jdk所提供的容器API位于j ...
Hadoop 服务器配置的副本数量管不了客户端
副本数由客户端的参数dfs.replication决定(优先级: conf.set > 自定义配置文件 > jar包中的hdfs-default.xml)如果前两个都没有,就用最后一个ja ...
UITableView 自带编辑删除自己定义button
一:UITableView 自带编辑删除 1:实现两个方法就可以 #pragma mark tableView自带的编辑功能 -(void)tableView:(UITableView *)tab ...
caffe搭建--缺少 skimage-缺少 google.protobuf.internal.-caffe搭建--ipython--ubuntu16.04+ caffe+ ipython
mkdir build && cd build cmake .. make pycaffe -j4 sudo vim /etc/profile---- export PYTHONPAT ...

第一个自定义开发的Arcgis地图

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

随机推荐

热门专题