arcgis引用

原创
2019/03/25 09:08
阅读数 43
  • 普通引用

 

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Simple Map</title>

    <link rel="stylesheet" type="text/css" href="http://localhost:7777/medvar/arcgis_js_api/3.17/dijit/themes/tundra/tundra.css" />

    <link rel="stylesheet" type="text/css" href="http://localhost:7777/medvar/arcgis_js_api/3.17/esri/css/esri.css" />

    <style>

  html, body, #map {

    height: 100%;

    padding: 0;

    margin: 0;

  }

</style>

    <script type="text/javascript" src="http://localhost:7777/medvar/arcgis_js_api/3.17/init.js"></script>

    <script type="text/javascript">

    var map;

    require(["esri/map", "dojo/domReady!"], function(Map) {

      map = new Map("map", {

        basemap: "topo",

        center: [116.39, 39.90], //中心点经纬度

        zoom: 7     //数字越小地图显示面积越大

      });

    });

    </script>

   </head>

   <body class="claro">

  <div id="map"></div>

</body>

 

</html>

 

  • 引用arcgis Online上已编辑好的地图

<!DOCTYPE html>

<html>

<head>

<title>Create a Web Map</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

 

<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.26/esri/css/esri.css">

<style>

   html,body,#mapDiv,.map.container{

    padding:0;

    margin:0;

     height:100%;

   }

   #legendDiv{

  background-color: #fff;

  position: absolute !important;

  z-index: 99;

  top:10px;

  right:20px;

}

</style>

 

<script>var dojoConfig = { parseOnLoad:true };</script>

<script src="https://js.arcgis.com/3.26compact/"></script>

<script>

var map;

require([

"esri/map",

"esri/arcgis/utils",

"esri/dijit/Legend",

"dojo/domReady!"

], function(Map, arcgisUtils, Legend){

arcgisUtils.createMap("<MapId>", "mapDiv").then(function (response) {

map = response.map;

var legend = new Legend({

    map: map,

    layerInfos:(arcgisUtils.getLegendLayers(response))

}, "legendDiv");   

legend.startup();

});

  });

</script>

</head>

<body>

  <div id="mapDiv"></div>

  <div id="legendDiv"></div>

</body>

</html>

 

注: 其中MapId为用户已编辑好的在线地图的id 

 

  • 访问路径

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.26/esri/css/esri.css">

    <style>

        html,body,#mapDiv,.map.container{

            padding:0;

            margin:0;

            height:100%;

        }

        #legendDiv{

            background-color: #fff;

            position: absolute !important;

            z-index: 99;

            top:10px;

            right:20px;

        }

    </style>

    <script>var dojoConfig = { parseOnLoad:true };</script>

    <script src="https://js.arcgis.com/3.26compact/"></script>

    <script>

        require([

            "esri/map",

            "esri/dijit/Directions",

            "dojo/parser",

            "dijit/layout/BorderContainer",  "dijit/layout/ContentPane",

            "dojo/domReady!"

        ], function (Map, Directions, parser) {

            map = new Map("map", {

                basemap: "topo",

                center: [116.39, 39.90],

                zoom: 7

            });

            var directions = new Directions({

                map: map,

                routeTaskUrl: "http://www.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer",

            }, "dir");

            directions.startup();

        });

    </script>

</head>

<body>

<div data-dojo-type="dijit/layout/BorderContainer"

     data-dojo-props="design:'headline', gutters:false"

     style="width:100%;height:100%;">

    <div data-dojo-type="dijit/layout/ContentPane"

         data-dojo-props="region:'right'"

         style="width:250px;">

        <div id="dir"></div>

    </div>

    <div id="map"

         data-dojo-type="dijit/layout/ContentPane"

         data-dojo-props="region:'center'">

    </div>

</div>

</body>

</html>

