ArcGIS使用（一）创建ArcGIS应用

最新推荐文章于 2023-06-02 12:07:13 发布

独孤宇云12345

最新推荐文章于 2023-06-02 12:07:13 发布

阅读量1.1k

点赞数

分类专栏：地图使用文章标签：可视化 java javascript

本文链接：https://blog.csdn.net/duguyuyun12345/article/details/106854853

版权

地图使用专栏收录该内容

2 篇文章 1 订阅

订阅专栏

ArcGIS官方文档：https://developers.arcgis.com/javascript/

第一章、认识和使用ArcGIS

1 ArcGIS for js 4.x

使用的是4.15 版本,ArcGIS 每个版本之间有差别，3 和4 的差别有点大

4 地图可以2D或3D显示，修改了绘图逻辑，地图和图层不在处理逻辑，而是由view处理视图专门用于可视化地图或场景中的数据。地图包含要显示的实际数据或图层，而视图则处理显示的数据。

4.x多了MapView,地图在MapView中显示：

var map = new Map({ basemap: "streets" }); 
var view = new MapView({ 
     container: "viewDiv",
     map: map, 
     center:[118.183013,39.638808], zoom: 6 });
map = new Map("map", { 
     center:[118.183013,39.638808],
     zoom: 13 , 
     minZoom: 4, 
     maxZoom: 11 });

所有map的相关操作都转换到了view

图层操作方法有些改变：

3.x

map.addLayer(pointGraphicLayer, 20); map.removeLayer(pointGraphicLayer);

4.x

map.add(graphicsLayer) map.remove(graphicsLayer);

有些类可以不用引入，直接使用：

var point = { type: "point", longitude: 118.183013, latitude: 39.638808 }; 
var simpleFillSymbol = { type: "simple-fill", 
                         color: [227, 139, 79, 0.8],
                         opacity 80% outline: { color: [255, 255, 0], width: 1 } 
                       };


var point = new Point(118.183013,39.638808); 
var simpleFillSymbol = new SimpleFillSymbol( 
            SimpleFillSymbol.STYLE_NONE,
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT, 
                         new Color([148, 236, 60]),2), 
                         new Color([255, 255, 179, 0])); 
var polygon =new Polygon ( [118.183013, 39.638808],
                           [118.333013, 39.828808], 
                           [118.543013, 39.878808] );

模块和软件包更新：

更改的软件包名称，例如esri/dijitnow esri/widgets/。

短，更清晰的模块名称，例如TileLayer代替ArcGISTiledMapServiceLayer。

一贯套管模块名，所有模块现在有一个大写字母，含开始Map，Graphic和Query。

支持类已移至支持文件夹，以使API参考更加有条理，例如esri/layers/support和esri/tasks/support。

结构发生了esri/config变化。的属性esriConfig.defaults现在位于中esriConfig。例如，要设置默认几何服务

5.popupTemplate 新版本不再有infowwindow 了

2 创建应用

1.创建HTML页面：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ArcGIS JavaScript APP</title>
    <style>
      html, body, #viewDiv {
        padding: 0; margin: 0;height: 100%;width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

2.添加对CSS和API的引用

该<script>标签加载从CDN通过ArcGIS API为JavaScript。发行新版本的API后，请更新版本号以匹配新发行的版本

<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.15/"></script>

3.加载模块

esri/Map -加载特定于创建地图的代码
esri/views/MapView -加载允许以2D模式查看地图的代码

使用第二个<script>标签从API加载特定的模块。使用以下代码段中的语法加载以下模块

esri/Map -加载特定于创建地图的代码 esri/views/MapView -加载允许以2D模式查看地图的代码

require([ "esri/Map", "esri/views/MapView" ],
            function(Map, MapView) {});

全局require()函数（由dojo提供）用于加载模块，Esri的JavaScript API构建在Dojo之上，以利用Dojo的模块化代码库以及协调跨浏览器差异的能力。

4.创建地图

使用新建一个地图Map，该地图是对从esri/Map模块加载的Map类的引用。您可以basemap通过将一个对象传递给Map构造函数来指定地图属性

require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {
  var map = new Map({
    basemap: "streets"
  });
});

其他底图的选项有：satellite，hybrid，topo，gray，dark-gray，oceans，osm，national-geographic。

5 创建2D地图还是3D场景

