ArcGis基本功能模板

最新推荐文章于 2022-11-04 22:12:16 发布

.icu

最新推荐文章于 2022-11-04 22:12:16 发布

阅读量258

点赞数 1

分类专栏：地图

本文链接：https://blog.youkuaiyun.com/qq_42128407/article/details/80873451

版权

地图专栏收录该内容

4 篇文章

订阅专栏

<%@ 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>
        
        <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>