e-ngx-esrimap
基于 Angular 的二维地图组件,使用的地图 API 是 ArcGIS API for JavaScript v3.x(>=3.14)。
Usage
-
Install
npm install --save e-ngx-esrimap@latest -
Set in the .angular-cli.json(@angular/cli)
"styles":如果要使用 Echarts3Layer 扩展图层,需要引入 echarts3-ext.js 文件:
"scripts": -
Add the ENgxEsriMapModule
; -
Use in the template
谷歌地图服务切换底图1切换底图2切换底图3天地图地图服务切换底图1切换底图2切换底图3ArcGIS地图服务切换底图1切换底图2 -
Use in the component
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 =;initExtent2: any =;/*** 谷歌地图加载完成* @param $event*/onGoogleMapReady$event: ENgxEsriMapComponent/*** 谷歌底图切换* @param*/onGoogleBaseLayerChange$event: number/*** 天地图地图加载完成* @param $event*/onTdtMapReady$event: ENgxEsriMapComponent/*** 天地图底图切换* @param*/onTdtBaseLayerChange$event: number/*** esri地图加载完成* @param $event*/onEsriMapReady$event: ENgxEsriMapComponent/*** esri底图切换* @param*/onEsriBaseLayerChange$event: number
API
Inputs
-
isProxy
(boolean?=false
) - 是否开启代理,可使用 esri 提供的几个平台的代理文件 -
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
) - 当前几何服务实例
以下为默认加载的模块,作为实例属性提供使用
// esriMap: any;Color: any;Graphic: any;SpatialReference: any;urlUtils: any;esriConfig: any; // esri/tasksGeoprocessor: any;GeometryService: any;FeatureSet: any;FindTask: any;FindParameters: any;IdentifyTask: any;IdentifyParameters: any;QueryTask: any;Query: any;ProjectParameters: any;BufferParameters: any; // esri/layersArcGISTiledMapServiceLayer: any;ArcGISDynamicMapServiceLayer: any;WebTiledLayer: any;GraphicsLayer: any;ImageParameters: any;TileInfo: any; // esri/geometryExtent: any;Point: any;ScreenPoint: any;Polyline: any;Polygon: any;WebMercatorUtils: any; // esri/symbolsPictureMarkerSymbol: any;SimpleMarkerSymbol: any;SimpleLineSymbol: any;CartographicLineSymbol: any;PictureFillSymbol: any;SimpleFillSymbol: any;TextSymbol: any;Font: any; // toolbarDraw: any;
没有默认加载的模块,可通过调用 loadEsriModules 方法进行加载
Instance Methods
-
changeBaseLayer (layerIndex: number): void
- 底图切换,index 是所有待切换底图的序号。mapUrl 对应序号为 0,其它图层序号根据 submapUrl 的数组序号加 1 得到 -
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
- 将坐标由十进制表示转为度分秒表示 -
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 // 启动项目
```