网络农大初期

简介: 甘农大                            #divMap {            width:1250px;            height:650px;            border:1px solid #4cff00;        }        #d...


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>甘农大</title>
    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_v38_sdk/arcgis_js_api/library/3.8/3.8/js/dojo/dijit/themes/tundra/tundra.css" />
    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_v38_sdk/arcgis_js_api/library/3.8/3.8/js/esri/css/esri.css" />
    <script src="jsapi_vsdoc12_v33.js"></script>
    <script type="text/Javascript" src="http://localhost/arcgis_js_v38_sdk/arcgis_js_api/library/3.8/3.8/init.js"></script>
    <style type="text/css">
        #divMap {
            width:1250px;
            height:650px;
            border:1px solid #4cff00;
        }
        #divOverviewMap {
            border: 1px solid #ff6a00;
            z-index: 1000;
        }
        #divInfo {
        width:370px;
        height:50px;
        position:absolute;
        top:0;
        right:0;
        border:1px solid #ff0000
       
        }
    </style>
    <script type="text/javascript">
        var map;
        var mapUrl;
        var point;
        var dynamicMapServiceLayer;
        var overViewMap;
        var scalebar;
        var identifyTask;
        var identifyParameters;
        var tabledata = new Array();
        dojo.require("esri.map");
        dojo.require("esri.dijit.OverviewMap");
        dojo.require("esri.dijit.Scalebar");
        dojo.require("esri.tasks.IdentifyTask");
       
        function init() {
            map = new esri.Map("divMap", {
                //nac: true,
                slider: true,
                center: [103.701407, 36.088679],
                zoom: 13
            });
            mapUrl = "http://localhost:6080/arcgis/rest/services/甘肃农业大学/GanSuNongYeDaXue/MapServer";
            dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer(mapUrl);
            map.addLayer(dynamicMapServiceLayer);
            //添加鹰眼
            dojo.connect(map, "onLoad", function () {
                overViewMap = new esri.dijit.OverviewMap(
                   {
                       map: map,   // 必要的 
                       visible: true,  // 初始化可见,默认为false 
                       attachTo: "top-right",   // 默认右上角 
                       width: 150, // 默认值是地图高度的 1/4th 
                       height: 150, // 默认值是地图高度的 1/4th  
                       opacity: 0.40,    // 透明度 默认0.5 
                       maximizeButton: true,   // 最大化,最小化按钮,默认false 
                       expandFactor: 3,    //概览地图和总览图上显示的程度矩形的大小之间的比例。默认值是2,这意味着概览地图将至少是两倍的大小的程度矩形。 
                       color: "red"
                   }, "divOverviewMap");
                overViewMap.startup();
                //监听坐标位置
                dojo.connect(map, "onMouseDrag", showPosition)
                dojo.connect(map, "onMouseMove", showPosition);
                dojo.connect(map, "onClick", initIdentify);

            });
            //监听并添加比例尺
            dojo.connect(map, "onLoad", function () {
                scalebar = new esri.dijit.Scalebar(
                    {
                        attachTo: "bottom-right",
                        map: map,
                        scalebarUnit: "english"
                    }, divMap);
            });
            dojo.connect(map, "onLoad", initToolbar);

            function initToolbar(map) {
                tb = new esri.toolbars.Draw(map);
                dojo.connect(tb, "onDrawEnd", addGraphic);
            }
            function addGraphic(geometry) {
                var symbol = dojo.byId("symbol").value;
                if (symbol) {
                    symbol = eval(symbol);
                }
                else {
                    var type = geometry.type;
                    if (type === "point" || type === "multipoint") {
                        symbol = tb.markerSymbol;
                    }
                    else if (type === "line" || type === "polyline") {
                        symbol = tb.lineSymbol;
                    }
                    else {
                        symbol = tb.fillSymbol;
                    }
                }
                map.graphics.add(new esri.Graphic(geometry, symbol));
            }

            //显示坐标
            function showPosition(eve)
            {
                var mapPoint = eve.mapPoint;
                var geoPoint = esri.geometry.webMercatorToGeographic(mapPoint);
                var scrPoint = eve.screenPoint;
                dojo.byId("divInfo").innerHTML =
                    "莫卡托坐标:" + mapPoint.x + ";         " + mapPoint.y +
                    "屏幕坐标:" + scrPoint.x + ";      " + scrPoint.y +
                    "地理坐标:" + geoPoint.x.toFixed(5) + ";" + geoPoint.y.toFixed(5);

            }
            //查询操作
            function initIdentify(map)
            {
               
                identifyTask = new esri.tasks.IdentifyTask("http://localhost:6080/arcgis/rest/services/甘肃农业大学/GanSuNongYeDaXue/MapServer");
                identifyParameters = new esri.tasks.IdentifyParameters();
                identifyParameters.tolerance = 3;
                identifyParameters.returnGeometry = true;
                //identifyParameters.layerIds = [1, 0];
                identifyParameters.layerOption = identifyParameters.LAYER_OPTION_ALL;
                //map.infoWindow.resize(300,150);
                //map.infoWindow.setTitle("查询结果:");
                symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND, 15, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 0, 0]), 1), new dojo.Color([255, 255, 0, 0.5]));
                dojo.connect(map, "onClick", doIdentify)

            }
            function doIdentify(eve)
            {
                map.infoWindow.show(eve.screenPoint,esri.dijit.InfoWindow.ANCHOR_UPPERRIGHT);
                map.graphics.clear();
                identifyParameters.geometry = eve.mapPoint;
                identifyParameters.mapExtent = map.extent;
                identifyTask.execute(identifyParameters, function (idResults) { addToMap(idResults,eve)});
            }
            //在infoWindow中显示Identify结果
            function addToMap(idResults, evt) {
                tabledata = new Array();
                //把Identify结果的名称、字段、字段值放入tabledata中
                for (var i = 0; i < idResults.length; i++) {
                    var idResult = idResults[i];
                    if (tabledata.length > 0) {
                        var b = false;
                        for (var j = 0; j < tabledata.length; j++) {
                            if (tabledata[j].displayFieldName == idResult.layerName) {
                                var b = true;
                                break;
                            }

                        }
                        if (b) {
                            tabledata[j].displayField.push(idResult.attributes);
                            tabledata[j].feature.push(idResult.feature);
                        }
                        else {
                            var tds = {};
                            var td = new Array();
                            //图层名称
                            tds.displayFieldName = idResult.layerName;
                            //图层字段
                            var oo = idResult.attributes;
                            td.push(oo);
                            tds.displayField = td;
                            var td2 = new Array();
                            td2.push(idResult.feature);
                            tds.feature = td2;
                            tabledata.push(tds);
                        }
                    }
                    else {
                        var tds = {};
                        var td = new Array();
                        tds.displayFieldName = idResult.layerName;
                        var oo = idResult.attributes;
                        td.push(oo);
                        tds.displayField = td;
                        var td2 = new Array();
                        td2.push(idResult.feature);
                        tds.feature = td2;
                        tabledata.push(tds);
                    }
                }
                //设置infoWindow显示内容
                map.infoWindow.setContent(tableHtml(tabledata, 0));
                //设置infoWindow显示
                map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
            }

            //Identify结果的tab切换事件
            function tab(index) {
                map.infoWindow.setContent(tableHtml(tabledata, index));
            }

            //infoWindow中内容html
            function tableHtml(rs, index) {
                var str = "";
                var str1 = "";
                var str2 = "";
                for (var i = 0; i < rs.length; i++) {
                    if (i == index) {
                        str1 = str1 + "<span class='a-tab' id='" + i + "' onclick='tab(" + i + ")'>" + rs[i].displayFieldName + "</span>";
                    }
                    else {
                        str1 = str1 + "<span class='tab' id='" + i + "' onclick='tab(" + i + ")'>" + rs[i].displayFieldName + "</span>";
                    }
                }
                str2 = trHtml(index);
                str = "<div class='tr1'>" + str1 + "</div><div class='tr2'><table border='1'>" + str2 + "</table></div>";
                return str;
            }

            function trHtml(index) {
                var str2 = "<tr>";
                for (prop in tabledata[index].displayField[0]) {
                    str2 = str2 + "<td>" + prop + "</td>"
                }
                str2 = str2 + "</tr>";
                for (var i = 0; i < tabledata[index].displayField.length; i++) {
                    str2 = str2 + "<tr style='cursor: hand' onclick=showFeature(tabledata[" + index + "].feature[" + i + "])>";
                    for (prop in tabledata[index].displayField[i]) {
                        if (tabledata[index].displayField[i][prop] == "") {
                            str2 = str2 + "<td>&nbsp;</td>"
                        }
                        else {
                            str2 = str2 + "<td>" + tabledata[index].displayField[i][prop] + "</td>"
                        }

                    }
                    str2 = str2 + "</tr>";

                }
                return str2;
            }

            //高亮显示选中元素
            function showFeature(feature) {
                map.graphics.clear();
                feature.setSymbol(symbol);
                map.graphics.add(feature);
            }
        }
        dojo.addOnLoad(init);
    </script>
