Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/laixiangran/e-ngx-esrimap
基于Angular的二维地图组件，使用的地图API是ArcGIS API for JavaScript v3.x（>=3.14）
https://github.com/laixiangran/e-ngx-esrimap
angular arcgis-api esri
Last synced: about 1 month ago
JSON representation
基于Angular的二维地图组件，使用的地图API是ArcGIS API for JavaScript v3.x（>=3.14）
- Host: GitHub
- URL: https://github.com/laixiangran/e-ngx-esrimap
- Owner: laixiangran
- License: mit
- Created: 2017-05-07T12:37:34.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-11-15T01:39:04.000Z (about 6 years ago)
- Last Synced: 2024-08-08T16:53:14.384Z (5 months ago)
- Topics: angular, arcgis-api, esri
- Language: TypeScript
- Homepage:
- Size: 7.49 MB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# e-ngx-esrimap
基于 Angular 的二维地图组件，使用的地图 API 是 ArcGIS API for JavaScript v3.x（>=3.14）。
## Usage
1. Install
```shell
npm install --save e-ngx-esrimap@latest
```
2. Set in the .angular-cli.json（@angular/cli）
```json
"styles": [
"../node_modules/font-awesome/css/font-awesome.min.css"
]
```
**如果要使用 Echarts3Layer 扩展图层，需要引入 echarts3-ext.js 文件：**
```json
"scripts": [
"../node_modules/e-ngx-esrimap/echarts/echarts3-ext.js"
]
```
3. Add the ENgxEsriMapModule
```typescript
import {ENgxEsriMapModule} from "e-ngx-esrimap";
@NgModule({
imports: [
ENgxEsriMapModule
]
})
```
4. Use in the template
```html
谷歌地图服务
切换底图1
切换底图2
切换底图3
天地图地图服务
切换底图1
切换底图2
切换底图3
ArcGIS地图服务
切换底图1
切换底图2
```
5. Use in the component
```typescript
googleMapComponent: ENgxEsriMapComponent;
googleMap: any;
tdtMapComponent: ENgxEsriMapComponent;
tdtMap: any;
esriMapComponent: ENgxEsriMapComponent;
esriMap: any;
mapUrl: string = 'http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer';
geoUrl: string = 'http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer';
gisApiUrl: string = 'http://js.arcgis.com/3.23/';
esriCSSUrl: string = 'http://js.arcgis.com/3.23/esri/css/esri.css';
initExtent: any = {xmax: 116.39029888900006, xmin: 116.04209077900009, ymax: 40.161018230000025, ymin: 39.885287565000056};
initExtent2: any = {xmax: 12980277.986602597, xmin: 12934415.769631553, ymax: 4864627.423165954, ymin: 4841696.314680432};
/**
* 谷歌地图加载完成
* @param $event
*/
onGoogleMapReady($event: ENgxEsriMapComponent) {
this.googleMapComponent = $event;
this.googleMap = this.googleMapComponent.map;
}
/**
* 谷歌底图切换
* @param {number} $event
*/
onGoogleBaseLayerChange($event: number) {
console.log($event);
}
/**
* 天地图地图加载完成
* @param $event
*/
onTdtMapReady($event: ENgxEsriMapComponent) {
this.tdtMapComponent = $event;
this.tdtMap = this.tdtMapComponent.map;
this.tdtMapComponent.setExtent(this.initExtent);
}
/**
* 天地图底图切换
* @param {number} $event
*/
onTdtBaseLayerChange($event: number) {
console.log($event);
}
/**
* esri地图加载完成
* @param $event
*/
onEsriMapReady($event: ENgxEsriMapComponent) {
this.esriMapComponent = $event;
this.esriMap = this.esriMapComponent.map;
}
/**
* esri底图切换
* @param {number} $event
*/
onEsriBaseLayerChange($event: number) {
console.log($event);
}
```
## API
### Inputs
- `isProxy`（`boolean?=false`） - 是否开启代理，可使用 esri 提供的[几个平台的代理文件](https://github.com/Esri/resource-proxy)
- `proxyUrl`（`string?='proxy.jsp'`） - 代理页面的路径。如果出现跨域的问题，请检查是否正确设置代理路径
- `mapUrl`（`string[] | string='http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer'`） - 基础底图路径，如 `mapType='tdt'`，则 mapUrl 可从这四种地图类型 `vec（矢量图层）, cva（矢量标注）, img（影像图层）, cia（影像标注）` 通过数组形式组合使用。如 `mapType='google'`，则 mapUrl 可从这三种地图类型 `m（矢量图层）, p（地形图层）, y（影像图层）` 中选择。mapType='esri'，则 mapUrl 是完整的 ArcGIS 切片地图服务路径
- `submapUrl`（`any[]`）- 其它切换的底图路径，如 `mapType='tdt'`，则 submapUrl 可从这四种地图类型 `vec（矢量图层）, cva（矢量标注）, img（影像图层）, cia（影像标注）` 通过数组形式组合使用。如 `mapType='google'`，则 mapUrl 可从这三种地图类型 `m（矢量图层）, p（地形图层）, y（影像图层）` 中选择。mapType='esri'，则 submapUrl 是完整的 ArcGIS 切片地图服务路径的数组
- `mapType`（`string?='esri'`） - 基础底图类型，`tdt`：天地图（wkid: 4326），`google`：谷歌地图（wkid: 102113），`esri`：esri 地图服务（wkid: 看具体服务wkid）
- `geoUrl`（`string?='http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer'`） - 几何服务路径，默认是在线路径，最好配置自己的路径
- `gisApiUrl`（`string?='http://js.arcgis.com/3.23/'`） - arcgis javascript API 路径，默认是在线路径，最好配置自己的路径
- `esriCSSUrl`（`string?='http://js.arcgis.com/3.23/esri/css/esri.css'`） - esri.css 路径，默认是在线路径，最好配置自己的路径
- `initExtent`（`Object`） - 初始地图范围，`{xmax, xmin, ymax, ymin}`。默认范围自适应屏幕显示，如果不想自适应则可调用 setExtent 方法设置范围并指定是否自适应
- `enableNavigation`（`boolean?=true`） - 是否启用导航部件
### Outputs
- `mapReady`：地图初始化事件，参数 $event 为当前 component 实例对象
- `exentChange`：地图范围改变事件，参数 $event 为当前地图范围对象
- `mapDestroy`：地图销毁事件
- `baseLayerChange`：底图切换事件，参数 $event 格式为 {prev: number, curr: number}，prev 为切换之前底图序号，curr 为当前底图序号
### Properties
- `map`（`any`） - 当前地图对象
- `geometryService`（`any`) - 当前几何服务实例
**以下为默认加载的模块，作为实例属性提供使用**
```javascript
// esri
Map: any;
Color: any;
Graphic: any;
SpatialReference: any;
urlUtils: any;
esriConfig: any;
// esri/tasks
Geoprocessor: any;
GeometryService: any;
FeatureSet: any;
FindTask: any;
FindParameters: any;
IdentifyTask: any;
IdentifyParameters: any;
QueryTask: any;
Query: any;
ProjectParameters: any;
BufferParameters: any;
// esri/layers
ArcGISTiledMapServiceLayer: any;
ArcGISDynamicMapServiceLayer: any;
WebTiledLayer: any;
GraphicsLayer: any;
ImageParameters: any;
TileInfo: any;
// esri/geometry
Extent: any;
Point: any;
ScreenPoint: any;
Polyline: any;
Polygon: any;
WebMercatorUtils: any;
// esri/symbols
PictureMarkerSymbol: any;
SimpleMarkerSymbol: any;
SimpleLineSymbol: any;
CartographicLineSymbol: any;
PictureFillSymbol: any;
SimpleFillSymbol: any;
TextSymbol: any;
Font: any;
// toolbar
Draw: any;
```
**没有默认加载的模块，可通过调用 loadEsriModules 方法进行加载**
### Instance Methods
- `changeBaseLayer (layerIndex: number): void` - 底图切换，index 是所有待切换底图的序号。mapUrl 对应序号为 0，其它图层序号根据 submapUrl 的数组序号加 1 得到
- `loadEsriModules(modules: string[]): Promise` - 加载 ArcGIS API for JavaScript 的模块，如：`['esri/map']`
- `gpAsyncGetResultData(params: AsyncGetResultParam): void` - GP 服务获取数据（异步）
- `gpAsyncGetResultImageLayer(params: AsyncGetResultParam): void` - GP 服务获取结果图片图层（异步）
- `locationPoint(point: {x: number, y: number}): void` - 点定位
- `clearLocationLayer(): void` - 清除定位图层
- `showMapInfoWindow(params: any): void` - 显示地图信息窗口
* params 属性如下：
* title {String} 信息窗口标题
* content {String} 信息窗口内容，支持html
* location {Point} 信息窗口位置
* placement {String} 信息窗口方位
* width {Number} 信息窗口宽度
* height {Number} 信息窗口高度
- `hideMapInfoWindow(): void` - 隐藏地图信息窗口
- `exactProject(fs: any, wkid: any): Observable` - 要素坐标转换
- `latToDec(dfm: string): number` - 将坐标由度分秒表示转为十进制表示
- `decToLat(sjz: number): string` - 将坐标由十进制表示转为度分秒表示
- `setExtent(extent: any, fit: boolean = false): Deferred` - 设置地图范围
### 扩展图层
在下载的好的组件包中（dist/extras）中有一些扩展图层，如聚合图层（ClusterLayer.js）等等，针对特定需求可直接使用。
**使用方式：将 dist/extras 文件夹拷贝到部署好的 arcgis javascript API 中即与 init.js 同级的目录中，然后就可以导入使用扩展图层了。**
- `ClusterLayer` - 聚合图层。将一定范围内的点对象聚合在一起，使用数字表示当前位置重叠的点对象数量。具体使用请看 `example` 下的示例。
## Develop
```shell
npm install // 安装依赖包
npm start // 启动项目
```
# License
[](/LICENSE)