e-vue-esrimap
v1.1.0
Published
基于 vue-cli3 + TypeScript 的二维地图组件,使用的地图 API 是 ArcGIS API for JavaScript v3.x(>=3.14)。
Downloads
17
Maintainers
Readme
e-vue-esrimap
基于 vue-cli3+TypeScript 的二维地图组件,使用的地图 API 是 ArcGIS API for JavaScript v3.x(>=3.14)。
学习借鉴:https://github.com/laixiangran/e-ngx-esrimap
Usage
Install
npm install --save e-vue-esrimap@latest
main.js
import EVueEsrimap from 'e-vue-esrimap' import 'font-awesome/css/font-awesome.css'; Vue.use(EVueEsrimap); ``
template
<div id="app"> <h2>谷歌地图服务</h2> <e-vue-esrimap :mapType="'google'" :mapUrl="'m'" :submapUrl="['y', 'p']" :geoUrl="geoUrl" :initExtent="initExtent2" :gisApiUrl="gisApiUrl" v-on:baseLayerChange="onGoogleBaseLayerChange($event)" v-on:mapReady="onGoogleMapReady($event)"> </e-vue-esrimap> <h2>天地图地图服务</h2> <e-vue-esrimap :mapType="'tdt'" :mapUrl="['vec','cva']" :submapUrl="[['img','cia'], ['ter','cta']]" :geoUrl="geoUrl" :initExtent="initExtent" :gisApiUrl="gisApiUrl" v-on:baseLayerChange="onTdtBaseLayerChange($event)" v-on:mapReady="onTdtMapReady($event)"> </e-vue-esrimap> <h2>ArcGIS地图服务</h2> <e-vue-esrimap :isProxy="false" :mapUrl="mapUrl" :submapUrl="['http://server.arcgisonline.com/arcgis/rest/services/ESRI_Imagery_World_2D/MapServer']" :geoUrl="geoUrl" :initExtent="initExtent" :gisApiUrl="gisApiUrl" :esriCSSUrl="esriCSSUrl" v-on:baseLayerChange="onEsriBaseLayerChange($event)" v-on:mapReady="onEsriMapReady($event)"> </e-vue-esrimap> </div>
ts
public googleMapComponent: any; public googleMap: any; public tdtMapComponent: any; public tdtMap: any; public esriMapComponent: any; public esriMap: any; public mapUrl: string = 'http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer'; public geoUrl: string = 'http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer'; public gisApiUrl: string = 'http://js.arcgis.com/3.23/'; public esriCSSUrl: string = 'http://js.arcgis.com/3.23/esri/css/esri.css'; public initExtent: any = {xmax: 116.39029888900006, xmin: 116.04209077900009, ymax: 40.161018230000025, ymin: 39.885287565000056}; public initExtent2: any = {xmax: 12980277.986602597, xmin: 12934415.769631553, ymax: 4864627.423165954, ymin: 4841696.314680432}; /** * 谷歌地图加载完成 * @param $event */ public onGoogleMapReady($event: any) { this.googleMapComponent = $event; this.googleMap = this.googleMapComponent.map; } /** * 谷歌底图切换 * @param {number} $event */ public onGoogleBaseLayerChange($event: number) { console.log($event); } /** * 天地图地图加载完成 * @param $event */ public onTdtMapReady($event: any) { this.tdtMapComponent = $event; this.tdtMap = this.tdtMapComponent.map; this.tdtMapComponent.setExtent(this.initExtent); } /** * 天地图底图切换 * @param {number} $event */ public onTdtBaseLayerChange($event: number) { console.log($event); } /** * esri地图加载完成 * @param $event */ public onEsriMapReady($event: any) { this.esriMapComponent = $event; this.esriMap = this.esriMapComponent.map; } /** * esri底图切换 * @param {number} $event */ public onEsriBaseLayerChange($event: number) { console.log($event); } }
API
Prop
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 方法设置范围并指定是否自适应
// 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;
Develop
```shell
npm install // 安装依赖包
npm start // 启动项目
```