ryvuemap

ry公共组件库

更新日志

增加禁用切换地图功能

安装

npm i ry-vue-map
yarn add ry-vue-map

快速开始

main.js

import Vue from 'vue'
import RyUI from 'ry-vue-map';

Vue.use(RyUI)

组件

RyMap

map/index.vue

<template>
  <ry-map
     projection="EPSG:4326" // 投影方式 （可不传）
    :mapType="1" // 地图类型 1为天地图 不填为bing地图
    :zoom="15" // 地图缩放率  默认为10（可不传）
    :minZoom="1" // 地图最下缩放率 默认为1（可不传）
    :maxZoom="28" // 地图最大缩放率 默认为18（可不传）
    :bbox="bbox" // 自适应范围 [[x,y],[x,y]]   组件内部以有 watch 监听
    :center="center" // 设置地图中心点 [x,y] 组件内部以有 watch 监听
    @load="load($event)" // 地图加载成功后回调函数
    :isCrossHair="false"  // 是否显示十字点  默认fasle 不显示
    :isRight="true"  // 地图工具 显示方向    顶部 左 右  默认右上方（可不传）
    :isRyMapTool="true"   // 是否创建地图工具
    @drawSuccess="drawSuccess" // 绘制多边形成功后回调函数  {geoJson,delelte} delelte为回调函数用来清空绘制的多边形实例相当于工具栏中的删除功能
    @drawError="drawError"  // 绘制多边形出错后回调函数
    :isShowRangingTool="true" // 是否显示侧面、测距工具 默认显示(可不传)
    :isShowDrawTool="true" // 是显示绘制多边形工具 默认不显示
    :bindMapClick="true" //是否注册地图点击事件  true 注册 false 注销注册watch 监听
    @mapClick="mapClick($event)"  // 点击地图回调事件 注意：这里为了其回调函数代码少 只返回有有Id图层
    :initModifyPolygon="geoJson" // 初始化需要编辑的多边形 传入 geoJson或 字符串geoJson 用于地图编辑界面 isShowDrawTool=true时 才生效
    :m="3000"  // 地图中心点计算中心点距离 默认 单位m 默认3000m
    :bindMapMoveend="true"  绑定地图移动事件会根据zoom 缩放 以及地图移动时触发
    @mapMoveend="mapMoveend($event)" // 绑定地图移动事件后回调函数 会根据zoom 缩放 以及地图移动时触发 根据m参数设定的值返回 当前中心点与移动后的 中心点距离 {m,oversteSetValue}
    oversteSetValue 当前中心点 是否 大于等于 m 设定值 如果 超过 返回 true
     :hideAdd="true"   // 隐藏添加功能
      :hidePoint="true" // 隐藏打点功能
      :hideCancel="true"  // 隐藏取消功能
      :hideDelete="true" // 隐藏删除功能
      :hideSave="true" // 隐藏报错 功能
      :hideLine="true"  // 隐藏绘 隐藏测量线功能
      :hideArea="true"  // 隐藏测量面积功能
      // 点击绘制多边形或初始化编辑多边形触发返回 ryMapTool实例
      // 常用函数 $event  onCreatePolygon()// 创建多边形  onPointEvent() 打点功能 onCancel()撤销当前绘制 onDelete()删除多边形 onSave() 保存图形功能
      @loadDrawPolygonEvent="loadDrawPolygonEvent($event)"
     // 聚合控件
     <ry-clusters
     @callback="clusterCallback($event)"   // 返回值 {id,isShow}  id 多边形Id isShow true显示多边形
     :map="mapDto.map"  // 地图实例
     :modelArr="modelArr" // 与多边形组件数据结构相同即可
     :clusterPolygonModel // 集合多边形样式 {fillColor: 'rgba(184, 233, 134, 0.56)',stroke: 'rgba(23, 168, 162, 0.56)',width: 3, id：3,text:'块'}
     :
     >
     </ry-clusters>
    >
    <template slot="maptool">  // 工具栏 插槽
       <button>ry</button>
    </template>
