当前位置：首页 > news >正文

arcgis开发记录

news 2026/3/27 13:17:14

文章目录

@[toc]
arcgis JavaScript API安装
1. arcgisAPI下载地址：https://developers.arcgis.com/downloads/
2. 4.4版本API：本地配置
3. 3.18版本修改方法

angular2中加载arcgis JS API
arcgis加载图层并显示图层上点的信息
使用图层上默认的参数，来显示图层上点的信息
更好的方案：使用 arcgis 地图的点击事件，来个性化弹窗
添加图层的时候可以调用方法，把所有点的信息全部得到

arcgis地图坐标系。
没毛病

arcgis JavaScript API安装

1. arcgisAPI下载地址：https://developers.arcgis.com/downloads/

打开网站后选择‘ArcGIS API for JavaScript’，如果不要最新版则点击后面的‘All versions’，选择一个自己需要的版本。
4.4版本的下载地址

2. 4.4版本API：本地配置

下载好后，把解压后的文件中 library目录拷贝到 angular2的src目录下(与index.html同级)，

打开文件library/4.4/dojo/dojo.js

baseUrl:"http://localhost:3000/library/4.4/dojo",hasCache:{"config-deferredInstrumentation":0,"config-selectorEngine":"acme",

搜索内容 https://[HOSTNAME_AND_PATH_TO_JSAPI]dojo 把这个字符串替换成 http://localhost:3000/library/4.4/dojo
保存后退出。

打开文件library/4.4/init.js

搜索内容 https://[HOSTNAME_AND_PATH_TO_JSAPI]dojo 把这个字符串替换成 http://localhost:3000/library/4.4/dojo
保存后退出。

3. 3.18版本修改方法

打开文件library/4.4/dojo/dojo.js

baseUrl:((location.protocol === 'http:' || location.protocol === 'https:') ? location.protocol : 'http:') + '//' + "localhost:3000/library/3.18/dojo",hasCache:{"config-selectorEngine":"acme",

搜索内容 [HOSTNAME_AND_PATH_TO_JSAPI] 把这个字符串替换成 localhost:3000/library/4.4/dojo
保存后退出。
***注意：***一定不要加http://

打开文件library/4.4/init.js

搜索内容 [HOSTNAME_AND_PATH_TO_JSAPI] 把这个字符串替换成 localhost:3000/library/4.4/dojo
保存后退出。
***注意：***一定不要加http://

测试API是否成功

启动服务后，在浏览器中输入网址： http://localhost:3000/library/4.4/init.js
如果有返货内容则说明部署成功。

angular2中加载arcgis JS API

angular2里面需要先安装 arcgis 的包

# 介绍： https://www.npmjs.com/package/angular2-esri-loader
npm install angular2-esri-loader esri-loader

在组件中加载 arcgis的 API，加载好后就可以在其他方法中直接使用了：

private loadEsriModules() {//来自：https://github.com/StefanNieuwenhuis/awesome-mapping-appthis.esriLoader.load({// url: 'https://js.arcgis.com/4.4/'}).then(() => {this.esriLoader.loadModules(['esri/Map','esri/layers/MapImageLayer',    //地图 图层服务'esri/views/MapView',           //2D地图'esri/views/SceneView',         //3D地图//https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#source"esri/layers/FeatureLayer",     //提取图层服务"esri/widgets/Home",            //在视图中出现一个回到原点的按钮Home"esri/widgets/BasemapGallery","esri/widgets/Expand","esri/widgets/Search",//地点搜索"esri/widgets/ScaleBar",//比例尺"esri/core/watchUtils", //鹰眼图"dojo/dom",             //鹰眼图]).then(([Map, MapImageLayer, MapView, SceneView, FeatureLayer, Home,BasemapGallery, Expand, Search, ScaleBar, watchUtils, dom]) => {this.esriMap = Map;this.esriMapImageLayer = MapImageLayer;this.esriMapView = MapView;this.esriSceneView = SceneView;this.esriFeatureLayer = FeatureLayer;this.esriHome = Home;this.esriBasemapGallery = BasemapGallery;this.esriExpand = Expand;this.esriSearch = Search;this.esriScaleBar = ScaleBar;this.esriwatchUtils = watchUtils;this.esridom = dom;this.arcGisLoadFinish = true;})})}

arcgis加载图层并显示图层上点的信息

参考链接：https://developers.arcgis.com/javascript/latest/sample-code/featurelayerview-query/index.html

使用图层上默认的参数，来显示图层上点的信息

addMapLayre() {this.view.map.removeAll();let popupTemplate = {title: 'Cities',content: "<p> 城市: {CITY_NAME}</p>" +"<p> LABEL_FLAG: {LABEL_FLAG}</p>" +"<p> OBJECTID: {OBJECTID}</p>" +"<p> POP: {POP}</p>" +"<p> POP_CLASS: {POP_CLASS}</p>" +"<p> POP_RANK: {POP_RANK}</p>"};for (let e of this.layerBtnListsSelect) {if (e.data && e.data.url) {//https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#properties-summarylet layer = new this.esriFeatureLayer({outFields: ["*"],             //把每个点的所有属性都查询出来。popupTemplate: popupTemplate, //弹窗模板url: e.data.url               //图层服务地址});this.view.map.add(layer);  // adds the layer to the map//下面注销掉的代码可以查看全部点的信息// this.view.whenLayerView(layer).then(function (lyrView) {//   lyrView.watch("updating", function (val) {//     if (!val) {  // wait for the layer view to finish updating//       lyrView.queryFeatures().then(function (results) {//         console.log(results);  // prints all the client-side graphics to the console//       });//     }//   });// });}}}

使用这个方法好处：简单，方便。
坏处： 1. 要根据不同的图层来制作不同的弹窗模板。 2. 弹窗样式固定。

更好的方案：使用 arcgis 地图的点击事件，来个性化弹窗

参考链接：https://geonet.esri.com/message/609517#comment-609517

https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View.html#on

let _view = this.view;
this.view.on("click", function (event) {_view.hitTest(event.screenPoint).then(function (response) {var graphics = response.results;graphics.forEach(function (graphic) {console.log(graphic);});});
});

在这里使用view 的 on事件，当点击地图上一个点的时候，如果这个点事图层上的点，则会出发这个事件，如果不是，则没有有反应。
一个例子： https://developers.arcgis.com/javascript/latest/sample-code/view-hittest/index.html

添加图层的时候可以调用方法，把所有点的信息全部得到

https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#querying

// returns all the graphics from the layer view
// lyr: 创建的图层 new FeatureLayer({...})
view.whenLayerView(lyr).then(function(lyrView){lyrView.watch("updating", function(val){if(!val){  // wait for the layer view to finish updatinglyrView.queryFeatures().then(function(results){console.log(results);  // prints all the client-side graphics to the console});}});
});

arcgis地图坐标系。

参考链接：

https://developers.arcgis.com/javascript/3/jsapi/screenpoint-amd.html
https://developers.arcgis.com/javascript/latest/api-reference/esri-Viewpoint.html

文章目录