文档章节

arcgis引用

mm冯
 mm冯
发布于 03/25 09:08
字数 906
阅读 4
收藏 0

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

  • 普通引用

 

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

 

© 著作权归作者所有

上一篇: Vue2.0
下一篇: 时间戳显示
mm冯
粉丝 0
博文 3
码字总数 1029
作品 0
朝阳
私信 提问
更改ArcGIS for Server10.5和Portal for ArcGIS10.5及Web服务器之机器名和证书

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_34719507/article/details/79896805 在单机环境下,为了确保ArcGIS for Server、Portal for ArcGIS和W...

卡特酋长
2018/04/11
0
0
ArcGIS for iOS 开发系列(2) – 开发环境配置

我们已经掌握了一些基本知识,在动手编程之前,还需先配置下开发环境: 2.1 iOS 配置 1) Mac电脑(MacBook Air/ Pro、Mac mini和iMac都可以); 2) Snow Leopard(小版本10.6.2以上)、Lio...

长平狐
2012/11/28
1K
0
用Tomcat8.5做Arcgis API for javascript的本地部署

step1:1从arcgis官网上下载Arcgis api for JavaScript 4.3 https://developers.arcgis.com/javascript/latest/guide/release-notes/ ps:前提是你需要有一个esri开发者账户否则不能下载。 st......

duxiuxiu
2017/05/18
0
0
VS中丢失ArcGis 控件和模板的解决方法

VS中丢失ArcGis 控件和模板的解决方法(看了网上一些方法,多多少少对解决问题有些帮助,集合大家的成果),以下大部分问题是因为先装vs 后装 ArcGis或AE出现。所有这些问题其实都可以通过在...

伐罗密
2012/10/31
2.8K
3
ArcGIS Runtime数据制作教程

ArcGIS Runtime不能直接加载shp数据,或者mxd地图文档。ArcGIS Runtime所能支持的数据格式,我们可以称之为Package,目前包括MPK,TPK,GPK以及APK四种格式。 Map package(MPK) :包含地图文...

长平狐
2012/11/28
2K
1

没有更多内容

加载失败,请刷新页面

加载更多

如何管stderr,而不是stdout?

我有一个要写入信息的程序stdout和stderr ,我需要grep通过什么是未来标准错误 ,而忽视标准输出 。 我当然可以分2步完成: command > /dev/null 2> temp.filegrep 'something' temp.file...

技术盛宴
22分钟前
4
0
centos7.5上通过docker安装并运行mysql5.7

1. docker pull mysql:5.7 2. docker run --name mysql5.7 -p 3306:3306 -e MYSQL_ROOT_PASSWORD=123456 -d mysql:5.7...

Ryub
25分钟前
5
0
什么是比赛条件?

在编写多线程应用程序时,遇到的最常见问题之一是竞争条件。 我对社区的问题是: 什么是比赛条件? 您如何检测到它们? 您如何处理它们? 最后,如何防止它们发生? #1楼 当设备或系统试图同...

javail
37分钟前
5
0
SpringMVC源码分析-DispatcherServlet-init方法分析

上一篇:SpringMVC源码分析-DispatcherServlet实例化干了些什么 先吐槽一下。。。写了两小时的博客突然被俺家小屁孩按了刷新,东西不见了,建议OSCHINA能够自动定时保存啊。让我先安静一下。...

特拉仔
44分钟前
6
0
python协程 生成器

协程,又称微线程,纤程。英文名Coroutine。 线程是系统级别的它们由操作系统调度,而协程则是程序级别的由程序根据需要自己调度。在一个线程中会有很多函数,我们把这些函数称为子程序,在子...

沙门行道
55分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部