ry-vue-map 0.0.1

package/.eslintrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  extends: ['plugin:vue/essential', 'eslint:recommended'],
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  rules: {}
+};

package/README.MD

@@ -0,0 +1,439 @@
+# ryvuemap
+![ryui-version](https://img.shields.io/badge/ryvuemap-0.0.1-green)
+> ry公共组件库
+
+
+## 更新日志
+
+## 安装
+```bash
+npm i ry-vue-map
+yarn add ry-vue-map
+```
+
+
+## 快速开始
+`main.js`
+
+```js
+import Vue from 'vue'
+import RyUI from 'ry-vue-map';
+
+Vue.use(RyUI)
+```
+## 组件
+
+#### 表格
+- `index.vue`
+
+```html
+<template>
+  <div class="ele-body">
+    <el-card>
+      <ry-query
+        :queryArgs="queryArgs"
+        @load="load"
+        @submit="query"
+        @reset="
+          () => {
+            where = {};
+          }
+        "
+      >
+      </ry-query>
+    </el-card>
+    <el-card>
+      <ry-table :url="url" :columns="columns" :where="where" @loadingSuccessCallback="loadingSuccessCallback($event)" >
+        <template #status="{ row }">
+          {{ row.status ? '在线' : '离线' }}
+        </template>
+      </ry-table>
+    </el-card>
+  </div>
+</template>
+
+<script>
+  import { columnFactory } from 'ry-form-create';
+  import { QueryArgs, Column } from './model';
+  export default {
+    name: 'Table',
+    data() {
+      return {
+        queryArgs: new QueryArgs(),
+        where: {},
+        columns: columnFactory(new Column()),
+        url: [
+          { no: 1, name: '1', status: true },
+          { no: 2, name: '2', status: true }
+        ]
+      };
+    },
+    methods: {
+      load(ruleMap) {
+        ruleMap.get('projectTaskId').setOptinos = tasks;
+        ruleMap.get('areaCode').setOptinos = districts;
+      },
+      query(form) {
+        this.where = { ...form };
+      },
+      // 数据加载成功后回调
+      loadingSuccessCallback(datas){
+        console.log(datas);
+      }
+    }
+  };
+</script>
+```
+- `model.js`
+
+```js
+import { formType, column } from 'ry-form-create';
+
+const col = {
+  xs: 12,
+  sm: 12,
+  md: 8,
+  lg: 8,
+  xl: 8
+};
+
+const wrap = {
+  labelWidth: '80px'
+};
+
+const style = {
+  width: '100%'
+};
+
+const options = [
+  {
+    value: 1,
+    label: '小鸟有限公司'
+  },
+  {
+    value: 2,
+    label: '大地有限公司'
+  },
+  {
+    value: 3,
+    label: '东方有限公司'
+  }
+];
+
+export class QueryArgs {
+  @formType({ title: '关键字', prefix: '前缀', suffix: '后缀', col, wrap, style: { width: '70%', margin: '0 5px' } })
+  keywords = '';
+  @formType({ type: 'daterange', title: '创建日期', col, wrap, style })
+  date = '';
+  @formType({ type: 'select', title: '主体', options, col, wrap, style })
+  name = '';
+}
+
+
+export class Column {
+  @column({ label: '编号' })
+  no;
+  @column({ label: '名称' })
+  name;
+  @column({ label: '在线状态', minWidth: 160, slot: 'status' })
+  status;
+  @column({ label: '操作', minWidth: 200, slot: 'action', fixed: 'right' })
+  action;
+}
+```
+
+#### 图片上传
+
+- `upload/index.vue`
+```html
+<template>
+  <div class="ele-body">
+    <ry-upload
+      multiple
+      :file-list="[
+        {
+          id:1,
+          url:'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg'
+        }
+      ]"
+      @handlerSuccess="handlerSuccess"
+      @afterRemove="afterRemove"
+      :limit="3"
+      themeColor="pink"
+      gap="20px"
+      text="上传图片">
+    </ry-upload>
+  </div>
+</template>
+
+<script>
+  import RyUpload from '@/components/upload';
+  export default {
+    name: 'upload',
+    components: {
+      RyUpload
+    },
+    methods: {
+      handlerSuccess(file) {
+        console.log(file)
+      },
+      afterRemove({afterList, current}) {
+        console.log(afterList, current)
+      }
+    }
+  };
+</script>
+```
+
+- 属性列表
+
+|  属性   | 说明  | 类型 | 默认值 |
+|  ----  | ----  | ---- | ---- |
+| fileList  | 图片列表,数组格式 [{id:string,url:string}] | Array |  [ ]       |
+| gap  | 上传图片列表之间的间距 | String | '10px' |
+| multiple | 是否支持多选文件, 同 el-upload 的属性 |Boolean|false|
+|fileSize|单个上传文件大小限制|Number|5|
+|limit|限制传入个数|Number|9|
+|fileType|上传类型|Array|['jpg', 'png', 'gif', 'jpeg']|
+|url|上传路径|[Boolean, String]|false|
+|isCustomText|是否自定义文本|Boolean|false|
+|unit|上传单位(支持KB，MB，GB),大小写不敏感|String|MB|
+|isTip|是否显示提示|Boolean|false|
+|width|宽度|Number|200|
+|height|高度|Number|200|
+|themeColor|主题颜色|String|rgba(102, 151, 77,.8)|
+|text|显示的上传文字|String|' '|
+|type|上传格式可选file|String|image|
+|@handlerSuccess|验证成功钩子函数,(file)=>{}|Function||
+|@afterRemove|删除后的回调({afterList, current})=>{afterList是删除后的列表，current是当前删除数据}|Function|
+
+#### RyMap
+`map/index.vue`
+```html
+<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`
+
+```js
+import Vue from 'vue'
+import * as directives from 'ry-vue-map/src/directives';
+
+Object.keys(directives).forEach((key) => {
+  Vue.use(directives[key]);
+});
+```

package/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@vue/cli-plugin-babel/preset']
+};

package/jsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "experimentalDecorators": true
+  },
+  "exclude": ["node_modules", "dist"]
+}

package/lib/demo.html

@@ -0,0 +1,10 @@
+<meta charset="utf-8">
+<title>ryui demo</title>
+<script src="./ryui.umd.js"></script>
+
+<link rel="stylesheet" href="./ryui.css">
+
+
+<script>
+console.log(ryui)
+</script>