</head>
<body class="tundra">
    <!--<table><tr><td><div id="divMap">
            <div id="divOverviewMap" style="border:1px solid #ff6a00;position:absolute;top:0;right:0"></div></div></td></tr>
        <tr><td><div id="divInfo"></div></td></tr>
</table>-->
    <div id="divMap">
        <div id="divOverviewMap" style="border:1px solid #ff6a00;position:absolute;top:0;right:0"></div>
    </div>
    <div id="divInfo"></div>
    <button onclick="tb.activate(esri.toolbars.Draw.POINT);">Point</button>
    <button onclick="tb.activate(esri.toolbars.Draw.MULTI_POINT);">Multipoint</button>
    <button onclick="tb.activate(esri.toolbars.Draw.EXTENT);">Extent</button>
    <button onclick="tb.activate(esri.toolbars.Draw.POLYLINE);">Polyline</button>
    <button onclick="tb.activate(esri.toolbars.Draw.FREEHAND_POLYLINE);">Freehand Polyline</button>
    <button onclick="tb.activate(esri.toolbars.Draw.POLYGON);">Polygon</button>
    <button onclick="tb.activate(esri.toolbars.Draw.FREEHAND_POLYGON);">Freehand Polygon</button>
    <button onclick="tb.activate(esri.toolbars.Draw.LINE);">Line</button>
    <button onclick="tb.deactivate()">Deactivate</button>

    <select id="symbol">
        <option value="">--- Select Symbol ---</option>
        <option value="">--- Simple Marker Symbols ---</option>
        <option value="new esri.symbol.SimpleMarkerSymbol();">Default</option>
        <option value="new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 1), new dojo.Color([0,255,0,0.25]))">Square</option>
        <option value="new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CROSS, 50, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([0,0,0]), 2))">Cross, dash outline</option>
        <option value="new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_X, 25, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DOT, new dojo.Color([0,0,255]), 2))">X, dot outline</option>
        <option value="new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND, 20, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,0]), 1), new dojo.Color([255,255,0,0.5]))">Diamond</option>
        <option value="new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND, 30, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,0]), 3), new dojo.Color([255,255,0,0.5])).setAngle(15)">Diamond, 15 angle</option>
        <option value="new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND, 30, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,0]), 3), new dojo.Color([255,255,0,0.5])).setAngle(15).setOffset(0,5)">Diamond, 15 angle, 5 offset in Y</option>
        <option value="">--- Picture Marker Symbol ---</option>
        <option value="">No Default</option>
        <option value="new esri.symbol.PictureMarkerSymbol('images/flag.png', 24, 24)">Flag</option>
        <option value="">--- Simple Line Symbols ---</option>
        <option value="new esri.symbol.SimpleLineSymbol();">Default</option>
        <option value="new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 1)">Solid</option>
        <option value="new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2)">Dash Dot</option>
        <option value="new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255,0,0]), 3)">Dash</option>
        <option value="new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DOT, new dojo.Color([255,0,0]), 5)">Dot</option>
        <option value="">--- Cartographic Line Symbols ---</option>
        <option value="new esri.symbol.CartographicLineSymbol()">Default</option>
        <option value="new esri.symbol.CartographicLineSymbol(esri.symbol.CartographicLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 10)">Solid</option>
        <option value="new esri.symbol.CartographicLineSymbol(esri.symbol.CartographicLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 10, esri.symbol.CartographicLineSymbol.CAP_ROUND, esri.symbol.CartographicLineSymbol.JOIN_ROUND)">Solid, round cap, round join</option>
        <option value="new esri.symbol.CartographicLineSymbol(esri.symbol.CartographicLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 10, esri.symbol.CartographicLineSymbol.CAP_SQUARE, esri.symbol.CartographicLineSymbol.JOIN_BEVEL)">Solid, square cap, bevel join</option>
        <option value="new esri.symbol.CartographicLineSymbol(esri.symbol.CartographicLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 10, esri.symbol.CartographicLineSymbol.CAP_ROUND, esri.symbol.CartographicLineSymbol.JOIN_MITER, 5)">Solid, round cap, miter (5) join</option>
        <option value="">--- Simple Fill Symbols ---</option>
        <option value="new esri.symbol.SimpleFillSymbol()">Default</option>
        <option value="new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NULL, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2))">None</option>
        <option value="new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.5]))">Solid</option>
        <option value="new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_HORIZONTAL, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]))">Horizontal</option>
        <option value="new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_FORWARDDIAGONAL, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]))">Forward diagonal</option>
        <option value="new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_DIAGONALCROSS, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]))">Diagonal cross</option>
        <option value="">--- Picture Fill Symbols ---</option>
        <option value="">No Default</option>
        <option value="new esri.symbol.PictureFillSymbol('images/sand.png', new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color('#000'), 1), 42, 42)">Sand</option>
        <option value="new esri.symbol.PictureFillSymbol('images/mangrove.png', new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color('#000'), 1), 42, 42)">Mangrove</option>
        <option value="new esri.symbol.PictureFillSymbol('images/swamp.png', new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color('#000'), 1), 42, 42)">Swamp</option>
        <option value="new esri.symbol.PictureFillSymbol('images/stiple.png', new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color('#000'), 1), 42, 42)">Ordered 10% Stiple</option>
    </select>
    <br />
    Zoom Slider :
    <input type="button" value="Hide" onclick="map.hideZoomSlider()" />
    <input type="button" value="Show" onclick="map.showZoomSlider()" />
