ry-vue-map 0.5.0 → 0.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ry-vue-map",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "private": false,
   "main": "lib/ryui.umd.min.js",
   "description": "ry公共组件库",
@@ -45,7 +45,7 @@
     "kml-to-geojson": "^1.0.13",
     "nprogress": "~0.2.0",
     "ol": "^6.14.1",
-    "ry-map": "^0.4.8",
+    "ry-map": "^0.4.9",
     "vue": "~2.6.14",
     "vue-demi": "^0.13.11",
     "vue-router": "~3.5.2",

package/src/components/maps/ryMap/src/index.vue

@@ -11,6 +11,8 @@
 			:hidePoint="hidePoint" :hideCancel="hideCancel" :hideDelete="hideDelete" :hideSave="hideSave"
 			:hideLine="hideLine" :hideArea="hideArea" :isSwitchMap="isSwitchMap" :isSwitchMapRight="isSwitchMapRight"
 			:gpsType="lastMapType" @loadDrawPolygonEvent="loadDrawPolygonEvent($event)" @success="drawSuccess($event)"
+			@drawPolygonEvent="drawPolygonEvent($event)"
+			@drawLineEvent="drawLineEvent($event)"
 			@error="drawError($event)">
 			<template>
 				<slot name="maptool"></slot>
@@ -243,6 +245,12 @@
 			drawError(obj) {
 				this.$emit('drawError', obj);
 			},
