首页
学习
活动
专区
圈层
工具
发布

ArcGIS API for JavaScript开发入门必读

ArcGIS API for JavaScript开发必读的一篇入门文档,文章中对ArcGIS API for JavaScript做了简单的介绍,包括学习路线、版本选择、使用流程和一些学习资源等内容,...写在前面 这篇文章写在我用ArcGIS API for JavaScript(后面统称为”ArcGIS JS API”)开发了两年项目后的某一天夜里。...ArcGIS JS API学习路线 ArcGIS JS API是用来做WebGIS开发的,这一点大家必须要知道,它做不了移动端和桌面端,当然,如果你用野路子的话,它也可以做,详细的操作步骤请看我后续的文章...如果大家有需要,我后期会抽时间整理一门ArcGIS JS API的项目实践课程,大家可以跟着视频课程动手学习。...A:我在ArcGIS Server上发布了一些数据服务,应该用哪些API去实例化服务图层呢?

6.6K51

使用现代化的脚本进行 ArcGIS JS API 开发

使用现代化的脚本进行 ArcGIS JS API 开发 ArcGIS JS API 基于古老的 JavaScript 框架 Dojo 开发, dojo 虽然是曾经的王者, 但是2020年的前端开发, 早已是...JavaScript 模块化标准, 现在依然可以在浏览器中使用; ArcGIS JS API 提供 AMD 模块严重依赖 dojo 的加载器, 无法在 ES6 的环境中直接使用; dojo 的入侵性比较强...使用 ES6+ 脚本进行 ArcGIS JS API 开发 如果目标浏览器不包括 IE11 的话, 则可以放心的使用 async/await 和 import 等这些 JavaScript 最新的功能,...为了简化配置, 可以直接用 git 克隆我配置好的模板项目 esri-ts-demo , 如果没有安装 git 也可以直接下载 esri-ts-demo.zip 。...这个模版项目配置了已经配置好了使用 TypeScript 进行开发所需的环境, 用 VS Code 打开之后, 在集成的终端窗口中输入命令: npm install 等依赖项安装完成之后, 再输入命令:

2.8K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    ArcGIS API for JavaScript 4.18基于ES Modules的新开发方式@arcgiscore

    写在前面 随着前端主流框架Vue和React的发展,大家在做WebGIS项目开发时是不是也在vue或者react项目里使用ArcGIS API for JavaScript呢,之前我们在vue或者react...项目中通过esri-loader使用ArcGIS API for JavaScript开发的两种方式,至于在Vue中的使用方式见下面的文章即可,里面有详细的介绍流程,文章列表如下: 【番外】 Vue中使用...这样其实很不方便我们的代码编写,我们更希望的一种方式是:如果需要什么ArcGIS API for JavaScript的API模块,我们直接在组件代码的顶部引入即可,这样在组件代码的任何地方都可以使用这个...在此处为了演示我新建了一个React项目demo,项目demo新建完成后按照官网所示在项目demo根目录下打开命令行窗口,然后安装@arcgis/core这个包: npm install @arcgis...总结 随着@arcgis/core方式的出现,目前我们在Vue或者React项目中使用ArcGIS API for JavaScript的开发方式由以前的一种变为了目前的两种方式:esri-loader

    1.9K20

    【番外】Electron和ArcGIS API for JavaScript的开发

    最近学了一些Electron.js开发桌面应用的知识,然后作为一名专业的GISer,脑海里马上想到的是,它能不能和我们的ArcGIS JS API整合呢,意思就是,用我们的ArcGIS JS API去开发桌面应用...概述 写这篇文章主要是想折腾下,因为我看到JS可以通过Electron来做桌面应用程序,那么Electron能不能和ArcGIS API for JavaScript进行结合开发呢,这样一来是不是可以从某种意义上理解成我们的...ArcGIS API for JavaScript可以做桌面应用了呢?...引入ArcGIS API for JavaScript,地图实例化 1、在index.html文件里,引入ArcGIS API for JavaScript相关的css样式包和JS文件,如下: <link...,查看效果: 总结 其实Electron结合ArcGIS API for JavaScript开发的关键是要了解Electron的渲染机制,如果不了解的话中间肯定会报错。

    1.1K20

    【学习过程】寻找合适的WebGIS开发构架

    ArcGIS JavaScript API是一套基于客户端的API,用于开发高性能,易于使用的地图应用。它使你非常容易在你的网页中嵌入地图。...它使用容易,不需要了解类似于象ArcGIS Server这样的GIS专业开发软件,只需要了解javascript,便可以在非GIS的web应用中嵌入和使用地图。...和一些网友交流,得知,ADF开发GIS,是一种可以比较深度开发的方式,而那种用纯JavaScript apis开发的只是一种轻量级应用(而且,还要求开发人员的电脑是连接了公网的,否则那个库很难引用,反正我试用离线包没有成功...所以,现在决定还是用 Web ADF进行开发,不过,以后要大量引入ADF 的JS API,这样会更高效,而且用JS在客户端处理服务器控件也会更加方便而且直观些。...它使用容易,不需要了解类似于象ArcGIS Server这样的GIS专业开发软件,只需要了解javascript,便可以在非GIS的web应用中嵌入和使用地图。

    1.5K20

    【番外】 使用@arcgiscli脚手架进行ArcGIS JS API开发

    本文主要介绍如何在Vue和React项目中使用ArcGIS JS API进行开发,与以往的esri-loader开发方式不同的是,本文使用的是@arcgis/cli脚手架的开发方式。...概述 今天兴趣使然,在翻阅ArcGIS API for JavaScript官网的时候,发现了跟esri-loader方法不同的另外一种可以在Vue、React和Angular这种主流框架中使用JS API...2.5、用编辑器打开项目代码,此处用VS Code打开,然后可以看到如下的代码结构: 从以上代码组织结构可以看到,我们创建的项目是基于Vue框架的,更加准确点说是底层基于webpack来搭建的工程项目...如果我们用离线版本的API,我们可以通过修改如下文件进行配置: src/worker-config.ts 以上就是我们通过脚手架搭建的基于Vue框架的应用模板,我们如果进行开发的话,可以在此项目代码上进行修改定制...总结 本篇文章通过介绍如何安装@arcgis/cli脚手架、如何通过脚手架来创建基于Vue和React框架的应用模板来介绍了另外一种在主流框架中应用ArcGIS API for JavaScript的开发方式

    2.6K30

    ArcGIS JS API 4.17更改测量控件黄白相间的默认样式

    当我们使用ArcGIS JS API开发项目时,经常会用到地图测量控件,用于测量地图上两点之间的距离、一片区域的面积或周长等,但是ArcGIS JS API测量控件自带的默认样式是黄白相间的大粗线,这在用户看来是很不美观的...问题描述 在使用ArcGIS API for JavaScript 4.17开发项目时,有一个需求是需要在地图上添加距离测量和面积测量的控件,这其实很简单,直接调用ArcGIS JS API自带的测量控件就可以实现...解决思路 遇到这种需求的话,下意识就去看看ArcGIS JS API的官网有没有提供可以直接使用的API,但是经过一番查找后发现是没有的,那接下来就只能找找其他的地图JS库里面有没有了,如果有的话就试试能不能用于...ArcGIS的底图,其实除了这种做法之外还有另一种做法,就是找到ArcGIS JS API的源码文件,直接改里面的css样式代码就可以,最后在”AriaGIS“大佬的帮助下发现确实是行得通的,但是考虑到目前项目中使用的...ArcGIS JS API地址是在线的官网地址,所以没法用这种方法,那就只能再想想其他办法了。

    2.3K30

    html2canvas实现ArcGIS API for JavaScript 4.X截图功能

    主要介绍ArcGIS API for JavaScript 4.X实现地图截图的两种方式,解决普通地图截图是底图空白的问题,最终效果如下: 需求描述 在我们项目开发过程中,有时候需要将地图上面绘制的元素或添加的一些图标之类的小元素进行截图保存或者展示...目前在ArcGIS API for JavaScript中其实已经提供了地图截图的API,但是该API对地图底图和一些自定义的需求支持度并不高,所以我们平时项目开发时建议使用第三方截图模块,今天就给大家介绍下关于地图截图的两种方式...,最终效果如下: 实现方法 一、ArcGIS API for JavaScript自带的截图方式 介绍的第一种方式就是ArcGIS API for JavaScript自带的“esri/widgets...,但是随之而来的问题就是自由度并不高,因为它已经自带了一份写好的微件UI,如下图: 在我们正常的项目开发中其实API自带的UI我们基本是不用的,需要跟着公司UI设计稿来做,所以我们就需要自己写...,如下图所示: 在通过ArcGIS API for JavaScript 4.X版本实例化地图的时候,我们的底图是通过canvas元素绘制出来的,它并不是之前3.X通过svg的形式绘制的,这就意味着

    2.9K30

    【一张图框架-1】自动化构建WebGIS项目

    写在前面 当你在开发WebGIS项目的时候是否为以下问题而烦恼呢?...如何在Vue或React框架中配置ArcGIS API for JavaScript; ArcGIS API for JavaScript中每个API模块的知识点都了解,但是具体的功能开发却不知道如何组织...cdmap-cli可以允许你通过一行命令直接创建一个完整的WebGIS项目,为你省去了以往项目开发过程中安装ArcGIS API for JavaScript、安装vue router、安装vuex、安装...有了cdmap-cli,你可以在短短五分钟之内完成项目创建、插件安装和项目启动的全套流程,为你省下了将近一天的工时。...同时项目代码模板中提供了ArcGIS API for JavaScript的运用示例,我们参考其用法开发自己需要的功能即可,大大减少了开发成本和学习成本。

    77520

    WebGIS学习资源推荐(包含学习路线、软件和数据资源推荐)

    2.3、ArcGIS API for JavaScript 网址:https://developers.arcgis.com/javascript/ 资源类型:文档资源 推荐理由:免费使用。...前三个地图JS库仅仅是一个开发所需要的库而已,但是ArcGIS提供了从数据生产、处理、入库、发布到服务端、前端调用、渲染、分析一整套的软件和解决方案,所以通过学习ArcGIS API for JavaScript...这个开发包,你会对WebGIS一整套的项目工程搭建有一个完整的认识。...API for JavaScript之外的候选项,开源、免费,但是由于是英文文档并且三维本身就比较难,所以新手勿碰,但可以尝鲜。...://www.arcgis.com/home/index.html(ArcGIS Online ) 推荐理由:前面说了,ArcGIS在一个WebGIS项目中,分别在数据生产、处理、入库、发布到服务端、前端调用

    6.9K37

    菜鸟的 GIS 基本概念学习

    入门教程 用 ArcGIS绘制一幅完整的地图 地图入门——ArcGIS Web GIS入门 Learn ArcGIS (OGC-5)運用GeoServer發布圖資(以WFS、WMS為例) 开源 GIS...GIS能够将我们日常相关的信息以空间信息的形式,在地图上展示,有了这些内容之后,我们就可以做很多事情。...目前是开源项目中支持栅格数据的直接方案 pgRouting:主要用于路径规划 开源 Web 组件 这里主要指的是一些开源的 Javascript API,使用这些 API 来实现地图的呈现。...,很快就可以出效果 政府网站很少被黑(违法成本高、信息价值低)、流量也低,不用花太多精力去维护和容灾,因此只需要一份 ArcGIS 授权 政府项目资金一般不会太缺,足以购买和外包 ArcGIS 解决方案...这样一来,大学生走出校园后,基本上只会用 ArcGIS,并且还用得非常熟——不得不说这是非常高明的商业做法 实际上,由于不少 GIS 项目功能是比较简单的,因此使用如上的开源 GIS 完全可以完成相应的内容

    5.2K100

    Ags 9.3 文档逐步上线

    ArcGIS Server始终是关注的焦点,新版本的软件到用户手上还需要一段时间,如果现在就迫不及待想了解ags9.3新的特性,可以看ESRI刚刚发布的在线文档: ArcGIS Server 9.3...Web Help ArcGIS Server 9.3 Javascript API 标准和Mushup是这次ags更新的主题,wfs、using SLDs in wms、wcs、kml、javascript...arcims9.2)的应用就已经开始向标准(事实标准)和其他服务整合,比如2007年ESRI中国应用开发大赛一等奖作品(作者Mars)就是arcims9.2+openlayer整合,一些ags项目使用...虽然从ags9.2-9.3的功能改进,可以看出ESRI在过去以GIS核心服务为重心的基础上,开始增强客户端的应用开发(ADF模板程序、javascript api),但是它并没有停止服务层面的不断改进,...相关链接: Javascript API Samples ArcGIS Server Resource Center 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn

    48410

    ArcGIS Maps SDK for JavaScript系列之一:在Vue3中加载ArcGIS地图

    ArcGIS Maps SDK for JavaScript简介 ArcGIS Maps SDK for JavaScript 是由 Esri 公司开发的一款用于构建交互式地图应用程序的 JavaScript...在模块化开发的今天,3.x已经不能适应现在的开发模式,如果没有老的项目进行维护,我们也不需要去使用3.x了,因此,我们这里重点介绍4.x版本 ArcGIS Maps SDK for JavaScript...Vue3中使用ArcGIS Maps SDK for JavaScript的步骤 创建 Vue 3 项目 1、新建ArcGISAPIProject文件夹,并用vscode打开 2、打开终端,在终端中输入...npm create vite@latest创建vite项目,输入项目名称vite-vue3-arcgis,选择vue框架,并选中JavaScript语音创建项目 3、创建成功后,进入vite-vue3...-arcgis文件夹,并使用npm i 安装依赖 4、安装成功后,输入npm run dev,运行项目查看基础框架是否正常 安装 ArcGIS Maps SDK for JavaScript 在终端中输入

    2.1K40

    2013年年终总结

    2013年呢,是本程序猿参加工作的第二个年头,在本年头里,完成了上级领导安排的一切开发项目与任务,并团结部门人员,做好team的团结等事宜。...,选用了Arcgis10的Add-In插件十开发模式,但是,不论那种开发方式,一样的功能,一样的类库,所以,在技术上没有多大的影响,几这样做吧。...先不说这个培训班授课的内容与质量如何,就我个人而言,在学校,我们学到的都是传统遥感,在单位,做开发了,没有机会接触了,经过10天的学习,对定量遥感有了一定的认识与信念,并相信,遥感的未来一定是定量化而非传统的对天吹牛...2)自学那些事 在工作之余,学习了很多的知识。或许是GIS开发这个行业的特殊性吧,个人感觉,需要学习的知识太多,从编程到美工,再到哲学,心理学等等,我个人认为都是息息相关的。...到Javascript,再到Arcgis for Android API,看了一圈,发现人家ESRI的东西与思维很不错,是一套东西;由于学习android,所以呢,最近又在看一些java网络编程的相关知识

    51310

    【测评】 使用@arcgiscli脚手架和esri-loader方式进行ArcGIS JS API开发的测评

    本文主要针对于在Vue和React项目中使用esri-loader和@arcgis/cli脚手架进行ArcGIS JS API开发时,比较两种方式的不同,供各位参考。...选择纠结症”,我到底该用哪种方式来进行ArcGIS JS API的开发呢?...不要着急,我给你一个可供选择的参考,简单又实用: 如果项目已经在进行实施,中途可能需要用到ArcGIS JS API中的相关功能模块,那就选择esri-loader方式; 如果项目并未开始实施,...但是后期会有ArcGIS JS API中的相关功能需求,推荐使用@arcgis/cli脚手架,当然,你也可以用esri-loader方式。...相关测评内容 实际项目实施方面 根据文章开始所说,如果项目已经在实施,我们只能通过esri-loader方式来进行JS API的开发,因为此时JS API算是后期才引入到项目中的,我们的项目可能并不是一个整体的

    1.7K30

    ArcGIS API for Javascript学习

    一、ArcGIS API for Javascript 介绍 ArcGIS API for Javascript 是由美国 Esri 公司推出,跟随ArcGIS 9.3 同时发布的,...通过 ArcGIS API for Javascript可以对ArcGIS for Server 进行访问,并且将ArcGIS for Server 提供的地图资源和其它资源(ArcGIS Online...二、ArcGIS API for Javascript 主要特点 1、空间数据展示:加载地图服务,影像服务,WMS 等。...,在使用ArcGIS API for Javascript 的时候,其实就是在使用这些REST API 使用这些服务对外的能力,了解每种服务的具体功能,在开发的时候就可以根据需求做到游刃有余。...发布好一个地图服务时,我们进入到 ArcGIS for Server 的管理页面,可以看到非常详细的信息,下图是我发布的一个叫做JsMap 的 2D 地图动态服务,在功能选项卡中可以看到该服务可以支持的功能以及每种功能支持的操作

    2K20

    WebGIS项目开发技术方案

    在复杂的应用中,可以考虑引入API Gateway进行请求路由和管理,以及采用微服务架构将不同的业务功能拆分成独立的、可独立部署的服务,提高系统的可维护性和可伸缩性。2....ArcGIS API for JavaScript: Esri公司提供的官方API,与ArcGIS平台紧密集成,提供丰富的GIS功能和企业级应用支持。适用于基于Esri技术栈的项目。...NoSQL数据库: 在某些场景下,如需要存储非结构化或半结构化数据,或者需要极高的读写性能时,可以考虑使用NoSQL数据库,但需要权衡其对空间查询和分析的支持程度。6....客户端空间分析: 对于简单的空间操作(如缓冲区分析、叠加分析),可以在客户端利用地图库提供的功能实现,减轻服务器负担。...跨设备兼容性: 确保在不同设备和屏幕尺寸上都能正常使用。11. 开发流程与工具采用 modern 的软件开发流程和工具可以提高开发效率和项目质量。敏捷开发: 迭代开发,快速响应需求变化。

    85900
    领券