第一个自定义开发的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 官网在线例子 ...

随机推荐

datetimepicker[jquery-ui]时间控件的三种初始化方法
1.只显示年月日 $( ".datepicker").datepicker({ needDay:true, changeMonth: true, //显示月份 changeYear ...
Java 异常处理的优劣
Java编程中的异常处理是一个很常见的话题了,几乎任何一门介绍性的Java课程都会提到异常处理.不过,我认为很多人其实没有真正掌握正确处理异常情况的方法和策略,最多也就不过了解个大概,知道概念.我想对 ...
ros pub sub ("~")
base_velocity_smoother.cpp remap ("~") 订阅: "cmd_vel" ...
FMDB使用Cached Statement功能
FMDB使用Cached Statement功能在FMDB中,Cached Statement功能是一种提高SQLite数据库访问的技术.在SQLite中,所有的SQL语句都会被编译,形成预处理 ...
Wireshark如何单独导出包的列信息
Wireshark如何单独导出包的列信息 Wireshark提供了丰富的数据包导出功能.用户可以将数据包按照需要导出为各种格式.这些格式文件包含了包的各种信息.但是很多时候,用户只需要获取包的特定 ...
javascript 函数初探（五）--- 几种类型的函数
即时函数: 目前我们已经讨论了匿名函数在回调时的应用.接下来,我们来看看匿名函数的另一种应用实例 --- javascript即时函数: 比如: ( function(){ alert('her'); ...
Android Intent调用 Uri的使用几种格式
打开百度 Uri uri = Uri.parse("http://www.baidu.com"); Intent intent =new Intent(Intent.ACTION_ ...
Android Studio apk 打包流程（转）http://blog.chinaunix.net/uid-26000296-id-5567890.html
1.Build -> Generate Signed APK...,打开如下窗口 2.假设这里没有打过apk包,点击Create new,窗口如下这里只要输入几个必要项 Key store p ...
AngularJS的ng-repeat显示属性名和属性值
代码下载:https://files.cnblogs.com/files/xiandedanteng/AngularJSAuthorRepeat.rar 代码: <!DOCTYPE HTML P ...
angular - 介绍
导入全局样式,生产环境和浏览器环境都导入了. 不知否你还记得index.html那个里面的节点熟悉吗? 很熟悉吧

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

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

随机推荐

热门专题