+			drawPolygonEvent(obj){
+				this.$emit('drawPolygonEvent',obj);
+			},
+			drawLineEvent(obj){
+				this.$emit('drawLineEvent',obj);
+			},
 			_mapClickOnce(isBinClick = false) {
 				if (!this.mapClick) {
 					this.mapClick = evt => {

package/src/components/maps/ryMapTool/src/index.vue

@@ -17,9 +17,9 @@
       </aside>
 
       <aside class="map-control" v-if="isShowRangingTool" style="margin-left: 60px;">
-       <el-button v-if="!hideLine" class="ele-text-primary el-icon--changdu" @click.stop="lMap.onCreateLine()">
+       <el-button v-if="!hideLine" class="ele-text-primary el-icon--changdu" @click.stop="onCreateLine()">
        </el-button>
-       <el-button v-if="!hideArea" class="ele-text-primary  el-icon--mianji" @click.stop="lMap.onCreateArea()">
+       <el-button v-if="!hideArea" class="ele-text-primary  el-icon--mianji" @click.stop="onCreateArea()">
        </el-button>
       </aside>
     </template>
@@ -27,9 +27,9 @@
 
     <template v-else>
       <aside class="map-control" v-if="isShowRangingTool" style="  margin-right: 60px;">
-        <el-button v-if="!hideLine" class="ele-text-primary el-icon--changdu" @click.stop="lMap.onCreateLine()">
+        <el-button v-if="!hideLine" class="ele-text-primary el-icon--changdu" @click.stop="onCreateLine()">
         </el-button>
-        <el-button v-if="!hideArea" class="ele-text-primary  el-icon--mianji" @click.stop="lMap.onCreateArea()">
+        <el-button v-if="!hideArea" class="ele-text-primary  el-icon--mianji" @click.stop="onCreateArea()">
         </el-button>
       </aside>
 
@@ -57,7 +57,8 @@
   import MapToolDto from './../../models/ryMapTool/mapTool.js';
   import {
     fitNew,
-    GPS
+    GPS,
+    generateGuid
   } from 'ry-map';
   export default {
     name: 'RyMapTool',
@@ -267,6 +268,18 @@
         if(!this.lMap) return;
          this.lMap.onCancel();
       },
+      onCreateLine(){
+         let draw =  this.lMap.onCreateLine((id,type) => {
+            this.$emit('drawLineEvent',{draw,id,type});
+         });
+         draw.Id=generateGuid();
+      },
+      onCreateArea(){
+         let draw = this.lMap.onCreateArea((id,type) => {
+               this.$emit('drawPolygonEvent',{draw,id,type});
+         });
+         draw.Id=generateGuid();
+      },
       selectGPSAll(type){
         this.lMap.removeDrawArr();
         if(this.drawPolygon){

package/src/utils/Overlay.js

@@ -0,0 +1,193 @@
+export class Overlay {
+  constructor(cesium) {
+    if (!Overlay.instance) {
+      this.call = null;
+      this._viewer = null;
+      this.markers = new Set();
+      this.cesium = cesium;
+      this._isBinEvent = false;
+      Overlay.instance = this;
+      this.call = () => {
+        this.callback();
+      };
+    }
+
+    return Overlay.instance;
+  }
+
+  set setViewer(viewer) {
+    this._viewer = viewer;
+  }
+
+  callback() {
+    const scene = this._viewer.scene;
+    this.markers.forEach((marker) => {
+      const windowCoord = this.cesium.SceneTransforms.wgs84ToWindowCoordinates(
+        scene,
+        this.cesium.Cartesian3.fromDegrees(...marker.getCenter, 0)
+      );
+      if (!windowCoord || !windowCoord.x || !windowCoord.y || !marker.isShow)
+        return;
+      const left =
+        windowCoord.x - marker.getDom.offsetWidth / 2 + marker.offset[0];
+      const top = windowCoord.y - marker.getDom.offsetHeight + marker.offset[1];
+      const dom = marker.getDom;
+      dom.style.left = `${left}px`;
+      dom.style.top = `${top}px`;
+    });
+  }
+
+  addEventListener() {
+    if (this._isBinEvent) return;
+    this._isBinEvent = true;
+    const scene = this._viewer.scene;
+    scene.postRender.addEventListener(this.call);
+  }
+
+  removeEventListener() {
+    if (!this._isBinEvent) return;
+    this._isBinEvent = false;
+    const scene = this._viewer.scene;
+    scene.postRender.removeEventListener(this.call);
+  }
+
+  add(overlay) {
+    if (!this.markers.has(overlay)) {
+      this.markers.add(overlay);
+      this._viewer.container.appendChild(overlay.getDom);
+    }
+    if (this.markers.size) {
+      this.addEventListener();
+    }
+  }
+
+  remove(overlay) {
+    if (this.markers.has(overlay)) {
+      this.markers.delete(overlay);
+      this._viewer.container.removeChild(overlay.getDom);
+    }
+
+    if (!this.markers.size) {
+      this.removeEventListener();
+    }
+  }
+  clearOverlay() {
+    this.markers.forEach((overlay) => this.remove(overlay));
+  }
+}
+
+export default class MarkerBase {
+  constructor(opt) {
+    this.id = opt.id;
+    this.center = opt.center;
+    this.style = opt.style;
+    this.ele = document.createElement('div');
+    this._show = true;
+    this.offset = opt.offset || [0, 0];
+    this.init();
+  }
+
+  init() {
+    this.crateOverlay();
+    this.show();
+  }
+
+  crateOverlay() {
+    this.ele = document.createElement('div');
+    this.setStyle = this.style;
+    this.ele.id = this.id;
+  }
+
+  hide() {
+    this.ele.style.display = 'none';
+    this._show = false;
+  }
+
+  show() {
+    // this.ele.style.display = 'block';
+    this.ele.style.display = 'flex';
+    this._show = true;
+  }
+
+  get getCenter() {
+    return this.center;
+  }
+
+  get getDom() {
+    return this.ele;
+  }
+
+  _setStyle(styles) {
+    styles = styles.split(';').filter((r) => r !== '');
+    styles.forEach((item) => {
+      const _styles = item.split(':');
+      if (_styles.length == 2) {
+        this.ele.style.setProperty(..._styles);
+      }
+    });
+  }
+
+  set setStyle(style) {
+    this._setStyle(`position:absolute;${style}`);
+  }
+
+  get isShow() {
+    return this._show;
+  }
+
+  setIndex(zIndex = 10) {
+    this.ele.style.zIndex = zIndex;
+  }
+
+  setAttribute(options) {
+    const data = JSON.stringify(options);
+    this.ele.setAttribute('data-op', data);
+  }
+
+  getAttribute() {
+    var _a;
+    const json =
+      (_a = this.ele.dataset.op) === null || _a === void 0
+        ? void 0
+        : _a.toString();
+    return JSON.parse(json);
+  }
+
+  setText(text) {
+    this.ele.innerText = text;
+  }
+
+  setId(id) {
+    this.ele.id = id;
+  }
+
+  getId() {
+    return this.ele.id;
+  }
+
+  setOffset(offset) {
+    this.offset = offset;
+  }
+
+  get getOffset() {
+    return this.offset;
+  }
+
+  binEvent(event, fun) {
+    this._fun = fun;
+    this.ele.addEventListener(event, this._fun, false);
+  }
+
+  setPosition(center) {
+    this.center = center;
+  }
+
+  hover(fnOver, fnOut) {
+    if (fnOver) {
+      this.ele.addEventListener('mouseover', fnOver, false);
+    }
+    if (fnOut) {
+      this.ele.addEventListener('mouseout', fnOut, false);
+    }
+  }
+}

package/src/utils/lMapServices.js

@@ -393,30 +393,23 @@ export default class LMapServices {
 		return this._lPolygon.getGeoJson();
 	}
 
-	onCreateLine() {
+	onCreateLine(callback) {
 		if (this.map) {
-			let drawLine = new LDraw(
-				'LineString',
-				(e) => {
-					// let arrs = e.feature.getGeometry().getCoordinates();
-					// let tooltipCoord = e.coordinate;
-					// const obj = {
-					//   pointArr: arrs,
-					//   color: '#000',
-					//   width: 2
-					// };
-					// new Polyline(obj, this.map);
-				},
-				this.map
-			);
+			let drawLine = new LDraw('LineString',callback,this.map);
 			this.drawLineArr.add(drawLine);
+			return drawLine;
 		}
+		return null;
 	}
 
-	onCreateArea() {
+	onCreateArea(callback) {
+		console.log(callback);
 		if (this.map) {
-			this.drawPolygonArr.add(new LDraw('Polygon', (e) => {}, this.map));
+			let draw =  new LDraw('Polygon', callback, this.map);
+			this.drawPolygonArr.add(draw);
+			return draw;
 		}
+		return null;
 	}
 
 	removeDrawArr() {

package/src/utils/mapPopover/index.js

@@ -0,0 +1,2 @@
+import LPopover from './lPopover';
+export { LPopover };

package/src/utils/mapPopover/lPopover.js

@@ -0,0 +1,76 @@
+import { LOverlay } from 'ry-map';
+export default class LPopover extends LOverlay {
+  static _options() {
+    return {
+      size: 15,
+      color: 'rgba(0,0,0,.6)',
+      isHide: true,
+      isArrow: false,
+      isClose: true
+    };
+  }
+  constructor(html, options = {}) {
+    super();
+    const o = { ...LPopover._options(), ...options };
+    o.isHide && (this.ele.style.display = 'none');
+    o.isArrow && this.ele.append(this.createAside(o));
+    o.isClose && this.ele.append(this.createCloseElement());
+    this.init(html);
+  }
+  init(html) {
+    const container = document.createElement('div');
+    container.id = 'popover-container';
+    this.ele.append(container);
+    container.innerHTML = html;
+    this.addEvent('.close', () => this.hide());
+  }
+  createAside(options) {
+    const aside = document.createElement('aside');
+    aside.style.border = `${options.size}px solid transparent`;
+    aside.style.borderTop = `${options.size}px solid ${options.color}`;
+    aside.style.position = 'absolute';
+    aside.style.bottom = `-${options.size * 2 - 2}px`;
+    aside.style.left = `calc(50% - ${options.size}px)`;
+    return aside;
+  }
+
+  createCloseElement() {
+    const aside = document.createElement('aside');
+    aside.append(document.createTextNode('x'));
+    aside.className = 'close';
+    aside.style.width = '18px';
+    aside.style.height = '18px';
+    aside.style.fontSize = '18px';
+    aside.style.position = 'absolute';
+    aside.style.top = '1px';
+    aside.style.right = '1px';
+    aside.style.color = '#fff';
+    aside.style.cursor = 'pointer';
+    return aside;
+  }
+  updateInnerHtml(html) {
+    const el = this.getElement('#popover-container');
+    el.innerHTML = html;
+  }
+  removeInnerHtml() {
+    const el = this.getElement('#popover-container');
+    el?.removeChild();
+  }
+  getElement(name) {
+    const el = this.ele.querySelector(name);
+    return el || '';
+  }
+  addEvent(select, cb, event = 'click') {
+    const elements = this.ele.querySelectorAll(select);
+    elements.forEach((v, index) => {
+      v.addEventListener(event, (e) => cb(e, index));
+    });
+  }
+  removeEvent(select, fun, event = 'click') {
+    const elements = this.ele.querySelectorAll(select);
+    elements.forEach((v, index) => {
+      v.removeEventListener(event, fun);
+    });
+  }
+  setHTMLElementStyle() {}
+}

package/src/utils/marker.js

@@ -0,0 +1,135 @@
+import { LOverlay } from 'ry-map';
+export class MarkerHeaderModel {
+  constructor(imgUrls = [], width = 50, height = 50) {
+    this.width = width;
+    this.height = height;
+    this.imgUrls = imgUrls;
+  }
+}
+
+export class MarkerContentModel {
+  constructor(
+    text = '',
+    color = '#fff',
+    backgroundColor = '#ff65f9',
+    marginTop = 2
+  ) {
+    this.text = text;
+    this.color = color;
+    this.backgroundColor = backgroundColor;
+    this.marginTop = marginTop;
+  }
+}
+
+export class MarkerBottomModel {
+  constructor(url, width = 24, height = 60, marginTop = 5) {
+    this.width = width;
+    this.height = height;
+    this.imgUrl = url;
+    this.marginTop = marginTop;
+  }
+}
+
+export default class Marker extends LOverlay {
+  constructor(
+    contentDto,
+    headerDto,
+    bottomDto = new MarkerBottomModel(require('@/assets/mgh.png'))
+  ) {
+    super();
+    this.contentDto = contentDto;
+    this.headerDto = headerDto;
+    this.bottomDto = bottomDto;
+    this.header = document.createElement('section');
+    this.content = document.createElement('p');
+    this.bottom = document.createElement('aside');
+    this._init();
+  }
+
+  setHTMLElementStyle() {}
+
+  _init() {
+    this.ele.style.width = 'max-content';
+    this.ele.style.display = 'flex';
+    this.ele.style.justifyContent = 'space-between';
+    this.ele.style.position = 'relative';
+    this.ele.style.textAlign = 'center';
+    this.ele.style.flexDirection = 'column';
+
+    this.header.style.display = 'inline-block';
+
+    this.content.style.paddingLeft = '3px';
+    this.content.style.paddingRight = '3px';
+    this.content.style.borderRadius = '3px';
+    this.content.style.height = '25px';
+    this.content.style.lineHeight = '25px';
+    this.content.style.textAlign = 'center';
+    this.content.style.color = this.contentDto.color;
+    this.content.style.fontSize = '14px';
+    this.content.style.display = 'inline-block';
+    this.content.style.backgroundColor = this.contentDto.backgroundColor;
+    this.content.style.marginTop = `${this.contentDto.marginTop}px`;
+    this.setText(this.contentDto.text);
+
+    this.bottom.style.height = '60px';
+    this.bottom.style.textAlign = 'center';
+    this.bottom.style.display = 'inline-block';
+
+    if (this.headerDto) {
+      this._initHeaderImgs(this.headerDto);
+    }
+
+    if (this.bottomDto) {
+      this.bottom.style.marginTop = `${this.bottomDto.marginTop}px`;
+      this._intBottomImt(this.bottomDto);
+    }
+
+    this.ele.appendChild(this.header);
+    this.ele.appendChild(this.content);
+    this.ele.appendChild(this.bottom);
+  }
+
+  _initHeaderImgs(dto) {
+    dto.imgUrls.forEach((r, index) => {
+      const img = document.createElement('img');
+      img.src = r;
+      img.style.width = `${dto.width}px`;
+      img.style.height = `${dto.height}px`;
+      if (index !== 0) {
+        img.style.marginLeft = '5px';
+      }
+      this.header.appendChild(img);
+    });
+  }
+
+  _intBottomImt(dto) {
+    const img = document.createElement('img');
+    img.style.width = `${dto.width}px`;
+    img.style.height = `${dto.height}px`;
+    img.src = dto.imgUrl;
+    this.bottom.appendChild(img);
+  }
+
+  setText(text) {
+    this.contentDto.text = text;
+    this.content.innerHTML = text;
+  }
+
+  setTestColor(color = '#fff') {
+    this.contentDto.color = color;
+    this.content.style.color = color;
+  }
+
+  setBackgroundColor(color = ' #ff65f9') {
+    this.content.backgroundColor = color;
+    this.content.style.backgroundColor = color;
+  }
+
+  get width() {
+    return this.content.offsetWidth;
+  }
+
+  get height() {
+    return this.ele.offsetHeight;
+  }
+}