// 多边形插槽
<template #polygon="{mapDto}" >
   <ry-polygon
   :isFit="true"  // 是根据多边形bbox 进行定位    true开启定位 false关闭
   :map="mapDto.map"  //地图实例
   :isShow="true"   // 是否显示多边形  true 显示
   :model="polygonModel"   //  数据模型  参考 data中的 polygonModel
   :text="123"  // 设置marker文本  注意 在model 添加text属性后才会创建文本标记 否则不创建
   :polygonColor="'red'" 动态设置多边形颜色
   :isCheckPointHide="true"    // 是否显示多边形  true 隐藏
   :clear="true" // 释放多边形 和 text标记  释放后不能在进行其他操作、在次给:model赋值可从新使用该组件
    @onLoad="onLoad($event)"    // 回调函数返回 多边形对象和标记对象 每次在释放或 model赋值才会触发
    >
    </ry-polygon>
     <ry-polygons
      :map="map"  //地图实例
      :modelArr="modelArr" //数据模型  在数据发生变化时会从新生成多边形
      :insert="insert" // 插入单个多边形  参照 polygonModel 数据结构
      :inserts="inserts" // 插入多个多边形  参照ModelArr 数据结构
      :isShowAl="true" // 显示或者隐藏所有多边形 true,显示  默认为 false  注意此处不会隐藏marker标记
      :isShowPolygon="isShowPolygon"// 隐藏或显示多个多边形 true显示 // 此处不会隐藏maker标记 数据结构 {id:'ceshis',isShow:false}
      :isShowPolygons="isShowPolygons" // 批量显示和隐藏多边形  [{id:'ceshis',isShow:false}]
      :restFit="false" 显示隐藏多边形后是否需要从新定位 true从新定位  默认为false
      :clear="true" //  true 为释放资源、默认为false 需要释放资源设置为true即可 或 modelArr 赋值为null [] 都可以
      :isCheckPointHideAll="isCheckPointHideAll" // 是否隐藏所有标记 true 为隐藏  注意隐藏标记 不会触发 restFit从新定位
      :isCheckPointHide="isCheckPointHide" // 是否显示隐藏单个标记  数据结构 {id:'ceshis',isShow:true}  isShow true 为隐藏  注意隐藏标记 不会触发 restFit从新定位
      :isCheckPointHides="isCheckPointHides" // 批量 是否显示标记 [{id:'ceshis',isShow:true} ]  isShow true 为隐藏  注意隐藏标记 不会触发 restFit从新定位
      :polygonColor="polygonColor"  //  设置多边形颜色  {id:'ceshi1',colorArr['red','#000'] } 数组中0为填充演示 1为边框演示
      :polygonColors="polygonColors"  // 批量设置多边形颜色 [{id:'ceshi1', colorArr:['red','#000'] }]
      :text="text" // 设置标记文本 {id:'ceshi1',text:'ceshiabc'}
      :isFit="true"// 是否根据bbox 设为中心点 默认为true,false则不在定位
      :remove="'ceshi1'" //  根据Id 释放多边形 和 标记
      :removes="['ceshi1']" //  根据Id数组 移除多边形 和标记
      :range="range"  根据传入的 Id 去进行定位
      :ranges="ranges" // 根据传入的Id数组进行定位
       @onLoad="onLoad($event)" // 回调函数 在插入、批量插入、modelArr发生变化时触发 返回{bboxMap, polygonMap,checkPointMap }
       @crossHairClick="crossHairClick($event)"  // 点击中心点或打点功能触发回调
     ></ry-polygons>
 </template>
   </ry-map>


<div>
    <h1>插槽外部使用方式</h1>
     <ry-polygon
    v-if="map"
   :isFit="true"
   :map="map"
   ......省略与上方多边形示例相同
   >
    </ry-polygon>
     <ry-polygons
    v-if="map"
   :isFit="true"
   :map="map"
   ......省略与上方多边形示例相同
   >
    </ry-polygons>

</div>

