ArcGIS API for JavaScript学习笔记

最新推荐文章于 2024-06-27 01:24:19 发布
最新推荐文章于 2024-06-27 01:24:19 发布
阅读量546 收藏
点赞数
分类专栏： 笔记 文章标签： arcgis
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q124467623/article/details/118531572
版权

1. ArcGIS pro包含了ArcMap功能。

2. 4.x和3.x版本区别

        项目中如果有三维相关希求，选择4.x版本；如果没有三维相关需求，选择3.x版本（二维操作更多）。

3.arcgis api本地部署

        https://blog.csdn.net/qq_36792085/article/details/87897245

4.本地运行（在nginx服务中）：

 <html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>ArcGIS API for JavaScript Tutorials: Display a map</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <!-- <link rel="stylesheet" href="./4.2/main.css"> -->
    <!-- <script src="./4.2/init.js"></script> -->
    <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/4.19/esri/css/main.css">
    <script src="http://localhost/arcgis_js_api/library/4.19/init.js"></script>

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

        const view = new MapView({
          map:map,
          center:[114,22],
          zoom:8,
          container:'viewDiv'
        })

      })
    </script>

  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

5.加载自定义底图（TileLayer, FeatureLayer, MapImageLayer, ImageryLayer）

1）公网上自定义底图地址：http://map.geoq.cn/arcgis/rest/services

2）   //1.MapServer结尾的是动态服务，如果没有切片，需要用MapImageLayer实例化，有切片用TileLayer实例化
        //2.如果是FeatureServer结尾的，用FeatureLayer类实例化
        //3.如果zoom和center没有生效，证明是自定义图层api用错了

3)代码：

<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>添加服务图层</title>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="http://localhost/4.19/esri/css/main.css">
  <script src="http://localhost/4.19/init.js"></script>

  <script>
    require(["esri/Map", "esri/views/MapView",
      "esri/layers/TileLayer", "esri/layers/FeatureLayer",
      "esri/layers/MapImageLayer", "esri/layers/ImageryLayer"
    ], function(Map, MapView, TileLayer, FeatureLayer, MapImageLayer, ImageryLayer) {
      var map = new Map({
        basemap: 'osm'
      });

      let layer01 = new TileLayer({
        url: "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer"
      });
      map.add(layer01, 0) //添加到底图上边，index越大越在顶层

      let layer02 = new ImageryLayer({
        url: "https://landsat2.arcgis.com/arcgis/rest/services/Landsat8_Views/ImageServer"
      });
      map.add(layer02, 1)

      let layer03 = new MapImageLayer({
        url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer"
      });
      map.add(layer03, 2)

      let layer04 = new FeatureLayer({
        url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0"
      });
      map.add(layer04, 3)

      const view = new MapView({
        map: map,
        center: [-120, 30],
        zoom: 4,
        container: 'viewDiv'
      })

    })
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>

6.实例化底图控件 

1）控件所在目录：esri/widgets

2）控件包含的有：Home、Legend、ScaleBar、Zoom

3）用法1：实例化、添加到view：

let homeWidget = new Home({
  view: view,
});
view.ui.add(homeWidget, "top-left");

  方法2：控件设置自定义位置：

<style>
...
  #zoomWiget{
    position: absolute;
    top: 50px;
    left: 50px;
  }
</style>

<script>
    //zoom1不自定义位置
    let zoom1 = new Zoom({
      view: view
    });
    view.ui.add(zoom1, "top-right");

    //zoom2自定义位置
    let zoom2 = new Zoom({
      view: view,
      container: document.getElementById('zoomWiget')
    });
    view.ui.add(zoom2);
</script>

...
<div id="zoomWiget"></div>

