MS

2019-03-05 本文已影响0人 A郑家庆

海陵PC

ppMap

1.首先在index.html中引入minemap.js和minemap.css
2.然后在画地图的页面初始化地图，比如设置它的底图样式，中心点坐标，放大倍数等等。
3.打点：点位就是一个div，利用

let el = document.createElement('div')
el.setAtrribute('id', id)
el.style.height = '26px'
el.style.width = '26px'
el.style.backgroundImage = `${imageUrl}`
// 打点
let makeObj = new minemap.Marker(el)
makeObj.setLngLat([x, y]).addTo(this.map)

来画一个div也就是点位。

海康视频

<iframe :src="myUrl" v-show="myUrl"></iframe>

点击点位坐标调用海康接口，拿到的信息拼接到固定的url上，将url传入iframe就可以正常展示了。

Websocket

https://www.jianshu.com/p/68066fa56324

WP

右键组件

<vue-context-menu :contextMenuData="contextMenuData" 
@onRemove="onRemove"></vue-context-menu>

contextMenuData这个属性用来定义右键显示出来的按钮，并且会触发@contextmenu事件，当我点击显示出来的按钮的时候，又会触发onRemove事件。

拖拽

draggable：如果为true则为可拖拽，否则为不可拖拽。
dragstart：当用户开始拖动一个元素时触发。
drag：当拖动元素时触发。
dragover：当元素或选中的文本被拖到一个可释放目标上时触发（每100毫秒触发一次）。
drop：当元素或选中的文本在可释放目标上被释放时触发。
注意：触发dragstart事件后，随即会触发drag事件，而在元素被拖动期间会持续触发drag事件。这个事件与mousemove和touchmove事件类似。本元素拖拽到其他元素上，拖的时候触发的是自身的drag事件，但是释放的时候触发的是其他元素的drop事件。