essence-ng2-esrimap v1.1.8
essence-ng2-esrimap
essence-ng2-esrimap is a esrimap component for Angular.
Usage
Install
npm install --save essence-ng2-esrimap@latest
Set in the .angular-cli.json(@angular/cli)
"styles": [ "../node_modules/font-awesome/css/font-awesome.min.css" ]
Add the EssenceNg2EsriMapModule
import {EssenceNg2EsriMapModule} from "essence-ng2-esrimap"; @NgModule({ imports: [ EssenceNg2EsriMapModule ] })
Use in the template
<essence-ng2-esrimap [gisApiUrl]="gisApiUrl" [geoUrl]="geoUrl" [mapUrl]="mapUrl" [esriCSSUrl]="esriCSSUrl" (mapReady)="onMapReady($event)" (exentChange)="onExentChange($event)"> </essence-ng2-esrimap>
Use in the component
esriMap: EssenceNg2EsriMapComponent; mapUrl: string = 'http://192.168.0.109:8399/arcgis/rest/services/HD_BASEMAP/MapServer'; geoUrl: string = 'http://192.168.0.109:8399/arcgis/rest/services/Geometry/GeometryServer'; gisApiUrl: string = 'http://192.168.0.109/arcgis_api/3.14/init.js'; esriCSSUrl: string = 'http://192.168.0.8/arcgis_api/3.14/esri/css/esri.css'; // esri.css路径 onMapReady($event: EssenceNg2EsriMapComponent) { this.esriMap = $event; } onExentChange(event: any) { console.log(event); }
注意
如果出现跨域的问题,请检查项目根目录下是否存在proxy.config
及proxy.jsp
,没有请放置。
API
Inputs
isProxy
(boolean?=false
) - 是否开启代理proxyUrl
(string?='proxy.jsp'
) - 代理页面的路径mapUrl
(string[] | string
) - 基础底图路径,如mapType='tdt'
,则mapUrl可从这四种地图类型vec(矢量图层), cva(矢量标注), img(影像图层), cia(影像标注)
通过数组形式组合使用。mapType='esri',则mapUrl是完整的ArcGIS切片地图服务路径mapType
(string?='esri'
) - 基础底图类型,tdt
:天地图,esri
:esri地图服务geoUrl
(string?='http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer'
) - 几何服务路径,默认是在线路径,最好配置自己的路径gisApiUrl
(string?='http://js.arcgis.com/3.14/'
) - arcgis javascript API路径,默认是在线路径,最好配置自己的路径esriCSSUrl
(string?='http://js.arcgis.com/3.14/esri/css/esri.css'
) - esri.css路径,默认是在线路径,最好配置自己的路径initExtent
(Object
) - 初始地图范围,{xmax, xmin, ymax, ymin}
Outputs
mapReady
:地图初始化完成后会触发该事件,参数$event为当前component实例对象exentChange
:地图范围改变触发该事件,参数$event为当前地图范围对象
Properties
map
(any
) - 当前地图对象
Instance Methods
loadEsriModules(modules: string[]): Promise<any>
- 加载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<any>
- 要素坐标转换latToDec(dfm: string): number
- 将坐标由度分秒表示转为十进制表示decToLat(sjz: number): string
- 将坐标由十进制表示转为度分秒表示
Develop
```bash
npm install // 安装依赖包
npm start // 启动项目
```