WebGIS学习之路——ArcGIS For JavaScript(一) 地图的显示和地图控件的使用

最新推荐文章于 2024-07-07 10:08:32 发布

起风了9527

最新推荐文章于 2024-07-07 10:08:32 发布

阅读量5.8k

点赞数 10

分类专栏： ARCGIS FOR JS WEBGIS

本文链接：https://blog.csdn.net/qq_29036809/article/details/84638833

版权

WEBGIS 同时被 2 个专栏收录

1 篇文章 1 订阅

订阅专栏

ARCGIS FOR JS

0 篇文章 3 订阅

订阅专栏

1.什么是WebGIS？

   基于地图开发的web应用程序都可以称之为WebGIS；国土管
理、城市规划、交通运输等几乎所有领域都有应用GIS功能，当然百度地图、
高德地图、腾讯地图等都是典型代表。
WebGIS的功能:
(⑴)地理信息的可视化展示
(⑵)地理信息的空间查询、检索
(⑶)地理信息空间分析
(⑷)互联网上资源的共享

1.1 ArcGIS For JavaScript的简介

ESRI根据JavaScript技术实现的调用ArcGIS Server REST API接口的一组脚本。当前的最新版本是Version 4.8。通过ArcGIS API for JavaScript可以将ArcGIS Server提供的地图资源和其它资源(ArcGIS Online)嵌入到Web应用中。我们实现的WebGIS功能都是通过该API实现。

1.2 基于ArcGis的WebGIS技术框架

在这里插入图片描述

2.ArcGIS For JS

2.1 我的第一个webgis程序，地图的加载

首先创建使用require加载arcgis相应的代码模块，我们加载地图需要用到 "esri/map"

require([`"esri/map"],function(Map){
  //新建一个map对象
  var map = new Map("mapdiv",{
  	center: [116.403119,39.915599], //地图中心点
  	zoom:2, //缩放级别
  	basemap: "streets"  //底图，这里使用arcgis提供的其中之一
  })
})

第一个参数mapdiv是装地图的div的id值。

全部代码如下：

<!DOCTYPE HTML>
<html>
    <head>
        <title>调用地图服务</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/css/esri.css">
        <script src="https://js.arcgis.com/3.25/"></script> 
        <script>
            require([
                "esri/map", 
                "esri/layers/ArcGISDynamicMapServiceLayer",
                "esri/layers/ArcGISTiledMapServiceLayer",
                "esri/geometry/Extent",
                 "esri/SpatialReference",
                 "esri/toolbars/navigation"
                ], function(
                     Map,
                     ArcGISDynamicMapServiceLayer,
                     ArcGISTiledMapServiceLayer,
                     Extent,
                     SpatialReference,
                     navigation
                     ) {
                var map = new Map("mapdiv", {
                    center: [116.403119,39.915599],
                    zoom:2,
                
                    basemap: "streets" //satellite、streets、oceans
                });

                var navooltar  =  new navigation()
  
            });
        </script>    
    </head>
    <body>
        <div id='mapdiv'>
        </div>
    </body>
</html>

在浏览器中预览

在这里插入图片描述

光秃秃的地图是不是有点不好看，下面来添加一下小控件

2.2 地图基本控件的添加

地图控件用到的模块基本都在dijit中

                    "esri/dijit/Scalebar",    //比例尺
                    "esri/dijit/OverviewMap", // 鹰眼图
                    "esri/dijit/BasemapGallery",//画廊
                    "esri/dijit/BasemapToggle",  //地图切换器
                    "esri/dijit/Legend",  // 图例
                    "esri/dijit/Measurement",//测量
                    "esri/layers/ArcGISDynamicMapServiceLayer"

下面以鹰眼图来举例用法

var overviewMap = new OverviewMap({
 map:map,
 attachTo: "bottom-right"   //这个属性为鹰眼图所在的位置，此时为右下角
 color:" #D84E13"
})；
  overviewMap.startup();

效果如图：
在这里插入图片描述

比例尺代码：

 //比例尺
                    var scalebar=new Scalebar({
                        map:map,
                        attachTo:'bottom-left',
                        scalebarStyle:'line',  //line 风格
                        scalebarUnit:'metric'  // english,dual  单位
                    });
                   scalebar.startup()

起风了9527

关注

10
点赞
踩
45

收藏

觉得还不错? 一键收藏
0
评论
WebGIS学习之路——ArcGIS For JavaScript(一) 地图的显示和地图控件的使用

1.什么是WebGIS？基于地图开发的web应用程序都可以称之为WebGIS；国土管理、城市规划、交通运输等几乎所有领域都有应用GIS功能，当然百度地图、高德地图、腾讯地图等都是典型代表。WebGIS的功能:(⑴)地理信息的可视化展示(⑵)地理信息的空间查询、检索(⑶)地理信息空间分析(⑷)互联网上资源的共享1.1 ArcGIS For JavaScript的简介ESR...
复制链接

扫一扫

专栏目录