注:routeTaskUrl为网络分析服务路径,不写则使用默认的世界路由服务。

 

  • 搜索插件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

 

    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.26/esri/css/esri.css">

    <style>

        html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; }

        #search { display: block; position: absolute; z-index: 3; top: 20px; left: 75px; }

        /* 聚光灯效果 */

        .spotlight {z-index:-1; position:absolute; left:50%; top:50%; border-radius:50%; opacity:0;box-shadow:inset rgba(0,0,0,0.25) 0px 0px 20px 20px,rgba(0,0,0,0.25) 0px 0px 0px 1000px; transition:all 1000ms; -moz-transition:all 1000ms; -webkit-transition:all 1000ms;}

        .spotlight-active { z-index:2; opacity:1;}

    </style>

    <script>var dojoConfig = { parseOnLoad:true };</script>

    <script src="https://js.arcgis.com/3.26compact/"></script>

    <script>

        require([

            "esri/map",

            "esri/dijit/Search",

            "esri/geometry/Extent",

            "esri/graphic",

            "esri/symbols/SimpleMarkerSymbol",

            "esri/geometry/screenUtils",

            "dojo/dom",

            "dojo/dom-construct",

            "dojo/query",

            "dojo/_base/Color",

            "dojo/domReady!"

        ], function (Map, Search, Extent, Graphic, SimpleMarkerSymbol, screenUtils, dom, domConstruct, query, Color) {

            var map = new Map("map", {

                basemap: "topo",

                center: [-117.19, 34.055],

                zoom: 15

            });

            //普通搜索

            /*var search = new Search({

                map: map,

            }, dom.byId("search"));

            search.startup();*/

            //限制范围

            var search = new Search({

                map: map

            }, "search");

          

            //创建限制搜索的范围

            var extent = new Extent({

                "spatialReference": { "wkid": 102100},

                "xmin": -13063280,

                "xmax": -13033928,

                "ymin": 4028345,

                "ymax": 4042715

            });

 

            //将范围设置为上面指定的范围    

            search.sources[0].searchExtent = extent;

      

            //启动小部件

            search.startup();

            

            map.on("load", enableSpotlight);

            search.on("select-result", showLocation);

            search.on("clear-search", removeSpotlight);

 

            function enableSpotlight() {

                var html = "<div id='spotlight' class='spotlight'></div>";

                domConstruct.place(html, dom.byId("map_container"), "first");

            }

 

            function showLocation(e) {

                map.graphics.clear();

                var point = e.result.feature.geometry;

                var symbol = new SimpleMarkerSymbol().setStyle(

                SimpleMarkerSymbol.STYLE_SQUARE).setColor(

                    new Color([255,0,0,0.5])

                );

                var graphic = new Graphic(point, symbol);

                map.graphics.add(graphic);

 

                map.infoWindow.setTitle("Search Result");

                map.infoWindow.setContent(e.result.name);

                map.infoWindow.show(e.result.feature.geometry);

 

                var spotlight = map.on("extent-change", function(extentChange) {

                var geom = screenUtils.toScreenGeometry(map.extent, map.width,    map.height, e.result.extent);

                var width = geom.xmax - geom.xmin;

                var height = geom.ymin - geom.ymax;

                var max = height;

                if ( width > height ) {

                    max = width;

                }

                var margin = '-' + Math.floor(max/2) + 'px 0 0 -' + Math.floor(max/2) + 'px'; query(".spotlight").addClass("spotlight-active"). style({

                    width: max + "px",

                    height: max + "px",

                    margin: margin

                });

                spotlight.remove();

              });

            }

 

            //移除效果

            function removeSpotlight() {

              query(".spotlight").removeClass("spotlight-active");

                map.infoWindow.hide();

                map.graphics.clear();

            }

        });

    </script>

</head>

<body>

    <div id="search"></div>

    <div id="map"></div>            

</body>

</body>

</html>

 

展开阅读全文
打赏
0
0 收藏
分享

作者的其它热门文章

加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部