tingfeng_arcgis v0.0.4

ArcGIS-vue3封装测试

下载

    npm install tingfeng_arcgis

    yarn add tingfeng_arcgis

使用

main.ts中引入

    import TingfengArcgis from "tingfeng_arcgis"

    import 'tingfeng_arcgis/css'

    app.use(TingfengArcgis);

ts类型支持

在tsconfig.json中添加

    "types": [
      "tingfeng_arcgis/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 sceneClick = (event: __esri.ViewClickEvent | undefined) => {
  console.log("3d地图点击事件", event);
};
</script>

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

<style lang="less" scoped></style>

地图组件属性

地图组件事件