公司网站策划,网站建设软件用乐云践新,电子商务公司排行榜,建设银行公司官网文章目录 0.引言1.第一个ArcgisForJS应用程序1.1.安装部署ArcgisForJS1.2.实现ArcgisForJS应用程序 2.开发与调试工具2.1.集成开发环境2.2.调试工具2.3.Firebug 0.引言
ArcGIS API for JavaScript是一款由Esri公司开发的用于创建WebGIS应用的JavaScript库。它允许开发者通过调… 文章目录 0.引言1.第一个ArcgisForJS应用程序1.1.安装部署ArcgisForJS1.2.实现ArcgisForJS应用程序 2.开发与调试工具2.1.集成开发环境2.2.调试工具2.3.Firebug 0.引言
ArcGIS API for JavaScript是一款由Esri公司开发的用于创建WebGIS应用的JavaScript库。它允许开发者通过调用ArcGIS Server的REST API将地图资源和其它资源如ArcGIS Online嵌入到Web应用中。ArcGIS API for JavaScript提供了丰富的功能包括页面布局、地图图层、空间坐标转换、要素符号、专题图、属性查询、空间分析、三维场景、小部件、渲染器等。本文介绍ArcgisForJS基础编写第一个应用程序并介绍开发调试工具。
1.第一个ArcgisForJS应用程序
1.1.安装部署ArcgisForJS
官网下载 https://developers.arcgis.com/downloads/ 官网需注册登录ArcGIS Online账户。 下载api文件并解压解压目录如下 根据install.html文件进行安装配置。 新建一个网站专用文件夹。 将以下arcgis_js_api复制到上面专用文件夹。 复制结果如下
本文以本地IIS发布服务。 IIS设置参见最详细的IIS发布站点步骤 打开MIME类型页面并按照需求设置扩展。 点击目录浏览打开并应用。 应用结果如下 点击浏览访问本地发布网站。 访问结果 打开arcgis_js_api继续访问默认访问index.html可得到以下结果mimetype显示OK则配置成功。
1.2.实现ArcgisForJS应用程序
在http://localhost:8099/arcgis_js_api/javascript/4.28文件夹位于本地网站专用文件夹D:\ArcgisForJS\arcgis_js_api\javascript\4.28下新建一个HelloArcgisForJS.html并编写代码。 1实现代码
html langenhead meta charsetutf-8 / meta nameviewport contentinitial-scale1,maximum-scale1,user-scalableno / titleHelloArcgisForJS/title style html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } /style link relstylesheet href./esri/themes/light/main.css / script src./init.js/script script require([esri/Basemap, esri/layers/TileLayer, esri/Map, esri/views/SceneView], function ( Basemap, TileLayer, Map, SceneView ) { // -------------------------------------------------------------------- // If you do not have public internet access, change the layer URL to // point to your own locally accessible cached service. // -------------------------------------------------------------------- const layer new TileLayer({ url:https://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer }); const customBasemap new Basemap({ baseLayers: [layer], title: My Basemap }); const myMap new Map({ basemap: customBasemap }); const view new SceneView({ container: viewDiv, map: myMap }); }); /script
/head body div idviewDiv/div
/body /html2实现结果 访问
2.开发与调试工具
2.1.集成开发环境
使用Visual Studio本文应用2022版本。 新建web项目。 创建空模板。 添加一个html页。 复制代码。
html langenhead meta charsetutf-8 / meta nameviewport contentinitial-scale1,maximum-scale1,user-scalableno / titleHelloArcgisForJS/title style html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } /style link relstylesheet hrefhttp://localhost:8099/arcgis_js_api/javascript/4.28/esri/themes/light/main.css / script srchttp://localhost:8099/arcgis_js_api/javascript/4.28/init.js/script script require([esri/Basemap, esri/layers/TileLayer, esri/Map, esri/views/SceneView], function ( Basemap, TileLayer, Map, SceneView ) { // -------------------------------------------------------------------- // If you do not have public internet access, change the layer URL to // point to your own locally accessible cached service. // -------------------------------------------------------------------- const layer new TileLayer({ url:https://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer }); const customBasemap new Basemap({ baseLayers: [layer], title: My Basemap }); const myMap new Map({ basemap: customBasemap }); const view new SceneView({ container: viewDiv, map: myMap }); }); /script
/head body div idviewDiv/div
/body /html代码结果。 设置http://localhost:8099/对应物理地址D:\ArcgisForJS支持跨域访问编辑web.config。
httpProtocolcustomHeaders add nameAccess-Control-Allow-Origin value* / add nameAccess-Control-Allow-Headers value* / add nameAccess-Control-Allow-Methods valueGET, POST, PUT, DELETE / /customHeaders /httpProtocol运行结果如下。
2.2.调试工具
IE开发者工具或工具条。 网页F12可打开开发者工具。
2.3.Firebug
1安装Firebug 网页扩展中心搜索Firebug并进行安装。
2启用Firebug
参考资料 [1] 刘光. 《Web GIS从基础到开发实践基于ArcGIS API for JavaScript》; 2015-03-01 [accessed 2024-02-15]. [1] 一入GIS深似海. 不一样的前端JavaScript之arcgis api教程; 2020-11-02 [accessed 2024-02-15]. [2] . arcgis api for JS如何快速上手; [accessed 2024-02-15]. [3] . ArcGIS API for JavaScript (legacy) 3.45; [accessed 2024-02-15]. [4] GISer.Wang. 一ArcGIS API For Javascript开发利器; 2016-08-08 [accessed 2024-02-15]. [5] GIS之家. arcgis api for js入门开发系列一arcgis api离线部署; 2016-10-26 [accessed 2024-02-15]. [6] 佯佯Young. 【一】ArcGIS API for JavaScript之API的使用和部署; 2017-12-23 [accessed 2024-02-15]. [7] dxm809. WebForm-IIS Express 启用目录浏览; 2017-10-17 [accessed 2024-02-15]. [8] coder_路远. chrome谷歌浏览器和firefox火狐浏览器解决跨域问题; 2017-11-22 [accessed 2024-02-15].