4）全部代码：

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>添加控件</title>
    <style>
      html,
      body,
      #viewDiv {
        position: relative;
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
      #zoomWiget{
        position: absolute;
        top: 50px;
        left: 50px;
      }
    </style>

    <link rel="stylesheet" href="http://localhost/4.19/esri/css/main.css">
    <script src="http://localhost/4.19/init.js"></script>

    <script>
      require(["esri/Map","esri/views/MapView",
      "esri/Basemap","esri/layers/MapImageLayer",
      "esri/layers/TileLayer","esri/widgets/Home",
      "esri/widgets/Legend","esri/widgets/ScaleBar",
      "esri/widgets/Zoom"],
      function(Map,MapView,Basemap,MapImageLayer,TileLayer,Home,Legend,ScaleBar,Zoom){

        var basemap = new Basemap({
          baseLayers:[
          new TileLayer({
            url: "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer"
          }),
          ],
          title:'basemap',
          id:'20001'
        });

        var map = new Map({
          basemap:basemap //或者外层写map.add(layer);
        });

        const view = new MapView({
          map:map,
          center:[114,22],
          zoom:8,
          container:'viewDiv'
        })
        view.ui.components = [];//清空zoom组件
  
        
        //Home控件
        let homeWidget = new Home({
          view: view,
        });
        view.ui.add(homeWidget, "top-left");
        //图例控件
        let legend = new Legend({
          view: view,
        });
        view.ui.add(legend, "bottom-right");
        //比例尺
        let scaleBar = new ScaleBar({
          view: view,
          unit:'metric'
        });
        view.ui.add(scaleBar, {
          position: "bottom-left"
        });
        //zoom1不自定义位置
        let zoom1 = new Zoom({
          view: view
        });
        view.ui.add(zoom1, "top-right");
        //zoom2自定义位置
        let zoom2 = new Zoom({
          view: view,
          container: document.getElementById('zoomWiget')
        });
        view.ui.add(zoom2);

      })
    </script>

  </head>
  <body>
    <div id="viewDiv"></div>
    <div id="zoomWiget"></div>
  </body>
</html>

7.地图符号化（样式、标注）

代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html,body {
      padding: 0;
      width: 100%;
      height: 100%;
    }
    #mapDiv {
      margin: 10px auto;
      width: 90%;
      height: 90%;
      border: 2px solid #999;
    }
  </style>
  <link rel="stylesheet" href="http://localhost/4.18api/esri/themes/light/main.css">
  <script src="http://localhost/4.18api/init.js"></script>

  <script>
    require(["esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer"],
      function(Map, MapView, FeatureLayer) {
        var map = new Map({
          basemap: 'topo-vector',
        });

        //点样式
        var trailheadersRenderer = {
          type: 'simple',
          symbol: {
            type: 'picture-marker',
            url: 'http://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png',
            width: '18px',
            height: '18px'
          }
        };
        //点标注，标注TRL_NAME字段
        var trailheadsLabels = {
          symbol: {
            type: "text",
            color: "#FFFFFF",
            haloColor: "#5E8D74",
            haloSize: "2px",
            font: {
              size: "12px",
              family: "Noto Sans",
              style: "italic",
              weight: "normal"
            }
          },
          labelPlacement: "above-center",
          labelExpressionInfo: {
            expression: "$feature.TRL_NAME"
          }
        };
        //点图层
        var trailheadsLayer = new FeatureLayer({
          url: 'https://services3.arcgis.com/GVgbJbqm8hXASVYi/ArcGIS/rest/services/Trailheads/FeatureServer/0',
          renderer: trailheadersRenderer,
          labelingInfo: [trailheadsLabels]
        });
        map.add(trailheadsLayer)

        //线图层样式，根据海拔ELEV_GAIN设置线宽，海拔0设置3px，海拔2300设置7px
        var trailsRenderer = {
          type: "simple",
          symbol: {
            color: "#BA55D3",
            type: "simple-line",
            style: "solid"
          },
          visualVariables: [{
            type: "size",
            field: "ELEV_GAIN",
            minDataValue: 0,
            maxDataValue: 2300,
            minSize: "3px",
            maxSize: "7px"
          }]
        };
        var trailsLayer = new FeatureLayer({
          url: 'https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0',
          renderer: trailsRenderer,
          opacity: .75
        })
        map.add(trailsLayer, 0)

        //设置自行车专用路线
        var bikeTrailsRenderer = {
          type: "simple",
          symbol: {
            type: "simple-line",
            style: "short-dot",
            color: "#FF91FF",
            width: "1px"
          }
        };
        var bikeTrails = new FeatureLayer({
          url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
          renderer: bikeTrailsRenderer,
          definitionExpression: "USE_BIKE = 'YES'"
        });
        map.add(bikeTrails, 1);

        //为每种类型的公园区域使用不同的符号
        function createFillSymbol(value, color) {
          return {
            "value": value,
            "symbol": {
              "color": color,
              "type": "simple-fill",
              "style": "solid",
              "outline": {
                "style": "none"
              }
            },
            "label": value
          };
        };
        var openSpacesRenderer = {
          type: "unique-value",
          field: "TYPE",
          uniqueValueInfos: [
            createFillSymbol("Natural Areas", "#FF0000"),
            // createFillSymbol("Natural Areas", "#9E559C"),
            createFillSymbol("Regional Open Space", "#A7C636"),
            createFillSymbol("Local Park", "#149ECE"),
            createFillSymbol("Regional Recreation Park", "#ED5151")
          ]
        };
        var parksLayer = new FeatureLayer({
          url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0",
          renderer: openSpacesRenderer,
          opacity: .2,
        });
        map.add(parksLayer, 0)

        var view = new MapView({
          container: 'mapDiv',
          map: map,
          zoom: 13,
          center: [-118.80543, 34.02700],
        });

      }
    )
  </script>
