arcgis-vue3 v0.0.8

ArcGIS-vue3封装测试

下载

    npm install arcgis-vue3

    yarn add arcgis-vue3

使用

main.ts中引入

    import TingfengArcgis from "arcgis-vue3"

    import 'arcgis-vue3/css'

    app.use(TingfengArcgis);

ts类型支持

在tsconfig.json中添加

    "types": [
      "arcgis-vue3/src/packages/components.d.ts"
    ],

基础组件使用

创建第一个地图

<script setup lang="ts">
import __esri from "@arcgis/core/intl"; // 引入ArcGis的TS所有类型合集

const mapLoaded = (map: __esri.SceneView | __esri.MapView) => {
  console.log("地图加载完毕", map);
};

const mapClick = (event: __esri.ViewClickEvent | undefined) => {
  console.log("2d地图点击事件", event);
};

const mapMouseMove = (event: __esri.ViewPointerMoveEvent | undefined) => {
  console.log("2d地图鼠标移动事件", event);
};

const sceneClick = (event: __esri.ViewClickEvent | undefined) => {
  console.log("3d地图点击事件", event);
};

const sceneMouseMove = (event: __esri.ViewPointerMoveEvent | undefined) => {
  console.log("3d地图鼠标移动事件", event);
};
</script>

<template>
  <T-ArcGis
    :map-type="'MapView'"
    :map-options="{
    zoom: 3,
    constraints: {
      minZoom: 3,
      maxZoom: 18,
    },
  } as __esri.MapProperties
    "
    @onMapLoaded="mapLoaded"
    @onMapClick="mapClick"
    @onMapMouseMove="mapMouseMove"
  />
  <T-ArcGis
    :map-type="'SceneView'"
    :quality-profile="'low'"
    @onMapLoaded="mapLoaded"
    @onSceneMapClick="sceneClick"
    @onSceneMapMouseMove="sceneMouseMove"
  />
</template>

地图组件属性

地图组件事件