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

随机推荐

济南day4
啥也不会,做了不对,对了没分.T1 50 + 30 + 0想了想,有思路,写了,半个小时写完,算错复杂度,复杂度最差(n*m),想成了(n+m)被卡没了50分,gg.....T2自己写了个单向并查集, ...
window下安装tensowflow
tensorflow0.12版本支持windows,但是需要python3.5.x.而我的本机只安装了Anaconda2.7版本.因此我们可以在Anaconda中新增Python3.5的环境. 首先, ...
SMART OS
http://blog.csdn.net/babyfacer/article/details/8577333
bash帮助文档简单学习；bash手册翻译
关于bash的四种工作方式的不同,可以参考:http://feihu.me/blog/2014/env-problem-when-ssh-executing-command-on-remote/,但是 ...
Linux如何显示文件指定行数的内容；显示第一行、中间几行和最后几行
1.tail -n +/-数字文件名 2.head -n 数字文件名 3.sed -n "开始行,结束行p" 文件名 4.sed -n '1p;20,40p; "显示 ...
sql语句 MySQL
1.操作数据库 (1)创建数据库 CREATE DATABASE [IF NOT EXISTS] db_name [create_specification [, create_specifica ...
树莓派 Zero W——随身钥匙扣
前言原创文章,转载引用务必注明链接.水平有限,如有疏漏,欢迎指正. 本文使用Markdown写成,为获得更好的阅读体验和正确的格式显示,请访问我的博客原文: http://www.cnblogs.c ...
python（31）- 模块练习
1. 小程序:根据用户输入选择可以完成以下功能: 创意文件,如果路径不存在,创建文件夹后再创建文件能够查看当前路径在当前目录及其所有子目录下查找文件名包含指定字符串的文件 ...
通俗易懂，什么是.NET?什么是.NET Framework？什么是.NET Core? .Net Web开发技术栈
通俗易懂,什么是.NET?什么是.NET Framework?什么是.NET Core? 什么是.NET?什么是.NET Framework?本文将从上往下,循序渐进的介绍一系列相关.NET的概念 ...
hdoj 5094 Maze 【BFS + 状态压缩】【好多坑】
Maze Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 100000/100000 K (Java/Others) Total Sub ...

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

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

随机推荐

热门专题