dt-fcsmap

库打包使用 npm install --legacy-peer-deps

npm账号 wiliemus1 qq362507050@126.com

npm

基于 ArcGIS API for JavaScript 和 Vue 3 的地图组件库，主要用于实现从 ArcGIS 地图到 FcsMap 的无缝跳转。

主要功能

• ArcGIS 到 FcsMap 的无缝跳转：支持在 ArcGIS 地图和 FcsMap 之间进行切换，保持地图状态和要素的连续性
• 支持要素数据的跨地图同步
• 保持视图状态（中心点、缩放级别等）的一致性

安装

npm install dt-fcsmap-fed
# 或
yarn add dt-fcsmap-fed

依赖要求

本库需要以下 peer dependencies:

{
  "@arcgis/core": "4.32.8",
  "@element-plus/icons-vue": "^2.3.1",
  "element-plus": "^2.7.6",
  "vue": "^3.0.0",
  "axios": "^1.7.4",
  "echarts": "^5.5.1"
}

样式引入

在你的入口文件（如 main.ts 或 main.js）中引入必要的样式文件：

// Element Plus 样式
import 'element-plus/dist/index.css'
// dt-fcsmap-fed 组件样式
import 'dt-fcsmap-fed/dist/style.css'

使用示例

<template>
  <div class="map-container">
    <!-- ArcGIS 地图视图 -->
    <div v-if="showMap">
      <div id="viewDiv"></div>
      <div class="control-panel">
        <el-button @click="gotoFcsMap">跳转到FcsMap</el-button>
      </div>
    </div>
    
    <!-- FcsMap 组件 -->
    <div v-else class="fcsmap-container">
      <MapComponent ref="fcsMapComponent" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Map from "@arcgis/core/Map"
import MapView from "@arcgis/core/views/MapView"
import { MapComponent } from 'dt-fcsmap-fed'

const showMap = ref(true)
const fcsMapComponent = ref(null)
let map = null
let view = null

// 初始化 ArcGIS 地图
onMounted(() => {
  initMap()
})

// 初始化地图
const initMap = () => {
  map = new Map({
    basemap: "topo-vector"
  })

  view = new MapView({
    container: "viewDiv",
    map: map,
    center: [116.3, 39.9], // 北京
    zoom: 4
  })
}

// 跳转到 FcsMap
const gotoFcsMap = () => {
  // 保存当前地图状态到全局对象
  window.mapInfoForThird = {
    mapView: view,
    map: map
  }
  
  // 切换显示状态
  showMap.value = false
}
</script>

<style>
.map-container {
  width: 100%;
  height: 100vh;
}

#viewDiv {
  width: 100%;
  height: 100%;
}

.fcsmap-container {
  width: 100%;
  height: 100vh;
}

.control-panel {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 100;
}
</style>

## 关键步骤说明

1. **初始化设置**
   - 使用 `showMap` ref 控制显示哪个地图组件
   - 在组件挂载时初始化 ArcGIS 地图

2. **跳转实现**
   - 通过 `gotoFcsMap` 函数处理跳转逻辑
   - 将当前 ArcGIS 地图状态保存到 `window.mapInfoForThird` 对象中
   - 切换 `showMap` 状态以显示 FcsMap 组件

3. **数据同步**
   - FcsMap 组件会自动读取 `window.mapInfoForThird` 中的地图信息
   - 保持地图视图状态（中心点、缩放级别等）的一致性
   - 同步显示原 ArcGIS 地图中的要素

## 注意事项

- 确保在跳转前正确保存地图状态
- `window.mapInfoForThird` 对象结构必须包含 `mapView` 和 `map` 属性
- FcsMap 组件会自动处理地图状态的同步

## 示例项目

完整的示例项目请参考 map-demo 目录。

## 许可证

MIT