@dindo-group/cloud-map 1.0.0

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@dindo-group/cloud-map",
+  "version": "1.0.0",
+  "description": "基于天地图的地图选择组件，支持地点搜索、位置标注、逆地理编码等功能",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "rollup -c && npm run copy:images",
+    "copy:images": "mkdir -p dist/images && cp -r src/leaflet/images/* dist/images/",
+    "dev": "rollup -c -w",
+    "prepublishOnly": "npm run build",
+    "publish:npm": "npm publish --registry=https://registry.npmjs.org"
+  },
+  "keywords": [
+    "map",
+    "tianditu",
+    "leaflet",
+    "vue",
+    "location",
+    "geocoding"
+  ],
+  "author": "",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "vue": "^2.6.0 || ^3.0.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "rollup": "^3.29.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-vue2": "^0.8.1",
+    "sass": "^1.69.0",
+    "vue": "^2.6.14",
+    "vue-template-compiler": "^2.7.14"
+  }
+}

package/src/TiandituMap.vue

@@ -0,0 +1,560 @@
+<template>
+  <div v-if="visible" class="tianditu-map-container">
+    <!-- 搜索框 -->
+    <div v-if="showSearch && !readonly" class="search-box">
+      <el-autocomplete v-model="searchKeyword" :fetch-suggestions="handleSearch" :loading="searchLoading"
+        :trigger-on-focus="false" clearable placeholder="请输入地点名称进行搜索或输入详细地址" style="width: 100%" value-key="label"
+        @select="handleSelectSearchResult" @input="handleSearchInput">
+        <template slot-scope="{ item }">
+          <div class="search-option">
+            <div class="option-name">{{ item.name }}</div>
+            <div class="option-address">{{ item.address || '' }}</div>
+          </div>
+        </template>
+      </el-autocomplete>
+    </div>
+    <div v-if="!showSearch" class="search-box">
+      <el-input disabled v-model="addressValue" placeholder="详细地址"></el-input>
+    </div>
+    <div :id="mapId" class="map-container" :style="{ height: height }"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TiandituMap',
+  props: {
+    // 是否显示组件
+    visible: {
+      type: Boolean,
+      default: true,
+    },
+    // 初始经纬度 [lng, lat]
+    initialPosition: {
+      type: Array,
+      default: () => [116.37304, 39.92594], // 默认北京坐标
+    },
+    // 是否显示搜索框
+    showSearch: {
+      type: Boolean,
+      default: true,
+    },
+    // 是否只读模式（纯标注展示，去除手动标注和搜索）
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否禁用（禁用时不能点击标注）
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    // 地图高度
+    height: {
+      type: String,
+      default: '400px',
+    },
+    // 天地图密钥
+    tk: {
+      type: String,
+      default: '37058149a9a118dab5ccbffe7b0ec7dd',
+    },
+    // 地址输入框的值（用于双向绑定）
+    addressValue: {
+      type: String,
+      default: '',
+    },
+    // 是否初始化时进行逆地理编码和标记
+    initGeocode: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      mapId: `tianditu-map-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+      selectedLocation: null,
+      selectedAddress: '',
+      searchKeyword: '',
+      searchOptions: [],
+      searchLoading: false,
+      map: null,
+      marker: null,
+      tiandituLayer: null,
+      tiandituLabelLayer: null,
+      tiandituGroup: null,
+    };
+  },
+  watch: {
+    visible(newVal) {
+      if (newVal) {
+        this.$nextTick(() => {
+          setTimeout(() => {
+            this.initMap();
+          }, 300);
+        });
+      } else {
+        this.cleanupMap();
+      }
+    },
+    initialPosition: {
+      handler(newVal) {
+        if (newVal && newVal.length === 2 && this.map) {
+          const [lng, lat] = newVal;
+          // 只有当经纬度有效时，才更新标记
+          if (lng && lat && !isNaN(lng) && !isNaN(lat) && lng !== 0 && lat !== 0) {
+            if (this.initGeocode) {
+              this.selectedLocation = { lng, lat };
+              this.marker = L.marker([lat, lng]).addTo(this.map);
+              this.getAddress(lng, lat);
+            } else {
+              this.selectedLocation = { lng, lat };
+              this.marker = L.marker([lat, lng]).addTo(this.map);
+            }
+          }
+        }
+      },
+      deep: true,
+    },
+    addressValue: {
+      handler(newVal) {
+        // 只有当有有效地址值时才同步到搜索框
+        // 新增时 addressValue 为空字符串，不应该填充
+        if (newVal && newVal.trim() && newVal !== this.searchKeyword) {
+          this.searchKeyword = newVal;
+        } else if (!newVal && this.searchKeyword) {
+          // 如果 addressValue 被清空，也清空搜索框（仅在编辑模式下）
+          // 新增模式下，不自动清空用户输入
+          if (this.readonly || this.disabled) {
+            this.searchKeyword = '';
+          }
+        }
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+    if (this.visible) {
+      this.$nextTick(() => {
+        this.initMap();
+      });
+    }
+  },
+  beforeDestroy() {
+    this.cleanupMap();
+  },
+  methods: {
+    // 完全清理地图资源
+    cleanupMap() {
+      if (this.map) {
+        // 先移除标记
+        if (this.marker) {
+          this.map.removeLayer(this.marker);
+          this.marker = null;
+        }
+
+        // 移除所有事件监听器
+        this.map.off();
+
+        // 移除所有图层
+        this.map.eachLayer((layer) => {
+          this.map.removeLayer(layer);
+        });
+
+        // 移除地图实例
+        this.map.remove();
+        this.map = null;
+      }
+
+      // 清理图层引用
+      this.tiandituLayer = null;
+      this.tiandituLabelLayer = null;
+      this.tiandituGroup = null;
+
+      // 清理地图容器元素
+      const mapElement = document.getElementById(this.mapId);
+      if (mapElement) {
+        // 移除 Leaflet 的内部 ID
+        if (mapElement._leaflet_id) {
+          delete mapElement._leaflet_id;
+        }
+        // 移除 Leaflet 相关的类，只保留基础类名
+        mapElement.className = 'map-container';
+        // 清空内容
+        mapElement.innerHTML = '';
+      }
+    },
+
+    // 初始化地图
+    initMap() {
+      // 先清理旧地图（如果有）
+      this.cleanupMap();
+
+      const mapElement = document.getElementById(this.mapId);
+      if (!mapElement) {
+        console.error('地图容器元素未找到');
+        return;
+      }
+
+      // 检查 Leaflet 是否已加载
+      if (typeof L === 'undefined') {
+        console.error('Leaflet 未加载，请确保已引入 Leaflet');
+        return;
+      }
+
+      // 初始化地图，使用传入的初始位置或默认位置（GCJ-02坐标系）
+      const [lng, lat] = this.initialPosition;
+      this.map = L.map(this.mapId).setView([lat, lng], 13);
+
+      // 天地图底图（中国官方地图服务）
+      this.tiandituLayer = L.tileLayer(
+        `https://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=${this.tk}`,
+        {
+          subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+          attribution: '© 天地图',
+          maxZoom: 18,
+        }
+      );
+
+      // 天地图标注图层（包含建筑物名称、POI等）
+      this.tiandituLabelLayer = L.tileLayer(
+        `https://t{s}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=${this.tk}`,
+        {
+          subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+          attribution: '© 天地图',
+          maxZoom: 18,
+        }
+      );
+
+      // 创建天地图图层组（底图+标注）
+      this.tiandituGroup = L.layerGroup([this.tiandituLayer, this.tiandituLabelLayer]);
+
+      // 默认加载天地图
+      this.tiandituGroup.addTo(this.map);
+
+      // 添加比例尺控件
+      L.control.scale().addTo(this.map);
+
+      // 如果有初始位置且有效，添加标记
+      // 通过 addressValue 判断是否是新增状态
+      // 只有当有 addressValue 且不为空（编辑模式）时，才添加标记和获取地址
+      if (this.initialPosition && this.initialPosition.length === 2) {
+        const [initialLng, initialLat] = this.initialPosition;
+        if (initialLng && initialLat && !isNaN(initialLng) && !isNaN(initialLat) && initialLng !== 0 && initialLat !== 0) {
+          this.selectedLocation = { lng: initialLng, lat: initialLat };
+          this.marker = L.marker([initialLat, initialLng]).addTo(this.map);
+          if (this.initGeocode) {
+            // 获取地址
+            this.getAddress(initialLng, initialLat);
+          }
+        }
+      }
+
+      // 如果不是只读模式，添加地图点击事件
+      if (!this.readonly && !this.disabled) {
+        this.map.on('click', (e) => {
+          const { lng, lat } = e.latlng;
+          this.selectedLocation = { lng, lat };
+
+          // 更新标记位置
+          this.updateMarker(lng, lat);
+
+          // 获取地址
+          this.getAddress(lng, lat);
+
+          // 触发位置变化事件
+          this.$emit('location-change', {
+            lng,
+            lat,
+            address: this.selectedAddress,
+          });
+          // 地址会在 getAddress 中更新并触发 address-change 事件
+        });
+      }
+    },
+
+    // 更新标记位置
+    updateMarker(lng, lat) {
+      if (this.marker) {
+        this.marker.setLatLng([lat, lng]);
+      } else {
+        this.marker = L.marker([lat, lng]).addTo(this.map);
+      }
+      // 地图移动到该位置
+      this.map.setView([lat, lng], 15);
+    },
+
+    // 获取地址（逆地理编码）
+    async getAddress(lng, lat) {
+      try {
+        // 使用天地图逆地理编码服务
+        const postStr = `{'lon':${lng},'lat':${lat},'ver':1}`;
+        const url = `http://api.tianditu.gov.cn/geocoder?postStr=${encodeURIComponent(
+          postStr
+        )}&type=geocode&tk=${this.tk}`;
+
+        const response = await fetch(url);
+        const data = await response.json();
+
+        if (data.status === '0' && data.result) {
+          // 优先使用 formatted_address，如果没有则使用 addressComponent 中的地址
+          this.selectedAddress =
+            data.result.formatted_address ||
+            data.result.addressComponent?.address ||
+            data.result.addressComponent?.city ||
+            '';
+          // 同步到搜索框
+          this.searchKeyword = this.selectedAddress;
+          // 触发地址变化事件
+          this.$emit('address-change', this.selectedAddress);
+        } else {
+          this.selectedAddress = '';
+        }
+      } catch (error) {
+        console.error('获取地址失败:', error);
+        this.selectedAddress = '';
+      }
+    },
+
+    // 搜索地点
+    async handleSearch(queryString, cb) {
+      // 更新搜索关键词
+      this.searchKeyword = queryString;
+
+      if (!queryString || !queryString.trim()) {
+        this.searchOptions = [];
+        cb([]);
+        return;
+      }
+
+      if (!this.map) {
+        console.error('地图未初始化');
+        cb([]);
+        return;
+      }
+
+      this.searchLoading = true;
+
+      try {
+        // 获取当前地图边界
+        const bounds = this.map.getBounds();
+        const sw = bounds.getSouthWest();
+        const ne = bounds.getNorthEast();
+        const mapBound = `${sw.lng},${sw.lat},${ne.lng},${ne.lat}`;
+
+        // 获取当前地图缩放级别
+        const level = this.map.getZoom();
+
+        // 构造搜索参数
+        const postStrObj = {
+          keyWord: queryString.trim(),
+          level,
+          mapBound,
+          queryType: 7, // 1: 普通POI搜索
+          start: 0,
+          count: 100,
+          show: 2,
+          // specify: '156410000', // 指定行政区码
+        };
+
+        const postStr = JSON.stringify(postStrObj);
+        const url = `http://api.tianditu.gov.cn/v2/search?postStr=${encodeURIComponent(
+          postStr
+        )}&type=query&tk=${this.tk}`;
+
+        const response = await fetch(url);
+        const data = await response.json();
+
+        // 处理搜索结果
+        if (data && data.status && data.status.infocode === 1000) {
+          const result = data;
+
+          // 普通POI结果 (resultType = 1)
+          if (result.resultType === 1 && result.pois && Array.isArray(result.pois)) {
+            const options = result.pois
+              .filter((poi) => poi.lonlat && poi.name)
+              .map((poi, index) => {
+                const lonlatParts = poi.lonlat.split(',');
+                const lng = lonlatParts[0] ? Number.parseFloat(lonlatParts[0]) : null;
+                const lat = lonlatParts[1] ? Number.parseFloat(lonlatParts[1]) : null;
+
+                return {
+                  label: `${poi.name} - ${poi.address || ''}`,
+                  value: `${poi.name}_${index}_${poi.lonlat}`,
+                  name: poi.name || '',
+                  address: poi.address || '',
+                  lonlat: poi.lonlat || '',
+                  lng,
+                  lat,
+                };
+              });
+
+            this.searchOptions = options;
+            cb(options);
+          } else {
+            console.warn('搜索结果格式异常:', result);
+            this.searchOptions = [];
+            cb([]);
+          }
+        } else {
+          const errorMsg = data.status?.cndesc || data.msg || '搜索失败，请稍后重试';
+          console.warn('搜索失败:', errorMsg);
+          this.searchOptions = [];
+          cb([]);
+        }
+      } catch (error) {
+        console.error('搜索地点失败:', error);
+        this.searchOptions = [];
+        cb([]);
+      } finally {
+        this.searchLoading = false;
+      }
+    },
+
+    // 选择搜索结果
+    handleSelectSearchResult(item) {
+      if (!item || !this.map) {
+        return;
+      }
+
+      if (!item.lng || !item.lat) {
+        return;
+      }
+
+      // 设置选中位置
+      this.selectedLocation = { lng: item.lng, lat: item.lat };
+
+      // 更新地址（优先使用 address，如果没有则使用 name）
+      // 先设置地址，避免后续 getAddress 覆盖
+      this.selectedAddress = item.address + item.name || '';
+      // 同步到搜索框
+      this.searchKeyword = this.selectedAddress;
+
+      // 更新标记位置（不调用 getAddress，因为地址已经设置好了）
+      if (this.marker) {
+        this.marker.setLatLng([item.lat, item.lng]);
+      } else {
+        this.marker = L.marker([item.lat, item.lng]).addTo(this.map);
+      }
+      // 地图移动到该位置
+      this.map.setView([item.lat, item.lng], 15);
+
+      // 触发位置变化事件
+      this.$emit('location-change', {
+        lng: item.lng,
+        lat: item.lat,
+        address: this.selectedAddress,
+      });
+      // 触发地址变化事件
+      this.$emit('address-change', this.selectedAddress);
+    },
+
+    // 获取当前选中的位置
+    getLocation() {
+      return this.selectedLocation
+        ? {
+          lng: this.selectedLocation.lng,
+          lat: this.selectedLocation.lat,
+          address: this.selectedAddress,
+        }
+        : null;
+    },
+
+    // 设置位置
+    setLocation(lng, lat) {
+      if (lng && lat && this.map) {
+        this.updateMarker(lng, lat);
+        this.selectedLocation = { lng, lat };
+        if (this.initGeocode) {
+          this.getAddress(lng, lat);
+        }
+      }
+    },
+
+    // 搜索框输入处理（用于手动输入详细地址）
+    handleSearchInput(value) {
+      // 实时更新地址
+      this.$emit('address-change', value || '');
+    },
+
+    // 根据区域名称获取坐标并移动地图
+    async moveToRegion(regionName) {
+      if (!regionName || !this.map) {
+        return;
+      }
+
+      try {
+        // 使用天地图地理编码服务（根据地址获取坐标）
+        // 参考文档：http://lbs.tianditu.gov.cn/server/geocoding.html
+        const postStr = `{'address':'${regionName}','ver':1}`;
+        const url = `http://api.tianditu.gov.cn/geocoder?postStr=${encodeURIComponent(
+          postStr
+        )}&type=geocode&tk=${this.tk}`;
+
+        const response = await fetch(url);
+        const data = await response.json();
+
+        // 天地图地理编码返回格式：{status: '0', result: {location: {lon: xxx, lat: xxx}}}
+        if (data.status === '0' && data.result && data.result.location) {
+          const { lon, lat } = data.result.location;
+          if (lon && lat) {
+            // 移动地图到该位置（缩放级别12，显示城市级别）
+            this.map.setView([lat, lon], 12);
+            // 不自动添加标记，只移动视图
+            // 如果需要，可以清除之前的标记
+            if (this.marker) {
+              this.map.removeLayer(this.marker);
+              this.marker = null;
+            }
+            // 重置选中位置
+            this.selectedLocation = null;
+            this.selectedAddress = '';
+            // 不清空搜索框，保留用户输入的区域名称
+          }
+        } else {
+          console.warn('未找到该区域的坐标信息:', regionName);
+        }
+      } catch (error) {
+        console.error('根据区域移动地图失败:', error);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.tianditu-map-container {
+  width: 100%;
+  position: relative;
+}
+
+.search-box {
+  margin-bottom: 15px;
+}
+
+.search-option {
+  padding: 10px 0;
+
+  .option-name {
+    font-size: 14px;
+    font-weight: 500;
+    color: #333;
+    margin-bottom: 6px;
+    line-height: 1;
+  }
+
+  .option-address {
+    font-size: 12px;
+    color: #999;
+    line-height: 1;
+  }
+}
+
+
+.map-container {
+  width: 100%;
+  border-radius: 4px;
+  overflow: hidden;
+  border: 1px solid #dcdfe6;
+}
+</style>

package/src/index.js

@@ -0,0 +1,26 @@
+// 引入本地 leaflet
+import './leaflet/leaflet.css';
+import './leaflet/leaflet.js';
+
+import TiandituMap from './TiandituMap.vue';
+
+// 支持 Vue 2 和 Vue 3
+const install = function(Vue) {
+  if (install.installed) return;
+  install.installed = true;
+  Vue.component('TiandituMap', TiandituMap);
+};
+
+// 自动安装（如果 Vue 是通过 script 标签引入的）
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue);
+}
+
+// 导出组件和安装方法
+export default {
+  install,
+  TiandituMap,
+};
+
+// 支持命名导出
+export { TiandituMap };