在中<head>，添加<script>标签和AMD require语句以加载Map和MapView或SceneView模块。创建一个新的Map并将basemap属性设置为topo-vector。如果要创建3D场景，请将该ground属性设置为world-elevation显示高程变化。最后，按照以下步骤之一创建适当的视图：

2D地图：

  <script>
  require([
      "esri/Map",
      "esri/views/MapView"
    ], function(Map, MapView) {
    var map = new Map({
      basemap: "topo-vector"
    });
    var view = new MapView({
      container: "viewDiv",
      map: map,
      center: [-118.80500, 34.02700], // longitude, latitude
      zoom: 13
    });
  });
  </script>

3D场景：

  <script>
  require([
      "esri/Map",
      "esri/views/SceneView"
    ], function(Map, SceneView) {
    var map = new Map({
      basemap: "topo-vector",
      ground: "world-elevation"  
    });
    var view = new SceneView({
      container: "viewDiv",
      map: map,
      camera: {
        position: {  
          x: -118.80800,
          y: 33.96100,
          z: 25000 
        },
        tilt: 65  
      }
    });
  });
  </script>

3 底图

在应用程序中使用的各种各样的底图。其中许多可以直接用字符串常量引用。

底图属性light-gray-vector，dark-gray-vector，satellite，streets-relief-vector，和streets-navigation-vector

var map = new Map({basemap: "streets-navigation-vector"});

底图的选项有：streets,satellite，hybrid，topo，gray，dark-gray，oceans，osm，national-geographic。

构建应用程序以交互方式选择和显示ArcGIS Online 底图：

要构建可以在底图之间切换的应用程序，可以使用BasemapToggle或BasemapGallery窗口小部件。

该BasemapToggle小部件允许您在定义的两个底图之间切换，

而BasemapGallery小部件允许您从属于ArcGIS Online组的多个底图中进行选择。您可以使用Esri托管的一组底图，也可以使用专门为应用程序组成的一组底图

示例1：切换底图：

启用两个底图之间的选择的最简单方法之一是使用BasemapToggle小部件。在此步骤中，您将配置窗口小部件以在“地形”底图和“卫星”底图之间切换。

//require语句中，添加对BasemapToggle和BasemapGallery模块的引用
require([
      "esri/Map",
      "esri/views/MapView",
      "esri/widgets/BasemapToggle",
      "esri/widgets/BasemapGallery"
    ], function(Map, MapView, BasemapToggle, BasemapGallery) {

在main中的代码结尾处function，创建一个BasemapToggle小部件将view和nextBasemap属性设置为satellite

var basemapToggle = new BasemapToggle({
        view: view,
        nextBasemap: "satellite"
      });
//  然后将小部件添加到视图的，将其添加到视图的右下角DefaultUI。
  view.ui.add(basemapToggle, "bottom-right");

示例2：从ArcGIS Online 组中选择底图：

选择底图的另一种方法是使用BasemapGallery小部件。在此步骤中，您将使用小部件从ArcGIS Online组中加载底图，以便用户可以选择和显示底图。

在main中function，创建一个BasemapGallery小部件并将其配置为从中加载底图ArcGIS Online。将设置view为活动视图，并将设置source为ArcGIS Online门户。将设置url为https://wwww.arcgis.com并将其设置useVectorBasemaps为，true以便从矢量图块组中加载底图。如果将此值设置为该值，false将加载栅格图块底图组

var basemapGallery = new BasemapGallery({
        view: view,
        source: {
          portal: {
            url: "https://www.arcgis.com",
            useVectorBasemaps: true  
          }
        }
});
通过将小部件添加到视图的，将其添加到视图的右上角DefaultUI
view.ui.add(basemapGallery, "top-right");

独孤宇云12345

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
ArcGIS使用（一）创建ArcGIS应用

ArcGIS官方文档：https://developers.arcgis.com/javascript/第一章、认识和使用ArcGIS1 ArcGIS for js 4.x 使用的是4.15 版本,ArcGIS 每个版本之间有差别，3 和4 的差别有点大 4 地图可以2D或3D显示，修改了绘图逻辑，地图和图层不在处理逻辑，而是由view处理视图专门用于可视化地图或场景中的数据。地图包含要显示的实际数据或图层，而视图则处理显示的数据。 4.x多了MapV...
复制链接

扫一扫