ArcGis基本功能模板

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />  
    <title>最原始的</title>  
        <link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/css/esri.css">
    
 
    <style>  
        html, body, #map {  
            height: 100%;  
            margin: 0;  
            padding: 0;  
        }  
 
        body {  
            background-color: #FFF;  
            overflow: hidden;  
            font-family: "Trebuchet MS";  
        }  
 
        #BasemapToggle {  
            position: absolute;  
            right: 20px;  
            top: 20px;  
            z-index: 50;  
        }  
 
        #HomeButton {  
            left: 25px;  
            position: absolute;  
            top: 93px;  
            z-index: 50;  
        }  
 
        #LocateButton {  
            left: 25px;  
            position: absolute;  
            top: 130px;  
            z-index: 50;  
        }  
 
        #search {  
            display: block;  
            position: absolute;  
            z-index: 2;  
            top: 25px;  
            left: 75px;  
        }  
    </style>  
        <script src="https://js.arcgis.com/3.24/"></script>
    <script>  
        var map, mapCenter, selectionToolbar, featureLayer;  
        var visible = [], setLayerVisibility;;  
        require([  
        "esri/basemaps",  
             "esri/map",  
             "esri/layers/ArcGISTiledMapServiceLayer",  
             "esri/layers/FeatureLayer",  
             "esri/layers/GraphicsLayer",  
             "esri/geometry/Point",  
 
             "esri/symbols/SimpleFillSymbol",  
             "esri/symbols/SimpleLineSymbol",  
             "esri/symbols/SimpleMarkerSymbol",  
             "esri/tasks/query",  
             "esri/toolbars/draw",  
 
             "esri/graphic",  
             "esri/dijit/Scalebar",  
             "esri/dijit/HomeButton",  
             "esri/dijit/LocateButton",  
             "esri/dijit/BasemapToggle",  
             "esri/dijit/OverviewMap",  
             "esri/dijit/Search",  
             "esri/geometry/webMercatorUtils",  
 
             "dojo/dom",  
             "dojo/on",  
             "dojo/_base/Color",  
             "dojox/charting/Chart2D",  
             "dojo/domReady!"],  
         function (  
              esriBasemaps,  
              Map,  
              Tiled,  
              FeatureLayer,  
              GraphicsLayer,  
              Point,  
 
              SimpleFillSymbol, SimpleLineSymbol, SimpleMarkerSymbol,  
              Query,  
              Draw,  
 
              Graphic,  
              Scalebar,  
              HomeButton,  
              LocateButton,  
              BasemapToggle,  
              OverviewMap,  
              Search,  
              webMercatorUtils,  
 
              dom,  
              on,  
 
              Color,  
              Chart2D,  
              domConstruct) {  
 
             esriBasemaps.delorme = {  
                 baseMapLayers: [  
                     //中國矢量地圖服務  
                     { url: "http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer" }  
                 ],  
                 //縮略圖  
                 thumbnailUrl: "shiliang.jpg",  
                 title: "矢量圖"  
             };  
 
             //初始化地圖  
             map = new esri.Map("map", { basemap: "delorme", logo: false, });  
 
             //map = new Map("map", {logo:false,slider: true});  
             //var tiled = new Tiled("http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer");  
             //map.addLayer(tiled,0);  
             var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://117.60.146.19:8399/arcgis/rest/services/%E6%B1%9F%E8%8B%8F2014%E5%B9%B412%E6%9C%88%E9%99%86%E5%9C%B0%E5%8D%AB%E6%98%9F%E5%BD%B1%E5%83%8F/MapServer");  
             map.addLayer(dynamicMapServiceLayer, 1);  
             var chartLayer = new GraphicsLayer({ "id": "chartLayer" });  
             map.addLayer(chartLayer, 2);  
             mapCenter = new Point(103.847, 36.0473, map.spatialReference);  
             map.centerAndZoom(mapCenter, 4);  
             /*************************************************************************************/  
             
             
             //衛星底圖  
             var toggle = new BasemapToggle({  
                 map: map,  
                 basemap: "satellite"  
             }, "BasemapToggle");  
             toggle.startup();  
             //返回主視圖  
             var home = new HomeButton({  
                 map: map  
             }, "HomeButton");  
             home.startup();  
             
             
             
             
             
             //定位  
             var geoLocate = new LocateButton({  
                 map: map  
             }, "LocateButton");  
             geoLocate.startup();  
             //鷹眼  
             var overviewMapDijit = new OverviewMap({  
                 map: map,  
                 expandFactor: 2,  
                 attachTo: "bottom-left",  
                 visible: true  
             });  
             overviewMapDijit.startup();  
             //比例尺  
             var scalebar = new esri.dijit.Scalebar({  
                 map: map,//地圖對象  
                 attachTo: "bottom-right",//控件的位置,右下角  
                 scalebarStyle: "ruler",//line 比例尺樣式類型  
                 scalebarUnit: "metric"//顯示地圖的單位,這裏是km  
             });  
//搜索  
             var search = new Search({  
                 map: map  
             }, "search");  
             search.startup();  
             //顯示地圖座標  
             map.on("load", function () {  
                 //after map loads, connect to listen to mouse move & drag events  
                 map.on("mouse-move", showCoordinates);  
                 map.on("mouse-drag", showCoordinates);  
             });  
             function showCoordinates(evt) {  
                 //the map is in web mercator but display coordinates in geographic (lat, long)  
                 var mp = webMercatorUtils.webMercatorToGeographic(evt.mapPoint);  
                 //display mouse coordinates  
                 dom.byId("info").innerHTML = mp.x.toFixed(3) + ", " + mp.y.toFixed(3);  
             }  
        });
  </script>
  </head>
<body>  
    <div id="map">  
 
        <!--  返回初始化地圖按鈕-->  
        <div id="HomeButton"></div>  
        <!--  Html5定位按鈕-->  
        <div id="LocateButton"></div>  
        <!--  切換底圖-->  
        <div id="BasemapToggle"></div>  
        <!--  搜索欄-->  
        <div id="search"></div>  
        <!--  座標-->  
        <span id="info" style="position:absolute; left:750px; bottom:5px; color:#000; z-index:50;"></span>  
 
        <button id="selectFieldsButton">選框查詢</button>  
        <button id="clearSelectionButton" data-dojo-type="dijit/form/Button">清除選擇</button><br>  
        <div id="toc" style="position: absolute; left: 10px; bottom: 20px; border: 1px solid #9c9c9c; background: #fff; width: 100px; height: auto; z-index: 99;padding: 10px;"></div>  
    </div>  
</body>  
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章