tdt-map-vue2 0.1.0

package/README.md

@@ -0,0 +1,124 @@
+# tdt-map-vue2
+
+
+
+## 主要功能介绍
+
+1. 传入 datas 坐标，可渲染点
+2. 地图渲染完会触发 init 事件，暴露 map 和 BMapGL 两个对象，可在直接操作地图
+3. 地图移动或者 zoom 改变会触发 changeView，监听事件可获取相关地图数据，再从后台重新获取 datas，更新地图点（浏览器变化不会触发 changeView 事件）
+4. 传入 viewDatas 坐标，同样渲染点（与 datas 一起，谁改变，就渲染谁，不会同时渲染），viewDatas 的改变会触发地图视图移动，即会把所有 viewDatas 渲染到视图中
+<!-- 5. 传入 paths 可渲染移动路径 -->
+
+## 使用步骤
+
+```js
+// main.js中引入，并注册
+import TdtMap from "tdt-map-vue2";
+Vue.use(TdtMap, {
+  tk: "tk",
+});
+```
+
+```html
+<tdt-map
+  style="width:100vw;height:90vh;"
+  :datas="datas"
+  :viewDatas="viewDatas"
+  :imgs="iconImgs"
+  @changeView="getNewData"
+/>
+```
+
+## props
+
+| 参数              | 类型           | 必填 | 默认值      | 说明                                       |
+| ----------------- | -------------- | ---- | ----------- | ------------------------------------------ |
+| datas             | array          | 否   | []          | 数据，具体看下面 ☆                         |
+| viewDatas         | array          | 否   | []          | 数据，格式同 datas                          |
+| viewTimer         | number         | 否   | 800         | 地图视图改变防抖毫秒数                     |
+| viewLocation      | boolean        | 否   | false       | changeView 是否携带城市地址信息            |
+| tk                | string         | 否   | -           | 天地图 tk                                |
+| center            | number[]       | 否   | 杭州经纬度  | 地图 center                                |
+| zoom              | number         | 否   | 15          | 地图 zoom                                  |
+| mapOptions        | object         | 否   | -           | 百度地图初始化参数 minZoom/maxZoom/mapType |
+| denyRefresh      | boolean        | 否   | false       | 拒绝地图刷新，即地图移动或 zoom 改变不会触发 changeView 事件 |
+| lines | Array | 否 | [] | 线数据{id:1,coords:[[116.397428, 39.90923],[116.397428, 39.90923]]} |
+| coordTrans | Object | 否 | null | 坐标系转换库,传入当前坐标系和目标坐标系{from: 'BD09', to: 'WGS84'}, [坐标系转换](https://www.npmjs.com/package/gcoord) |
+
+## datas ☆ 介绍
+
+| 参数      | 类型            | 必填 | 默认值 | 说明                                                  |
+| --------- | --------------- | ---- | ------ | ----------------------------------------------------- |
+| id        | string/number   | 是   | -      | 唯一标识，用于点清理等工作，必传                      |
+| lng       | string          | 是   | -      | 点经度                                                |
+| lat       | string          | 是   | -      | 点纬度                                                |
+| img       | image           | 否   | -      | 展示图片                                              |
+| infos     | 二维数组/string | 否   | -      | 展示的文字                                            |
+| icon      | index           | 否   | -      | 根据传入的 imgs，设置每个点的图标，不传则使用百度默认 |
+| noClick   | boolean         | 否   | -      | 不触发点击 marker 事件                                |
+| titleKeys | string          | 否   | -      | 指定 infos 中哪个数据有悬浮 title                     |
+| infoBtn   | {text:'xxx'}    | 否   | -      | 添加按钮，会触发全局的 mapClick 事件                  |
+| labelFn   | function        | 否   | -      | 自定义 Label，返回{content,style,anchor}，高优先级    |
+
+- labelFn 回调接受两个参数(data, point)。需要返回包含 content(渲染内容)、style(对应样式)、anchor(label 偏移量)的对象
+
+例如：
+
+```js
+[
+  {
+    id: "4968-a081",
+    lat: "31.792512",
+    lng: "116.829919",
+    img: "http://192.168.0.222:10010/static/media/default.jpg",
+    infos: [
+      ["名称", "#次高压4#"],
+      ["压力", "六安次高压"],
+      ["标号", "站至合肥新奥啊啊啊啊啊啊啊门站"],
+      ["标号222", "站至合肥新奥啊啊啊啊啊啊啊门站"],
+    ],
+    icon: 0,
+  },
+  {
+    id: 2,
+    lat: 20,
+    lng: 116,
+    infos: "将会被渲染成richInfo",
+  },
+];
+```
+
+
+## emits
+
+| 名称         | 说明                                                                          |
+| ------------ | ----------------------------------------------------------------------------- |
+| init         | 地图初始化后暴露，{ BMapGL, map }                                             |
+| changeView   | 地图 zoom 或 center 改变后触发，返回地图数据{bounds:{ne:xxx,sw:xxx},zoom:xxx} |
+| markerClick  | 地图上点被点击后触发{ marker, data, e }                                       |
+| renderMarker | 地图上点渲染完后触发                                                          |
+| moveStart  | 地图移动开始 |
+| moveEnd  | 地图移动结束 |
+| mapClick  | 点击地图 |
+| renderLine | 渲染线 |
+
+- changeView: 因为 viewDatas 改变导致视图发生改变，不应该触发 changeView，这个时候如果想获取地图视图，建议使用 map.getBounds()和 map.getZoom()手动获取相关数据
+
+## 天地图 zoom 大致范围
+
+| zoom    | 级别                             |
+| ------- | -------------------------------- |
+| 16 往上 | 更细节                           |
+| 14-15   | 看清居民区、商业区、医院的颜色块 |
+| 12-13   | 市区、城市、地铁线               |
+| 11-12   | 市级，周围市                     |
+| 9-10    | 省级，1-2 个省                   |
+| 7-8     | 省级，4-5 个省                   |
+| 6-7     | 省级，小半个中国                 |
+| 4-6     | 基本上整个中国，全球             |
+
+## 备注
+
+1. `map`, `TMap`: 组件中地图挂载完后，会将暴露这两个对象，可参照[天地图](https://lbsyun.tianditu.gov.cn/index.html)直接操作这两个对象
+2. viewDatas 的用法：在父组件提供 input 搜索框，请求后台得到数据后提交给地图组件，地图组件会依据请求到的数据确定地图中心；地图组件会同时监听 datas，而它们的基本逻辑是(地图 center、zoom 改变会需要得到新的 datas),(viewDatas 改变会得到地图新的 center、zoom)

package/index.js

@@ -0,0 +1,11 @@
+import EnnTMap from './lib/BaseMap.vue'
+import { setTk } from './lib/utils/config'
+
+const installTMap = {
+  install(app,option) {
+    const {tk} = option
+    setTk(tk)
+    app.component('EnnTMap', EnnTMap)
+  }
+}
+export { installTMap as default, EnnTMap }

package/lib/BaseMap.vue

@@ -0,0 +1,440 @@
+<template>
+  <div class="enn-map-box" ref="mapBox">
+    <div ref="baseMap" class="enn-base-map"></div>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import gcoord from "gcoord";
+import { installTMap } from "./utils/installMap";
+import installControls from "./utils/controls";
+import markerIcon from "./map1.svg";
+
+export default {
+  name: "EnnTMap",
+
+  props: {
+    tk: {
+      type: String,
+      default: "",
+    },
+    center: {
+      type: Array,
+      default: () => ["120.14912421539132", "30.183802187197283"],
+    },
+    zoom: {
+      type: Number,
+      default: 15,
+    },
+    mapOptions: {
+      // 地图配置
+      type: Object,
+      default: () => ({}),
+    },
+    // markerOptions: {
+    //   // marker配置
+    //   type: Object,
+    //   default: () => ({}),
+    // },
+    datas: {
+      // marker数据
+      type: Array,
+      default: () => [],
+    },
+    viewDatas: {
+      // 视图数据,变化时重新渲染marker,并改变视野
+      type: Array,
+      default: () => [],
+    },
+    viewTimer: {
+      // 视图变化时请求接口重新渲染marker的间隔时间(防抖)
+      type: Number,
+      default: 800,
+    },
+    viewLocation: {
+      // 是否返回城市地址信息
+      type: Boolean,
+      default: false,
+    },
+    denyRefresh: {
+      // 阻止刷新,用在视野变化时
+      type: Boolean,
+      default: false,
+    },
+    coordTrans: {
+      // 坐标转换配置{from, to}
+      type: Object,
+      default: null,
+    },
+    lines: {
+      // 线数据{id,coords:[点集合],color}
+      type: Array,
+      default: () => [],
+    },
+    renderBatchLineSize: {
+      // 每次渲染的line数量
+      type: Number,
+      default: 20,
+    },
+  },
+
+  data() {
+    return {
+      map: null,
+      TMapGL: null,
+      MapGeocoder: null,
+      markersMap: new Map(),
+      ifChangeViewEmit: false,
+      changeViewTimer: null,
+      followDatas: true,
+      pipelineLayers: [], // 存储管线图层引用
+    };
+  },
+
+  computed: {
+    // 计算属性：判断 gcoord 是否为空对象
+    isGcoordEmpty() {
+      if (!this.coordTrans) return true;
+      return Object.keys(this.coordTrans).length === 0;
+    },
+  },
+
+  mounted() {
+    console.log("----------initMap----------");
+    installTMap(this.initMap, this.tk);
+  },
+
+  beforeDestroy() {
+    this.removeAll();
+    this.map = null;
+  },
+
+  watch: {
+    datas: {
+      handler() {
+        this.removeAllMarkers();
+        this.followDatas = false;
+        this.initAllMarkers(this.datas);
+      },
+      deep: true,
+    },
+    viewDatas: {
+      handler() {
+        this.removeEvents();
+        this.removeAllMarkers();
+        this.followDatas = true;
+        this.initAllMarkers(this.viewDatas);
+      },
+      deep: true,
+    },
+    lines: {
+      handler() {
+        console.log("----------props.lines------------");
+
+        this.removeAllPipelines();
+        this.initAllLines(this.lines);
+      },
+      deep: true,
+    },
+  },
+
+  methods: {
+    // 坐标系转换方法
+    gcoordTransform(
+      arr,
+      from = this.coordTrans?.from,
+      to = this.coordTrans?.to
+    ) {
+      return this.isGcoordEmpty
+        ? arr
+        : gcoord.transform(arr, gcoord[from], gcoord[to]);
+    },
+
+    // 初始化地图
+    initMap(TMap) {
+      this.TMapGL = TMap;
+      this.init(TMap);
+      if (this.viewLocation) {
+        this.MapGeocoder = new TMap.Geocoder();
+      }
+    },
+
+    init(TMap) {
+      if (this.map) return;
+
+      const $el = this.$refs.baseMap;
+      const mapInstance = new TMap.Map($el, {
+        ...this.mapOptions,
+      });
+      this.map = mapInstance;
+
+      const result = this.gcoordTransform(this.center);
+      const point = new TMap.LngLat(...result);
+      mapInstance.centerAndZoom(point, this.zoom);
+      mapInstance.enableScrollWheelZoom();
+      mapInstance.enableDoubleClickZoom();
+      mapInstance.disableInertia();
+
+      // 初始化控制器
+      installControls(mapInstance, TMap);
+      mapInstance.addEventListener("click", this.removeRichInfo); // TODO
+      this.addEvents();
+      this.initAllMarkers(this.datas);
+
+      this.$emit("init", { TMap, map: mapInstance });
+    },
+
+    // 事件监听
+    addEvents() {
+      if (!this.map) return;
+      this.map.addEventListener("movestart", this.removeRichInfo);
+      this.map.addEventListener("moveend", this.getMapView);
+      this.map.addEventListener("zoomend", this.getMapView);
+      this.map.addEventListener("click", this.mapClick);
+    },
+
+    removeEvents() {
+      if (!this.map) return;
+      this.map.removeEventListener("movestart", this.removeRichInfo);
+      this.map.removeEventListener("moveend", this.getMapView);
+      this.map.removeEventListener("zoomend", this.getMapView);
+      this.map.removeEventListener("click", this.mapClick);
+    },
+
+    mapClick(e) {
+      this.$emit("mapClick", e);
+    },
+
+    getMapView() {
+      if (this.followDatas || this.denyRefresh) {
+        this.$emit("moveEnd");
+        return;
+      }
+
+      if (this.ifChangeViewEmit) {
+        clearTimeout(this.changeViewTimer);
+      }
+      this.ifChangeViewEmit = true;
+
+      this.changeViewTimer = setTimeout(async () => {
+        let location = null;
+        if (this.viewLocation) {
+          location = await this.getLocationByCenter();
+        }
+        this.ifChangeViewEmit = false;
+
+        const bounds = this.map.getBounds(); // 获取地图可视区域
+        const [lng_sw, lat_sw] = this.gcoordTransform(
+          [bounds.kq.lng, bounds.kq.lat],
+          this.coordTrans?.to,
+          this.coordTrans?.from
+        );
+        const [lng_ne, lat_ne] = this.gcoordTransform(
+          [bounds.Lq.lng, bounds.Lq.lat],
+          this.coordTrans?.to,
+          this.coordTrans?.from
+        );
+
+        this.$emit("changeView", {
+          bounds: {
+            ...bounds,
+            sw: { lng: lng_sw, lat: lat_sw },
+            ne: { lng: lng_ne, lat: lat_ne },
+          },
+          zoom: this.map.getZoom(),
+          location,
+        });
+        clearTimeout(this.changeViewTimer);
+      }, this.viewTimer || 800);
+    },
+
+    // 逆地址解析
+    getLocationByCenter(point) {
+      return new Promise((resolve) => {
+        this.MapGeocoder.getLocation(
+          point || this.map.getCenter(),
+          (result) => {
+            if (result) resolve(result);
+          }
+        );
+      });
+    },
+
+    // 分批次渲染管线
+    renderPipelinesInBatches(lines) {
+      if (!lines || lines.length === 0) return;
+      let pipelines = JSON.parse(JSON.stringify(lines));
+      this.removeAllPipelines();
+      let batchIndex = 0;
+      const { renderBatchLineSize } = this;
+      const renderBatch = () => {
+        const endIndex = Math.min(
+          batchIndex + renderBatchLineSize,
+          pipelines.length
+        );
+        const batch = pipelines.slice(batchIndex, endIndex);
+        batch.forEach((pipe) => {
+          const lngLatArr = pipe.coords.map(
+            (c) => new this.TMapGL.LngLat(c[0], c[1])
+          );
+          const polyline = new this.TMapGL.Polyline(lngLatArr, {
+            color: pipe.color,
+            weight: 3,
+            opacity: 0.7,
+            lineJoin: "round",
+          });
+          this.map.addOverLay(polyline);
+          // 存储管线图层，便于后续操作
+          pipe.layer = polyline;
+          this.pipelineLayers.push(polyline);
+        });
+        batchIndex = endIndex;
+        if (batchIndex < pipelines.length) {
+          // 异步渲染下一批，避免阻塞主线程
+          requestAnimationFrame(renderBatch);
+        } else {
+          console.log("所有管线渲染完成，总数：", pipelines.length);
+          this.$emit("renderLine");
+        }
+      };
+      renderBatch();
+    },
+
+    // 清空所有管线
+    removeAllPipelines() {
+      if (!this.map || this.pipelineLayers.length === 0) return;
+
+      this.pipelineLayers.forEach((layer) => {
+        this.map.removeOverLay(layer);
+      });
+      this.pipelineLayers = [];
+
+      // 同时清空管线数据中的图层引用
+      if (this.lines && this.lines.length > 0) {
+        this.lines.forEach((pipe) => {
+          pipe.layer = null;
+        });
+      }
+    },
+
+    // 线段管理
+    initAllLines(lines) {
+      console.log("----------渲染管线initAllLines--------");
+
+      this.renderPipelinesInBatches(lines);
+    },
+
+    // 标记点管理
+    initAllMarkers(datas) {
+      this.removeAllMarkers();
+      const viewPoints = [];
+
+      datas.forEach((data) => {
+        const { marker } = this.getMarker({ data });
+        this.markersMap.set(data.id, { marker, show: true });
+        this.map.addOverLay(marker);
+
+        if (this.followDatas) {
+          const result = this.gcoordTransform([data.lng, data.lat]);
+          viewPoints.push(new this.TMapGL.LngLat(...result));
+        }
+      });
+
+      if (this.followDatas && datas.length) {
+        this.map.setViewport(viewPoints);
+      }
+
+      setTimeout(
+        () => {
+          this.addEvents();
+          this.followDatas = false;
+          this.$emit("renderMarker");
+        },
+        this.followDatas ? 200 : 0
+      );
+    },
+
+    getMarker({ data }) {
+      let marker = undefined;
+      const result = this.gcoordTransform([data.lng, data.lat]);
+      const point = new this.TMapGL.LngLat(...result);
+
+      if (data.labelFn) {
+        const labelRes = data.labelFn(data, point);
+        const label = new this.TMapGL.Label({
+          text: labelRes.content,
+          position: point,
+          offset: new this.TMapGL.Point(...(labelRes.anchor || [0, 0])),
+        });
+        marker = label;
+      } else {
+        const icon = new this.TMapGL.Icon({
+          iconUrl: data.img || markerIcon,
+          iconSize: new this.TMapGL.Point(38, 54),
+        });
+        marker = new this.TMapGL.Marker(point, { icon });
+      }
+
+      marker.addEventListener("click", (e) => {
+        setTimeout(() => {
+          this.$emit("markerClick", { marker, data, e });
+        }, 0);
+      });
+
+      return { marker };
+    },
+
+    removeAll() {
+      if (!this.map) return;
+      this.removeRichInfo();
+      this.removeAllMarkers();
+      this.removeAllPipelines();
+    },
+
+    removeRichInfo() {
+      // 清理弹窗信息
+    },
+
+    removeAllMarkers() {
+      const markers = [...this.markersMap.values()];
+      markers.forEach(({ marker }) => {
+        if (this.map) {
+          this.map.removeOverLay(marker);
+        }
+      });
+      this.markersMap.clear();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.enn-map-box {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.enn-base-map {
+  width: 100%;
+  height: 100%;
+}
+</style>
+
+<style>
+.tdt-control-copyright {
+  opacity: 0;
+}
+
+.tdt-container .tdt-control-copyright {
+  opacity: 0;
+}
+
+html .tdt-label {
+  background: transparent;
+  padding: 0;
+  border: none;
+  box-shadow: none;
+}
+</style>

package/lib/map1.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="38px" height="48px" viewBox="0 0 38 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 5</title>
+    <g id="阀门井监测系统" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="阀门井分布" transform="translate(-2183.000000, -2167.000000)">
+            <g id="编组-5" transform="translate(2183.000000, 2167.000000)">
+                <g id="编组-7备份">
+                    <path d="M18.4818857,47.656875 L17.7426857,46.973758 L17.3787429,46.6337661 L17.3787429,46.6337661 L16.6621714,45.9569154 L16.3095429,45.6200566 L16.3095429,45.6200566 L15.6156,44.9494722 L14.9367429,44.2830652 L14.2729714,43.6208357 C13.9592797,43.3052739 13.6507588,42.991144 13.3474086,42.678446 L12.7476025,42.0549591 C12.2535094,41.5369776 11.7737795,41.0229735 11.3084127,40.5129468 L10.7568669,39.902824 C10.6660916,39.801455 10.5758909,39.7002452 10.4862647,39.5991944 L9.95540188,38.994799 C9.86807379,38.8943847 9.78132023,38.7941294 9.6951412,38.6940332 L9.18496133,38.0953653 C8.7655567,37.5980663 8.36051524,37.1047448 7.96983696,36.6154006 L7.50791735,36.0300968 C2.50263912,29.6127554 0,23.8884374 0,18.8571429 C0,8.44263043 8.44263043,0 18.8571429,0 L19.1689802,0.00252631838 C29.4396636,0.169049797 37.7142857,8.54677556 37.7142857,18.8571429 C37.7142857,23.8884374 35.2116466,29.6127554 30.2063684,36.0300968 L29.7444488,36.6154006 C29.3537705,37.1047448 28.948729,37.5980663 28.5293244,38.0953653 L28.0191445,38.6940332 C27.9329655,38.7941294 27.8462119,38.8943847 27.7588838,38.994799 L27.228021,39.5991944 C27.1383948,39.7002452 27.0481941,39.801455 26.9574188,39.902824 L26.405873,40.5129468 C25.9405062,41.0229735 25.4607763,41.5369776 24.9666832,42.0549591 L24.3668771,42.678446 C24.1646436,42.8869114 23.9601121,43.0960131 23.7532824,43.3057512 L23.4413143,43.6208357 L22.7775429,44.2830652 L22.0986857,44.9494722 L21.4047429,45.6200566 L21.0521143,45.9569154 L20.3355429,46.6337661 L19.9716,46.973758 L19.2324,47.656875 L18.8571429,48 L18.4818857,47.656875 Z" id="形状" fill="#E72B00" fill-rule="nonzero"></path>
+                    <circle id="椭圆形" fill="#FFFFFF" cx="18.8571429" cy="18.8571429" r="15.4285714"></circle>
+                </g>
+                <path d="M23.5,8 C28.1944204,8 32,11.8055796 32,16.5 C32,21.0016108 28.5006068,24.6858945 24.0737285,24.980943 C22.6048016,27.9547528 19.5412473,30 16,30 C11.0294373,30 7,25.9705627 7,21 C7,16.0294373 11.0294373,12 16,12 C16.0958474,12 16.1913448,12.0014983 16.2864701,12.0044727 C17.7866766,9.59952477 20.4565438,8 23.5,8 Z M11.1649072,21.6543476 L9.76925626,21.6544912 C10.0852398,24.512043 12.3336488,26.7871384 15.1786888,27.1439831 L15.269689,27.1547188 L15.269762,25.7590653 C13.1473373,25.4555191 11.4685225,23.77675 11.1649072,21.6543476 Z M22.1546933,21.6544912 L20.7590424,21.6543476 C20.4595937,23.7476234 18.8224315,25.4093587 16.7413153,25.7457937 L16.6543476,25.7590424 L16.6544912,27.1546933 C19.511967,26.8387182 21.7870174,24.5904205 22.1439546,21.7454879 L22.1546933,21.6544912 Z M16,18.2307692 C14.4705961,18.2307692 13.2307692,19.4705961 13.2307692,21 C13.2307692,22.5294039 14.4705961,23.7692308 16,23.7692308 C17.5294039,23.7692308 18.7692308,22.5294039 18.7692308,21 C18.7692308,19.4705961 17.5294039,18.2307692 16,18.2307692 Z M23.5,9.21428571 C21.1057644,9.21428571 18.9812659,10.3691672 17.6531831,12.1522513 C21.834495,12.9281473 25,16.594402 25,21 C25,21.942477 24.8551312,22.8511182 24.5864468,23.7048702 C28.0947399,23.1809099 30.7857143,20.1547103 30.7857143,16.5 C30.7857143,12.4762111 27.5237889,9.21428571 23.5,9.21428571 Z M16,19.6153846 C16.764702,19.6153846 17.3846154,20.235298 17.3846154,21 C17.3846154,21.764702 16.764702,22.3846154 16,22.3846154 C15.235298,22.3846154 14.6153846,21.764702 14.6153846,21 C14.6153846,20.235298 15.235298,19.6153846 16,19.6153846 Z M16.6544912,14.7692563 L16.6543476,16.1649072 C18.747676,16.4643634 20.4094422,18.1016004 20.745819,20.1827912 L20.7590653,20.269762 L22.1547188,20.269689 C21.8354788,17.381706 19.5424425,15.0886013 16.6544912,14.7692563 Z M15.269689,14.7692308 C12.4120298,15.0851188 10.1368221,17.333571 9.77996684,20.1786864 L9.76923077,20.269689 L11.1648843,20.269762 C11.4642798,18.176359 13.1015462,16.5145171 15.182789,16.1781309 L15.269762,16.1648843 L15.269689,14.7692308 Z" id="形状结合" fill="#E72B00" fill-rule="nonzero"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/lib/utils/config.js

@@ -0,0 +1,9 @@
+export const config ={
+    tk:''
+}
+export const getTk = () => {
+    return config.tk
+}
+export const setTk = (tk) => {
+    config.tk = tk
+}

package/lib/utils/controls.js

@@ -0,0 +1,14 @@
+export default (map, T) => {
+  // 创建缩放平移控件
+  const control = new T.Control.Zoom()
+  map.addControl(control)
+  const controlPosition = window.T_ANCHOR_BOTTOM_RIGHT
+  control.setPosition(controlPosition)
+
+  // 创建比例尺控件
+  const scale = new T.Control.Scale({ position: window.T_ANCHOR_BOTTOM_RIGHT })
+  setTimeout(() => {
+    scale.setOffset({ x: -60, y: 60 })
+  }, 0)
+  map.addControl(scale)
+}

package/lib/utils/installMap.js

@@ -0,0 +1,34 @@
+import { getTk } from "./config";
+// 初始化天地图API
+export function installTMap(initMap, tk) {
+  getMapScript(tk).then(initMap);
+}
+
+export function getMapScript(propsTk) {
+  if (!window.T) {
+    const tk = propsTk || getTk()
+
+    window.T = {};
+    window.T._preloader = new Promise((resolve) => {
+      window._initTMapGL = function () {
+        window.document.body.removeChild($script);
+        window.T._preloader = null;
+        window._initTMapGL = null;
+        resolve(window.T);
+      };
+
+      const $script = document.createElement("script");
+      window.document.body.appendChild($script);
+      $script.src = `https://api.tianditu.gov.cn/api?v=4.0&tk=${tk}`;
+      $script.onload = window._initTMapGL;
+    });
+
+    return window.T._preloader;
+  } else if (!window.T._preloader) {
+    return Promise.resolve(window.T);
+  } else {
+    return window.T._preloader;
+  }
+}
+
+export default installTMap;

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "tdt-map-vue2",
+  "version": "0.1.0",
+  "description": "基于天地图封装的组件",
+  "main": "index.js",
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build"
+  },
+  "keywords": [
+    "tdt-map",
+    "天地图"
+  ],
+  "author": "weiyun",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@vue/cli-service": "~5.0.0",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "gcoord": "^1.0.7",
+    "vue": "^2.6.11",
+    "vue-router": "^3.5.3",
+    "vue-template-compiler": "^2.6.11"
+  }
+}