Vue-arcgismap-components NPM

vue-arcgismap-components

基于 Vue 3.x 和 ArcGIS Maps SDK for JavaScript 4.x (@arcgis/core)的地图组件库

安装

npm i @arcgis/core
npm i vue-arcgismap-components

快速上手

引入 vue-arcgismap-components

import VueArcgismap from "vue-arcgismap-components";
import "vue-arcgismap-components/dist/style.css";

createApp(App).use(VueArcgismap);

地图

<ArcgisMapView :basemap="basemap" @init="init" @click="click">
</ArcgisMapView>

const init = (obj) => {
  console.log("init", obj.mapView, obj.map);
};
const click = (e) => {
  console.log("e", e);
};

Attributes

名称	类型	说明	默认值
container	String	容器 dom-id	随机值
center	Array	地图中心点	120.210792, 30.246026
basemap	Array	底图图层	--

事件

事件名	说明 Type
init	该实例化后，参数为拥有 map、view 实例的对象	Function
--	拥有与 MapView 上一样的 Events https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html#events-summary	Function

ref 可用方法

函数	返回	说明
getInstance	拥有 map、view 实例的对象	获取地图、视图实例

定位 Locate

<ArcgisControlGeoLocation @init="init" @locate="locate" />

const init = (obj) => {
  console.log("init", obj);
};
const locate = (position) => {
  console.log("position", position);
};

Attributes

名称	类型	说明	默认值
container	String	容器 dom-id	''
popupEnabled	Boolean	是否显示结果图形的 popup	false
location	String	定位图标所处位置(top-right, top-left, bottom-left, bottom-right)	bottom-right

事件

事件名	说明	Type
init	该实例化后，参数为拥有 map、view 实例的对象	Function
--	拥有与 Locate 上一样的 Events https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Locate.html#events-summary	Function

ref 可用方法

函数	返回	说明
getInstance	Locate 实例	获取 Locate 实例

FeatureLayer

Attributes

名称	类型	说明	默认值
url	String	图层地址	''
visible	Boolean	图层是否可见	true

事件

事件名	说明	Type
init	该实例化后，参数为拥有 map、view 实例的对象	Function
--	拥有与 FeatureLayer 上一样的 Events https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#events-summary	Function