<h1>

      <RyMapTool
      @crossHairClick="crossHairClick($event)"  // 点击中心点或打点功能触发回调
       :isCrossHair="false" // 是否显示十字点  默认fasle 不显示
     :initModifyPolygon="geoJson" // 初始化需要编辑的多边形 传入 geoJson或 字符串geoJson 用于地图编辑界面
    :isRight="true"  // 地图工具 显示方向    顶部 左 右  默认右上方（可不传）
    :isRyMapTool="true"   // 是否创建地图工具
    @drawSuccess="drawSuccess" // 绘制多边形成功后回调函数  {geoJson,delelte} delelte为回调函数用来清空绘制的多边形实例相当于工具栏中的删除功能
    @drawError="drawError"  // 绘制多边形出错后回调函数
    :isShowRangingTool="true" // 是否显示侧面、测距工具 默认显示(可不传)
    :isShowDrawTool="true" // 是显示绘制多边形工具 默认不显示
     @drawSuccess="drawSuccess" // 绘制多边形成功后回调函数  {geoJson,delelte} delelte为回调函数用来清空绘制的多边形实例相当于工具栏中的删除功能 getGeoJson() 获取GeoJson
    @drawError="drawError"  // 绘制多边形出错后回调函数
      :hideAdd="true"   // 隐藏添加功能
      :hidePoint="true" // 隐藏打点功能
      :hideCancel="true"  // 隐藏取消功能
      :hideDelete="true" // 隐藏删除功能
      :hideSave="true" // 隐藏报错 功能
      :hideLine="true"  // 隐藏绘 隐藏测量线功能
      :hideArea="true"  // 隐藏测量面积功能
      // 点击绘制多边形或初始化编辑多边形触发返回 ryMapTool实例
      // 常用函数 $event  onCreatePolygon()// 创建多边形  onPointEvent() 打点功能 onCancel()撤销当前绘制 onDelete()删除多边形 onSave() 保存图形功能
      @loadDrawPolygonEvent="loadDrawPolygonEvent($event)"

      >
     <template>
         // 插槽
      </template>
    </RyMapTool>
</h1>

</template>

<script>
  import RyMap from '@/components/maps/ryMap/src/customTable.vue';
  import RyMapTool from '@/components/maps/ryMapTool/src/customTable.vue'

  export default {
    components: {
      RyMap,
      RyMapTool
    },
    data() {
      return {
        map: null,
        lMap: null,
        bbox:[],
        center: [116.40769, 39.89945],
         polygonModel: {
          // 填充颜色
          fillColor: '#000',
          //  边框颜色
          stroke: 'red',
          // 边框宽度
          width: 1,
          // 注意在此处 添加text属性后才会创建文本标记 否则不创建
          text:'测试',
          geo:g1,  // geoJson 可为字符串或对象   注意 传入geoJson后不需要在传送  coordinates 三维数组
          // coordinates: [
          //   [
          //     [121.03623185250073, 29.247091764239528],
          //     [121.03525048300928, 29.24522364753245],
          //     [121.03576144393304, 29.244964111834967],
          //     [121.03598042717134, 29.245156060100488],
          //   ]
          // ],
          // id 为必穿且不能重复
          id: 'ceshi',
        },
        modelArr:[this.polygonModel]
      };
    },
    created(){
      // setTimeout(r=> this.center=[116.407693, 39.899456],5000);
    },
    methods: {
      load(obj) {
        console.log(obj);
        // mapServices 地图服务
        // Map 实例对象
        const {mapServices, map} = obj;
        this.lMap = mapServices;

      },
      drawSuccess(geo){
        // geo  绘制多边形成功后 返回 geojson  非字符串
        console.log(geo);
      },
      drawError(obj){
        const {type,geoJson}= obj;
        // type 错误类型
        // geoJson 非字符串
        // 绘制多边形失败后
        // type =0  请绘制地块后在进行保存操作
        // 1 多边形不合法
          console.log(obj);
      },
       mapClick(e){
        // e 返回的是图层Id
      },
    }
  };
</script>

指令

main.js

import Vue from 'vue'
import * as directives from 'ryui-vue/src/directives';

Object.keys(directives).forEach((key) => {
  Vue.use(directives[key]);
});