gy-map

使用vue3.0+vite+ts封装的地图组件

该组件支持VUE2.0以及VUE3.0。

安装

使用 npm 安装。

npm install gy-map --save

引入

全局引入 在main.js中引入

import {gyMap} from 'gy-Map';
import 'gy-map/style.css'
app.use(gyMap);

按需引入，在相应的页面中引入

import {Gymap, GymapHtml} from 'gy-Map'
<Gymap
  :mapOpt="mapOpt"
  :zoom="zoom"
  :center="p"
>
  <Gymap-html
    :position="p"
    :offset="o"
  ></Gymap-html>
</Gymap>

判断map加载完成

在其他页面中判断map是否加载完成

import {watch} from "vue"

const gyMapObj = gyMap(mapId); //mapId可不填， 当有多个地图是可以通过传入对应的ID，获取对应地图的实例。
const mapFinish = computed(() => gyMapObj.value && gyMapObj.value.mapFinish);
watch(mapFinish, n => {
  //n === true
  //map filish
})

GyMap

主容器

<template>
  <div class="gy-map-con">
    <Gymap
      id="map2"
      :mapOpt="mapOpt"
      :zoom="zoom"
      :center="center"
      :layerOpacity="layerOpacity"
      >
    </Gymap>
  </div>
</template>

<script setup lang="ts">
  import {ref, reactive} from "vue"
  const mapOpt = reactive({})
  let center = ref([116.40531, 39.896884]);
  const zoom = ref(16);
  const layerOpacity = ref(1);
</script>

属性名	说明	类型	可选值	默认值
id	地图容器的ID	string	——	——
center	地图中心点 值为 [lon, lat] 经纬度组成的数组	Array<number>	——	——
zoom	地图显示层级 范围为 1 - 18	number	1 - 18	——
mapOpt	地图相关属性配置 - minZoom number 地图最小层级 默认为 1 最小为1 - maxZoom number 地图最大增肌 默认为 18 最大为18 - mapUrlList string[] | string 地图瓦片 只有一个时直接设置为瓦片地址，多个瓦片时传入一个Array; 例:BASTURL + '/map/gaodeMap/ccMap/{z}/{x}/{y}.jpg' extent 地图范围 值为对角的两个顶点坐标组成的数组，[[leftTopLon, leftTopLat], [rightBottomLon, rightBottomLat]].	Object	——	——
maplayerIndex	地图当前瓦片显示下标	number	——	0
layerOpacity	地图当前瓦片的透明度	number	0-1	1

其他组件

• GymapText 绘制文本
• GymapCircle 绘制一个圆
• GymapImage 绘制图片
• DemoGymapHtml 将HTML绘制到地图中
• GymapPolygon 多边形
• GymapLine 绘制一条线
• GymapHeat 热力图
• GymapDraw Draw绘画
• GymapTask 动画任务