</head>

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

</html>

8.ArcGIS API绘制点线面

方法1：通过控件的方法实现绘制"esri/widgets/Sketch", "esri/layers/GraphicsLayer"

方法2：通过代码实现绘制："esri/Graphic"

两种方法实现代码：

<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>绘制点线面</title>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="http://localhost/4.19/esri/css/main.css">
  <script src="http://localhost/4.19/init.js"></script>
  <script>
    require(["esri/Map", "esri/views/MapView",
      "esri/widgets/Sketch", "esri/layers/GraphicsLayer",
      "esri/Graphic"
    ], function(Map, MapView, Sketch, GraphicsLayer, Graphic) {

      let graphicLayer = new GraphicsLayer()
      var map = new Map({
        basemap: 'osm',
        layers: [graphicLayer]
      });

      const view = new MapView({
        map: map,
        center: [114, 22],
        zoom: 8,
        container: 'viewDiv'
      })

      //方法1：通过控件的方法实现绘制
      const sketch = new Sketch({
        layer: graphicLayer,
        view: view,
        creationMode: "update"
      });
      view.ui.add(sketch, "top-right")

      //方法2：通过代码的方法实现绘制，以画线为例，点线面类似
      let polyline = {
        type: "polyline", // autocasts as new Polyline()
        paths: [
          [114, 23],
          [114.2, 23.3],
          [114.4, 23]
        ]
      };
      let polylineSymbol = {
        type: "simple-line", // autocasts as SimpleLineSymbol()
        color: [226, 119, 40],
        width: 4
      };
      let polylineAtt = {
        Name: "Keystone Pipeline",
        Owner: "TransCanada"
      };
      let polylineGraphic = new Graphic({
        geometry: polyline,
        symbol: polylineSymbol,
        attributes: polylineAtt
      });
      view.graphics.add(polylineGraphic);

    })
  </script>

</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>

9.ArcGIS API弹窗

  • 用到的类："esri/PopupTemplate"
  • 弹窗可以放不局限域API的东西，放的就是div:

        popupTemplate-example

