如何使用ArcGIS JS编辑器进行高效开发与应用？

ArcGIS JS 编辑器

ArcGIS API for JavaScript是由Esri公司开发的用于创建WebGIS应用的JavaScript库，它允许开发者通过调用ArcGIS Server的REST API，将地图资源和其他资源（如ArcGIS Online）嵌入到Web应用中，ArcGIS API for JavaScript提供了丰富的功能，包括页面布局、地图图层、空间坐标转换、要素符号、专题图、属性查询、空间分析、三维场景、小部件、渲染器等。

前端代码编辑工具

ArcGIS JS沙盒

ArcGIS JS的代码编写和测试可以在沙盒中进行，ArcGIS JS沙盒可以通过以下链接访问：https://developers.arcgis.com/javascript/3/sandbox/sandbox.html?sample=map_create。

代码笔

CodePen是一款前端所见即所得的工具，可以在线编辑制作前端页面，所见即所得，同时网站提供所有常见的js、css库，并且支持流行技术（如SASS），免去了自建平台的麻烦。

使用ArcGIS JS创建一个简单应用

创建任何GIS地图应用程序，都需要遵循一些步骤，假如想让地图成为应用程序的一部分，那么就需要按照这些步骤来执行，需要遵循以下步骤：

1、创建页面HTML代码

2、引用ArcGIS API for JavaScript和样式表

3、加载模块

4、确保DOM可用

5、创建地图

6、定义页面内容

7、页面样式

主要代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>Create a Map</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="https://js.arcgis.com/3.45/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.45/esri/css/esri.css">
    <style>
        html, body, #mapDiv {
            padding: 0;
            margin: 0;
            height: 100%;
        }
    </style>
    <script src="https://js.arcgis.com/3.45/"></script>
    <script>
        dojo.require("esri.map");
        function init(){
            var map = new esri.Map("mapDiv", {
                basemap: "topo-vector",
                center: [-122.45, 37.75],
                zoom: 13
            });
        }
        dojo.ready(init);
    </script>
</head>
<body class="claro">
    <div id="mapDiv"></div>
</body>
</html>

结果显示。

切片地图服务图层

ArcGISTiledMapServiceLayer类使用在当引用ArcGIS Server暴露的切片（缓存）地图服务时，这种类型的对象使用已经缓存过的切片地图集合，所以性能得以改善。

主要代码：

<!DOCTYPE html>
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">  
    <title>Tiled map service</title>  
    <link rel="stylesheet" href="https://js.arcgis.com/3.45/esri/css/esri.css">  
    <style>  
        html, body, #map {  
            height: 100%; width: 100%; margin: 0; padding: 0;  
        }  
    </style>  
    <script src="https://js.arcgis.com/3.45/"></script>  
    <script>  
        var map;  
        require(["esri/map",  
            "esri/layers/ArcGISTiledMapServiceLayer",  
            "esri/geometry/Point",  
            "esri/SpatialReference",  
            "dojo/domReady!"],  
            function(Map, ArcGISTiledMapServiceLayer, Point, SpatialReference) {  
                map = new esri.Map("map", {  
                    center: [-122.45, 37.75],  
                    zoom: 13,  
                    slider: true  
                });  
                var tiled = new ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer");  
                map.addLayer(tiled);  
            });  
    </script>  
</head>  
<body>  
    <div id="map"></div>  
</body>  
</html>

动态地图服务图层

动态地图服务图层使用在当引用ArcGIS Server暴露的动态地图服务时，这种类型的对象使用来自ArcGIS Server的动态地图服务图层。

主要代码：

<!DOCTYPE html>
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">  
    <title>Dynamic map service</title>  
    <link rel="stylesheet" href="https://js.arcgis.com/3.45/esri/css/esri.css">  
    <style>  
        html, body, #map {  
            height: 100%; width: 100%; margin: 0; padding: 0;  
        }  
    </style>  
    <script src="https://js.arcgis.com/3.45/"></script>  
    <script>  
        var map;  
        require(["esri/map",  
            "esri/layers/ArcGISDynamicMapServiceLayer",  
            "esri/geometry/Point",  
            "esri/SpatialReference",  
            "dojo/domReady!"],  
            function(Map, ArcGISDynamicMapServiceLayer, Point, SpatialReference) {  
                map = new esri.Map("map", {  
                    center: [-122.45, 37.75],  
                    zoom: 13,  
                    slider: true  
                });  
                var dynamic = new ArcGISDynamicMapServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer");   
                map.addLayer(dynamic);     
            });     
    </script>  
</head>  
<body>  
    <div id="map"></div>  
</body>  
</html>

地图事件

ArcGIS API for JavaScript中的地图事件包括点击、鼠标移动、鼠标悬停、双击、按键按下、按键抬起、缩放开始、缩放结束等。

map.on("click", function(evt){
    var x = evt.mapPoint.x; //获取点击位置的X坐标值
    var y = evt.mapPoint.y; //获取点击位置的Y坐标值
    alert("Clicked at: " + x + ", " + y); //弹出提示框显示点击位置的坐标值
});

Web编辑功能介绍与实现方法

ArcGIS API for JavaScript支持在Web上编辑地理数据，基于Web的编辑允许一组人在您的数据上进行添加与删除，这些人包括现场工作人员、公司其他部门的分析员，或者甚至是一群受人欢迎的志愿者，他们可以通过简单的编辑界面为您的数据做出有价值的贡献，API包含帮助您向应用程序添加编辑功能的小部件，您可以在地图和Web应用程序中进行一些设计工作，以简化编辑时的终端用户体验，您可以在ArcGIS 10中预定义一组要素模板，以使用户更容易添加确切类型的相同要素，您还可以限制可以添加的属性，并在下拉列表中添加一些可用的属性选项，以方便准确、统一的数据输入，作为Web编辑应用程序的设计人员，您可以完全掌控您向用户呈现的编辑体验的难易程度，Web编辑需要对feature service（要素服务）进行初始设置，以公开一个图层的要素的几何信息和属性信息，geometry services（几何服务）也可以用来完成一些Web编辑任务，为了使用主编辑部件，您必须有一个正在运行的geometry services。

以上就是关于“arcgis js 编辑器”的问题，朋友们可以点击主页了解更多内容，希望可以够帮助大家!

原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/690823.html

如何使用ArcGIS JS编辑器进行高效开发与应用？

前端代码编辑工具

使用ArcGIS JS创建一个简单应用

切片地图服务图层

动态地图服务图层

地图事件

Web编辑功能介绍与实现方法

相关推荐

如何使用ArcGIS JS进行高效的坐标转换？

如何在ArcGIS JS中绘制坐标点？

如何在ArcGIS JS中添加图层？

如何利用ArcGIS JS API创建和发布地图服务？

如何使用ArcGIS JS绘制图形？

如何利用ArcGIS和JavaScript实现鹰眼效果？

发表回复