</body>
</html>

目录
相关文章
|
存储 运维 安全
在互联网高速发展的当下,选择托管是最明智的选择!
作为一个一线开发者,个人觉得上云托管是最佳选择。为什么这样说?现在的IT行业的技术发展已经不再是20年前,甚至更久的样子,可能在之前关于企业的服务器大部分会选择自建,因为那时候搭建企业自己的服务器以及相关的数据库等服务是主流,也是处于没办法的状态,当时的云服务厂商要么是昂贵的国外云厂商,国内的云厂商发展还处于雏形且云厂商很少。企业往往是出于无奈的状态下,不得不搭建自己的服务器及配套的功能。那么接下来就来分享一下为什么要选择云托管。
118 1
在互联网高速发展的当下,选择托管是最明智的选择!
|
存储 Web App开发 域名解析
|
机器学习/深度学习 vr&ar
通过探索颠覆性技术的实验交付业务结果
企业需要为其创新实践取得理想的结果,首先要确定商业驱动的机会,以快速、廉价、让客户满意的方式探索颠覆性技术。并将重点放在工作范围,创新实践的位置以及与业务合作伙伴互动的过程上。
101 0
|
传感器 存储 机器学习/深度学习
如何规划IIoT解决方案以实现长期可扩展性
采用IIoT产品对于在当今的数字环境中保持竞争优势至关重要。但是,如果无法为长期可扩展性做规划,则会在成功之路上造成障碍。这篇文章探讨了公司如何实施IIoT解决方案以取得长期成功。
423 0
如何规划IIoT解决方案以实现长期可扩展性
|
SDN
体验经济时代对企业网络的影响
  什么是经济体验时代   体验经济是从情境和生活出发,塑造感官体验以及思维认同,以此增强顾客的关注度,改变消费行为,并为商品找到新的生存空间与价值。由于服务经济逐步提高层次,人们的个性化消费欲望难以得到彻底的满足,人们开始把金钱和注意力的支出方向转移到能够为其提供价值的经济形态,那就是体验经济。
1131 0
|
大数据 数据中心 存储
接力10G,25G将成为数据中心首选解决方案
随着云计算、大数据、移动互联网和智慧城市的兴起,互联网数据流量呈爆发式增长趋势,运营商急需将现有的数据中心升级到云数据中心,以提供更加灵活的业务和应用支撑。目前的数据中心主要是基于10G以太网架构,为了能够处理不断增大的数据负载,这些数据中心必须通过增加与现有基础设施并行的带宽能力实现扩展。
1070 0
|
网络协议 网络虚拟化 数据安全/隐私保护