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

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

ArcGIS API for JavaScript 4.18中新增加了一种基于ES Modules的新开发方式@arcgis/core,这篇文章就来介绍一下如何使用这种方式来进行开发。...,都有一个问题:我们在组件代码的某一个地方如果需要ArcGIS API for JavaScript中的某一个API模块的话,就需要通过esri-loader的loadModules方法来异步加载进来,...可以看到copy命令里面使用了ncp这个命令,所以我们要通过以下命令来全局安装一下这个工具: npm install ncp -g 3、然后在React项目的App.js或者index.js文件中通过如下命令引入...总结 随着@arcgis/core方式的出现,目前我们在Vue或者React项目中使用ArcGIS API for JavaScript的开发方式由以前的一种变为了目前的两种方式:esri-loader...但是在@arcgis/core的方式中目前还没找到如何使用特定版本API的方式,因为目前通过npm install @arcgis/core安装的话,里面包含的API默认就是最新版4.18,在这里仅仅是猜测

1.9K20

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

如何在Vue或React框架中配置ArcGIS API for JavaScript; ArcGIS API for JavaScript中每个API模块的知识点都了解,但是具体的功能开发却不知道如何组织...有了cdmap-cli,你可以在短短五分钟之内完成项目创建、插件安装和项目启动的全套流程,为你省下了将近一天的工时。...在安装了nodeJS之后,我们只需要在命令行通过下面命令安装cdmap-cli即可: npm i cdmap-cli -g 安装完cdmap-cli之后即可进行项目创建工作,通过如下命令即可创建项目:...同时项目代码模板中提供了ArcGIS API for JavaScript的运用示例,我们参考其用法开发自己需要的功能即可,大大减少了开发成本和学习成本。...错误处理 1、由于cdmap-cli中配置的ArcGIS API for JavaScript是最新版(4.18版本),所以代码中使用了ncp工具,所以使用之前需要先进行ncp工具的安装,命令如下: npm

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

    ArcGIS API for JavaScript 中的 Autocasting

    ArcGIS API for JavaScript 中的 Autocasting Autocasting 简介 Autocasting 是 ArcGIS API for JavaScript 4.x 的一个新特性..., 将 json 对象转换成对应的 ArcGIS API for JavaScript 类型实例, 而不需要导入对应的 js 模块。...ArcGIS API for JavaScript 中的对应类的文档, 如果一个一个属性能够进行自动转换, 就会出现 Autocast 标记。...当模块类型是已知的,或者是固定的, 则不需要指定 type 属性, 比如在下面代码中的 SimpleMarkerSymbol 的 outline 属性, 这个属性是固定的, 只能是 SimpleLineSymbol...不过从 4.18 开始, ArcGIS API for JavaScript 提供了原生 ES6 模块 @arcgis/core , 可以直接在受支持的浏览器中运行, 不用在依赖第三方加载器, 也可以很轻松的在各种前端框架中使用

    1.3K20

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

    本文主要针对于在Vue和React项目中使用esri-loader和@arcgis/cli脚手架进行ArcGIS JS API开发时,比较两种方式的不同,供各位参考。...选择纠结症”,我到底该用哪种方式来进行ArcGIS JS API的开发呢?...不要着急,我给你一个可供选择的参考,简单又实用: 如果项目已经在进行实施,中途可能需要用到ArcGIS JS API中的相关功能模块,那就选择esri-loader方式; 如果项目并未开始实施,...相关测评内容 实际项目实施方面 根据文章开始所说,如果项目已经在实施,我们只能通过esri-loader方式来进行JS API的开发,因为此时JS API算是后期才引入到项目中的,我们的项目可能并不是一个整体的...编码方式 esri-loader编码方式如前面所说,你可能在用ES6或者ES5在进行系统开发,然后我们JS API中的各个功能模块还是用基于Dojo的AMD方式来加载,并且实现全局引入加载很困难,代码如下

    1.7K30

    中秋节最后一天,手撸一个自己的前端脚手架

    这个版本号应该使用的是当前cli项目的版本号,我们需要动态获取,并且为了方便我们将常量全部放到util下的constants文件夹中 const { name, version } = require(...create project,可以打印出 project 4.1 拉取项目 我们需要获取仓库中的所有模板信息,我的模板全部放在了git上,这里就以git为例,我通过axios去获取相关的信息~~~ npm...inquirer实现的,可以实现不同的询问方式 4.3 获取版本信息 和获取模板一样,我们可以故技重施 const fetchTagList = async (repo) => { const {...'HOME' : 'USERPROFILE']}/.template`; 这里我们将文件下载到当前用户下的.template文件中,由于系统的不同目录获取方式不一样,process.platform 在...这里我在项目模板中增加了ask.js module.exports = [ { type: 'confirm', name: 'private', message

    24310

    ArcGIS API for JavaScript应用开发

    开发调试过程中,最好进行本地化部署。ArcGIS JavaScript API可以从Esri官网获取,需要先注册一个Esri全球账户。...SDK本地化部署指在本地Web Server上的部署,在API文件夹arcgis_js_api\library\3.18\install_win.html中有官方的部署文档,基本过程如下: 复制 \arcgis_js_api...\library 所有文件夹到你的Web server上,例如:复制到默认网站C:\Inetpub\wwwroot\arcgis_js_api\library下, 本地化配置,打开C:\Inetpub\...在交互输入中,esri/toolbars/draw提供有关绘制动作处理函数, esri/toolbars/Edit 提供目标图形编辑处理函数,这两个包提供的事件和编辑能力是极为重要的,要重点掌握。...上述过程,已经基本能够完成绝大多数图形编辑的工作,如果在编辑完成后还需要进一步做工作,则需要通过监视Layer的事件进行相关的进一步处置,如保存数据等。 ? ? ?

    3.2K30

    【番外】 React中使用ArcGIS JS API 4.14开发

    用这些传统的技术框架结合JS API去开发的时候,我们引入JS API是在系统的HTML页面中通过和标签来引入,通常的做法是在主页index.html中引入,代码如下所示:...://localhost/4.14/init.js"> 目前,随着前端技术的不断发展,React和Vue等前端开发技术已经成为了一名前端开发者的标配,作为GISer的我们也毫无例外,在开发许许多多的...ArcGIS JS API和React结合开发 以上过程已经完成了环境安装部署和项目初始化工作,接下来就要进行JS API的开发介绍了。...3.1、在React项目中使用JS API时已经不像传统的开发方式那样在index.html中引入JS和CSS文件来使用JS API,而是通过一个叫“esri-loader”的中间件,将我们的JS API...本篇文章适合有一定React基础和JS API开发基础的人员查看学习,在本文中我们使用的JS API是官网的JS API,大家也可以将API地址换成本地的,只需要修改options这个对象的属性值即可,

    2K20

    【番外】 Vue中使用ArcGIS JS API 4.14开发

    概述 在之前很长的一段时间中,使用ArcGIS JS API(以下简称“JS API”)开发WebGIS系统的时候,还是基于传统的前端框架和各种前端技术来开发,这些框架和技术各位使用过的大概有这些:Dojo...用这些传统的技术框架结合JS API去开发的时候,我们引入JS API是在系统的HTML页面中通过和标签来引入,通常的做法是在主页(index.html)中引入,代码如下所示...ArcGIS JS API和Vue结合开发 以上过程已经完成了环境安装部署和项目初始化工作,接下来就要进行JS API的开发介绍了。...3.1、在Vue项目中使用JS API时已经不像传统的开发方式那样在index.html中引入JS和CSS文件来使用JS API,而是通过一个叫“esri-loader”的中间件,将我们的JS API和...本篇文章适合有一定Vue基础和JS API开发基础的人员查看学习,在本文中我们使用的JS API是本地部署的JS API,大家也可以将API地址换成官网的,只需要修改option这个对象的属性值即可,类似于下面

    3.6K40

    构建超级账本Fabric v0.6 测试和运行环境

    当前还处于技术野蛮发展的过程,但是我们需要有这个 趋势性的认识,为了能在更多的领域运用区块链技术,在标准形成之前,技术框架和平台显得很重要,这也是标准形成的基础。...图 中每一个最外层的方框都是一个进程(docker container),蓝色的为Hyperledger Fabric组件,包括独立运行的4个验证节点和1个成员服务节点,以及以API方式提供的Node.js...由于我已经在另外一台机器(ubu-blockchain1)上下载了这个image,可以通过image复制的方式导入到这台机器上 在ubu-blockchain1上执行 $ docker save -o...为了区分上述过程,我对app.js进行了扩展,扩展成了3个文件,app-deploy.js负责通过admin代理的JohnDoe用户进行chaincode的发布。...],即100 上面为部署后各个container打出的日志,由于peer启动时设置为开发模式,chaincode运行时是在starter上执行的,没有针对chaincode专门构建和在单独的docker

    38010

    ArcGIS Pro3.0已发布,快来看功能

    “大家好,我是南南,这是南南2022暑假的第三篇推文 ArcGIS Pro 3.0新功能 大家好,我是南南,esri于前段时间发布了全新一代 ArcGIS Pro 3.0,将采用全新的界面....有关更多新功能和更新的许可信息,请参阅数据管理和工作流部分中的ArcGIS Knowledge。 导出预设 您可以在ArcGIS Pro中为地图和布局创建导出预设。...最后,我们努力为第三方开发人员提供最好的公共 API,我们需要不时清理房屋以删除我们在 ArcGIS Pro SDK 中用更好的东西替换的类和函数。主要版本提供了进行这些必要的 API 更改的机会。...如果将工程共享,考虑使用另存为保存特定于 ArcGIS Pro 2.x的 工程副本。仍可以打开 1.x 工程。 在 2.x 和 3.0 中,工程文件内的内容结构未发生变化。 沿用了用户配置设置。...对于 2.x,移动样式将为只读,在升级至 3.0 后可编辑。 布局 从 ArcGIS Pro 3.0 开始,布局中的图片将以不同的方式存储。在早期版本中,需要工程包才能看见图片。

    2.8K20

    ArcGIS API for JavaScript开发入门必读

    ArcGIS API for JavaScript开发必读的一篇入门文档,文章中对ArcGIS API for JavaScript做了简单的介绍,包括学习路线、版本选择、使用流程和一些学习资源等内容,...作为一名GISer,在我们的工作和学习中,其实使用和接触到的软件更多的是ArcGIS Desktop、ArcGIS for Server、ArcGIS Pro这三个软件,这三个软件其实仅仅是ArcGIS...如果大家有需要,我后期会抽时间整理一门ArcGIS JS API的项目实践课程,大家可以跟着视频课程动手学习。...require函数加载所需要的API模块 4.2、在require函数的回调函数中做参数映射 4.3、在require函数的回调函数体中实例化各个API模块 5、将html文件移动到本地服务器目录...Q:这个也没有,大家需要自己本地部署一套,详细操作文档请看博主的其他文章。 A:我在ArcGIS Server上发布了一些数据服务,应该用哪些API去实例化服务图层呢?

    6.6K51

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

    JavaScript 模块化标准, 现在依然可以在浏览器中使用; ArcGIS JS API 提供 AMD 模块严重依赖 dojo 的加载器, 无法在 ES6 的环境中直接使用; dojo 的入侵性比较强...如果还没有安装 nodejs 环境, 也可以在页面中通过在通过 upkg.com 来引入这个脚本, 示例代码如下: esri-loader...加载 ArcGIS JS API 中提供的模块 要使用 ArcGIS JS API 中提供的模块, 根据 ArcGIS JS API 提供的文档, 需要使用 dojo 提供的 require 函数, 示例代码如下...根据 ArcGIS JS API 的发行说明中的描述, 大约有 96% 的代码直接使用 TypeScript 进行开发, 提供了完整的 TypeScript 类型定义 @types/arcgis-js-api...为了简化配置, 可以直接用 git 克隆我配置好的模板项目 esri-ts-demo , 如果没有安装 git 也可以直接下载 esri-ts-demo.zip 。

    2.8K10

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

    问题描述 在使用ArcGIS API for JavaScript 4.17开发项目时,有一个需求是需要在地图上添加距离测量和面积测量的控件,这其实很简单,直接调用ArcGIS JS API自带的测量控件就可以实现...,但是客户对控件自带的黄白相间、并且略粗的默认样式不满意,所以需要修改ArcGIS JS API自带的测量控件默认样式。...我们先来看看ArcGIS JS API自带的默认样式: 然后再来看看客户想要的样式: 其实说白了就是要更改默认样式的宽度和颜色。...下面分别介绍在二维和三维下的修改方法,demo代码就是对大佬的代码做了一下简单修改过后的。...(关键代码) 三维下如果按照二维的方式修改的话会报错,具体原因是三维下绘制句柄中并没有palette属性导致的,所以三维下测量控件的样式更改暂未找到方法,最后跟用户沟通,取消了三维中的测量功能,但是回到公司后验证发现

    2.3K30

    实例化二维地图

    主要介绍如何用ArcGIS JS API 4.14去实例化一张二维地图,并简单介绍了和3.X版本实现方式的异同。...本篇文章对JS API的引用不做强制性的要求,无论我们引入在线API或者离线部署的API都可以,但是为了在前端页面查看我们的地图时有一个良好的体验,此处推荐引用离线部署的JS API,因为在线的JS API...4.2、JS API 4.14实例化一张二维地图需要引入两个模块:Map和MapView。...熟悉JS API 3.X开发的朋友们大概可以发现,二维地图用JS API 3.X也可以实例化,只不过在实例化时没有这么麻烦,只需要实例化一个地图即可,初始化地图中心和缩放级别,并将其跟div绑定这些事全部在初始化地图时是...所以说,这就是3.X和4.X在实现方式上的不同,后续的文章中我们逐一介绍。 附: 全文代码: <!

    1.4K20

    ArcGIS JS API 4.14实现地图加载图片

    Symbol; 通过类似于ArcGIS JS API 3.X中的MapImage模块来实现; 通过扩展MapImageLayer来实现; 通过JS API官网上的BaseDynamicLayer这个类来实现...的形式实现 这种方式是我在网上找到的第一种实现方式,也是最简单的一种,它的原理其实就是将图片作为一个Symbol符号,因为ArcGIS JS API的符号类已经支持图片符号了,所以将图片作为一个符号,然后添加到实例化...通过类似于ArcGIS JS API 3.X中的MapImage模块来实现 在ArcGIS JS API 3.X和ArcGIS JS API 4.X中都有MapImage模块,在3.X版本中可以通过这个模块来实例化一个图片信息类...通过JS API官网上的BaseDynamicLayer类来实现 在不懈的努力寻找下,终于找到了BaseDynamicLayer这个类,这个类允许我们自定义扩展图层,所以我们就可以通过这个类简单的扩展一下图片叠加的图层...: 通过这种方法得到的效果是我们所需要的,操作实现简单,并且最终叠加到地图上的图片也会随着地图缩放进行大小调整,所以本文最后采用这种方式来实现。

    5.4K30

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

    ArcGIS JavaScript API: ArcGIS JavaScript API是用来嵌入GIS地图和任务到GIS Maps中的一种轻量的方式,它是免费使用和部署的,它需要的就是ArcGIS Server...它使用容易,不需要了解类似于象ArcGIS Server这样的GIS专业开发软件,只需要了解javascript,便可以在非GIS的web应用中嵌入和使用地图。...搜索地址并显示结果 (大致的中文意思如上,就是讲的ADF JS API和ARCGIS JS API的区别,下面还有一些重要的地方,我来译下吧,和大家一起分享下) Common Visual Studio...ArcGIS JavaScript API: ArcGIS JavaScript API是用来嵌入GIS地图和任务到GIS Maps中的一种轻量的方式,它是免费使用和部署的,它需要的就是ArcGIS Server...·搜索地址并显示结果 (大致的中文意思如上,就是讲的ADF JS API和ARCGIS JS API的区别,下面还有一些重要的地方,我来译下吧,和大家一起分享下) 下面还有一句,陈述编写客户端JS脚本时的一个让人沮丧的事实

    1.5K20

    Docker真的被Kubernetes放弃了吗?

    它可以在单机上运行,也可以结合 Docker Swarm 在多机上协同工作。Kubernetes 则更加复杂,提供更多的功能和更高的灵活性,它是为在集群上大规模运行和管理容器化应用设计的。...功能和特性: Docker 直接处理容器的创建和运行,而 Kubernetes 提供了更复杂的调度器和集群管理工具。...复制到容器中 COPY package*.json ./ # 安装应用依赖 RUN npm install # 将应用的源代码复制到容器中 COPY . . # 应用运行时监听的端口 EXPOSE 8080...# 定义容器启动时运行的命令 CMD ["node", "server.js"]   在这个 Dockerfile 中,我们基于 Node.js 的官方镜像创建一个新的镜像,安装了应用的依赖,并设置容器启动时执行的命令...它将部署两个副本的容器,每个容器都运行 your-dockerhub-username/nodejs-app:latest 镜像(这里你需要替换成你自己的 Docker Hub 用户名和镜像名)。

    2.5K10

    在客户端创建要素图层 (FeatureLayer)

    在客户端创建要素图层 (FeatureLayer) 在 ArcGIS JS API 的开发中, FeatureLayer 可以说是让人又爱又恨, 特别是 ArcGIS JS API 4.x , FeatureLayer...从服务端加载数据的策略不可控制, 或者说默认的数据加载策略不适合所有的场景, 某些场景下, 需要从先加载数据, 然后在客户端创建 FeatureLayer 。.../QueryTask 和 esri/layers/FeatureLayer , 代码如下: import { loadModules } from 'esri-loader'; // 使用 esri-loader...fields 和 source 两个属性的值比较繁琐, 不过这两个属性是可以通过后台服务根据数据库表结构和数据表内容来返回, 而不必在前端进行硬编码。...情况下, 客户端以及服务端会增加一些额外的工作量;

    2K30

    Fabric 1.0测试和运行环境构建及弹珠交易市场应用(一)

    另外,为了演示fabric1.0的架构特定,在运行环境 上,作者还部署了一个弹球交易市场Marbles应用,读者可以基于这个应用更加深入的理解Fabric1.0架构的原理思想。...,区块链网络使用了两种客户端访问方式, 一种是基于fabric-ca-client和fabric-client的node.js方式,另一种是基于peer命令行cli方式。...这是一个由弹珠 交易市场构成的联盟链,示例中有两个交易市场“United Marbles” 和 “eMarbles”,每个弹珠交易市场都可以进行用户注册,弹珠注册(资产登记)和弹珠转移(资产转移),弹珠除了可以在本交易市场内进行转移...二、测试环境构建和应用测试 本次实践我们部署的docker都是运行在一个Ubuntu Linux上,这个Ubuntu Linux是我通过vmware虚拟出来的一个虚机,虚机网络都采用NAT方式,共享host...为了便于读者快速进行环境构建和应用测试,本人已经将fabric 1.0的测试和运行环境需要的相关资源上传至github,https://github.com/blockchain101/fabric-docker

    25100
    领券