10.属性查询，并定位到查询的结果

  • 用到的类："esri/tasks/QueryTask", "esri/tasks/support/Query"
  • 代码：
  • <html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>属性查询</title>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="http://localhost/4.19/esri/css/main.css">
  <script src="http://localhost/4.19/init.js"></script>

  <script>
    require(["esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer",
      "esri/tasks/QueryTask", "esri/tasks/support/Query"
    ], function(Map, MapView, FeatureLayer, QueryTask, Query) {

      var map = new Map({
        basemap: 'osm'
      });
      const view = new MapView({
        map: map,
        center: [114, 25],
        zoom: 4,
        container: 'viewDiv'
      })

      let queryTask = new QueryTask({
        url: 'http://localhost:6080/arcgis/rest/services/province/MapServer/0'
      });
      let query = new Query();
      query.returnGeometry = true;
      query.outFields = ["*"];
      // query.where = "BOU2_4M_ &gt; 910"; 
      query.where = "NAME= '黑龙江省'";

      // When resolved, returns features and graphics that satisfy the query.
      queryTask.execute(query).then(function(results) {
        console.log(results.features);
        x = results.features[0].geometry.extent.center.longitude
        y = results.features[0].geometry.extent.center.latitude
        console.log(x, y);
        setTimeout(() => {
          view.goTo({
              center: [x, y],
              zoom: 8,
            })
            .catch(function(error) {
              if (error.name != "AbortError") {
                console.error(error);
              }
            });
        }, 2000);
      });
    })
  </script>

</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>

q124467623
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
arcgis-api-for-js-之基本知识
jiegiser博客
01-27 536
1. 确保DOM可以 一个是ready函数，可以将其包括在require()函数中，它会在HTML元素和任何模块加载之后才执行。另一个是可以在require()函数中使用dojo/domReady!（感叹号表示domReady是AMD加载器插件）插件。 esri/Map -加载特定于创建地图的代码 esri/views/MapView -加载允许以2D查看地图的代码 dojo/domR...
ArcGIS js api 4+版本 draw measure legend扩展
02-21
ArcGIS js api4+版本的绘图、测量、图例工具
ArcGIS API for js Legend（图例）
weixin_30364325的博客
01-23 1966
1、说明 有关怎么把ArcGIS API for js部署到IIS上，请参考我上面的写的博客https://www.cnblogs.com/net064/p/10302660.html 2、运行效果 3、html代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-T...
【数据可视化】arcgis api for js4.x点聚类(附上完整代码VUE3+示例数据.csv)
最新发布
WebGIS皮卡茂的博客
06-27 2070
【数据可视化】【GIS空间分析】【webgis】arcgis api for js4.x点聚类(附上完整代码VUE3+示例数据.csv)
ArcGIS API for JavaScript开发之UI
weixin_45752569的博客
06-11 797
ArcGIS API for JavaScript 开发UI（1）container（2）height（3）padding（4）view（5）width（6）add(component, position)（7）empty(position)（8）find(id)（9）move(component, position)（10）remove(component) UI require(["esri/views/ui/UI"], function(UI) { /* code goes here */ });
ArcGIS API for JavaScript - FeatureLayer对要素进行applyEdits删除操作无效
idomyway的博客
12-01 1579
前言     在项目中，通过FeatureLayer的applyEdits方法实现对数据库要素的增删改查，在对要素进行增加和修改的时候都没问题， 但是在进行删除的时候一直无效，报noEdits错误。     全网查询了以后终于在https://blog.csdn.net/feeysus/article/details/39006757中找到了答案 解决方法     在一个页面中，不要对一个
arcgis api for javascript v4.23
06-26
《ArcGIS API for JavaScript v4.23：深入解析与应用》 ArcGIS API for JavaScript是Esri公司推出的一款强大的地图开发工具，主要用于构建交互式的Web GIS应用。v4.23版本作为其一个重要更新，引入了众多新特性和...
ArcGIS API for JavaScript4.8 实例
10-26
《ArcGIS API for JavaScript 4.8 实例详解》 ArcGIS API for JavaScript 是Esri公司推出的一款强大的地图开发工具，主要用于构建交互式的Web GIS应用。4.8版本是其发展过程中的一个重要里程碑，提供了丰富的功能和...
arcgis api for javascript v4.18 v3.35
12-22
《ArcGIS API for JavaScript v4.18与v3.35详解》 ArcGIS API for JavaScript是Esri公司提供的一款强大的地图开发工具，用于在Web应用中构建交互式地图和地理信息系统。此API支持两种主要版本：v3.x系列和v4.x系列...
ArcGIS API for JavaScript 4.22版 API+SDK
03-10
ArcGIS API for JavaScript用于构建高性能的WebGIS应用程序，同时结合现代网络技术和强大的地理空间功能，利用ArcGIS Online、ArcGIS Server发布的地图服务以及网络上的其他服务内容，使用户在web端能够进行应用程序...
ArcGIS API for JavaScript v3.3下载（api + sdk开发包）
10-06
"arcgis_js_v33_sdk.zip"包含了详细的文档、示例代码和开发资源，是开发者学习和应用ArcGIS API for JavaScript v3.3的重要参考资料。SDK包括以下部分： 1. 文档：详尽的API参考文档，解释了每个函数、类和方法的...
ArcGIS API for JS 之 FeatureLayer（一）FeatureLayer的创建
WhatMOMO5477的博客
02-24 2202
ArcGIS API for JS 之 FeatureLayer （一）FeatureLayer的创建
arcgis for js 4 设置地图中心点和zoom
lsk222的博客
05-09 1130
arcgis
基于Arcgis的echarts路径报表,轨迹回放实现记录
06-21 1030
arcgis动态echarts轨迹回放
arcgis js（三）移除和添加地图控件
郝大大的博客
08-20 1762
1、我们来看下面一段代码： const view = new MapView({ map: map, center: [-118.805, 34.027], zoom: 13, container: "viewDiv" }); 该段代码实例化了一个MapView对象view，在实例化的时候可以进行参数的初始化，这里初始化了map、center、zoom和container，含义跟他们的名字一样，arcgis js默认自带了底部显示的那一行属性信息和左上角的放大缩小按
arcgis api for 4.x 学习笔记-自定义二三维场景切换widget的实现
花姐夫JUN的博客
03-14 1893
一、介绍 ArcGIS API for JavaScript 的 4.x 版几乎包含了 3.x 的所有功能以及许多 4.x 独有的新创新；例如 3D 可视化、地图旋转以及更深入的 ArcGIS Enterprise 和 ArcGIS Online 集成。虽然并非所有 3.x 功能都包含在 4.x 中，但每个版本都会增加更多功能，直到它不仅与 3.x 匹配，而且远远超过它。 ...
WebGIS开发杂谈（二）——ArcGIS JavaScript API效果展示
A__Ant的博客
10-30 1235
1、水面效果 可调参数： 波浪流动方向 波浪强度 水面颜色 参考链接：https://developers.arcgis.com/javascript/latest/sample-code/visualization-realistic-water/live/index.html 2、BIM模型 控制部件显隐 剖切分析 3、客户端查询统计 在客户端做的查询统计，变换参...
ArcGIS API for JavaScript应用开发
码上修行
01-25 668
ArcGIS API for JavaScript 应用开发简介一、开发环境准备ArcGIS API for JavaScript 提供在线版API，4.x 是 ArcGIS ...
UI components 完整案例
weixin_33826268的博客
02-18 668
2019独角兽企业重金招聘Python工程师标准>>> ...
ArcGIS API for Javascript 开发指南
在开始学习 ArcGIS API for Javascript 之前，需要了解一些基本概念，包括 Javascript、Dojo、REST、JSON 等。 * Javascript 是一种脚本语言，用于网页的动态交互。 * Dojo 是一个基于 Javascript 的开源框架，提供...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

q124467623

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值