Vue嵌入krpano（二）添加热点_vue-hotspot

前端对krpano全景图添加热点有两种方式，一种是修改xml文件添加hotsport，第二种是通过js操作
前情提要，html部分不再赘述

vue中krpano添加热点

在xml中添加热点

在tour.xml文件中找到<scene>，在其中添加<hotspot/>

// tour.xml
<scene ...> // 一般scene标签体内有很多配置项，此处不赘诉
	// 也可以换成自己喜欢的图标
	<hotspot name="按需" url="skin/vtourskin_hotspot.png"/>
</scene>
1
2
3
4
5

在vue中添加热点

// vue2
<script>
export default {
	data() {
		return {
			krpano: null
		}
	},
	mounted() {
		embedpano({
            swf:"/static/vtour/tour.swf",
            xml:"/static/vtour/tour.xml",
            target:"pano",
            html5:"auto",
            mobilescale:1.0,
            passQueryParameters:true,
            onready: this.krpanoOnready,
        })
	},
	methods: {
		krpanoOnready(krpano_interface) {
			this.krpano = krpano_interface
		},
		addHotsport() {
			if (this.krpano) {
				let h = this.krpano.get('view.hlookat') // 水平视角
	            let v = this.krpano.get('view.vlookat') // 垂直视角
	            let hs_name = "hs" + ((Date.now() + Math.random()) | 0) // 多次点击增加热点，每个热点的名字
				// call(action)调用并执行krpano操作代码，此处为addhotsport
	            this.krpano.call("addhotspot(" + hs_name + ")");
	            // set(variable, value)，将krpano变量设置为给定值，为hotsport设置url
	            this.krpano.set("hotspot["+hs_name+"].url", "/static/vtour/skin/vtourskin_hotspot.png");
	            // 设置坐标
	            this.krpano.set("hotspot["+hs_name+"].ath", h);
	            this.krpano.set("hotspot["+hs_name+"].atv", v);
	            // 设置热点是否跟随场景进行3D扭曲
	            this.krpano.set("hotspot["+hs_name+"].distorted", true);
	            // 热点点击事件
	            if ( this.krpano.get("device.html5") ) {
	                // 对于HTML5，可以将JS函数直接分配给krpano事件
	                this.krpano.set("hotspot["+hs_name+"].onclick", function(hs) {
	                   alert('hotspot "' + hs + '" clicked');
	                }.bind(null, hs_name));
		        } else {
	                // 对于Flash，需要使用js（）操作从Flash调用js（此代码适用于Flash和HTML5）
	                this.krpano.set("hotspot["+hs_name+"].onclick", "js( alert(calc('hotspot \"' + name + '\" clicked')) );");
		        }
			}
		}
	}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

// vue3
<script setup>
	import { ref, onMounted } from 'vue'
	let krpano = ref(null)
    const krpanoOnready = krpano_interface => {
        krpano.value = krpano_interface
    }
    const addHotspot = () => {
        if (krpano) {
            let h = krpano.value.get('view.hlookat')
            let v = krpano.value.get('view.vlookat')
            let hs_name = "hs" + ((Date.now() + Math.random()) | 0)

            krpano.value.call("addhotspot(" + hs_name + ")");
            krpano.value.set("hotspot["+hs_name+"].url", "/static/vtour/skin/vtourskin_hotspot.png");
            krpano.value.set("hotspot["+hs_name+"].ath", h);
            krpano.value.set("hotspot["+hs_name+"].atv", v);
            krpano.value.set("hotspot["+hs_name+"].distorted", true);

            if ( krpano.value.get("device.html5") ) {
                krpano.value.set("hotspot["+hs_name+"].onclick", function(hs) {
                    alert('hotspot "' + hs + '" clicked');
                }.bind(null, hs_name));
            } else {
                krpano.value.set("hotspot["+hs_name+"].onclick", "js( alert(calc('hotspot \"' + name + '\" clicked')) );");
            }
        }
    }
    onMounted(() => {
        embedpano({
            swf:"/static/vtour/tour.swf",
            xml:"/static/vtour/tour.xml",
            target:"pano",
            html5:"auto",
            mobilescale:1.0,
            passQueryParameters:true,
            onready: krpanoOnready,
        })
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

移除热点

可以通过xml文件中
删除或注释<hotspot/>来移除热点，也可以通过操作js来移除热点

// embedpano()与krpano上方有，不再浪费篇幅
// vue2
methods: {
	removeHotspot() {
        if (this.krpano) {
            this.krpano.call("loop(hotspot.count GT 0, removehotspot(0) );");
        }
    }
}

/** call(action)调用并执行krpano操作代码 */
/** loop(条件，操作) 条件为真会重复调用/执行 */
/** hotsport.count 热点个数； GT 表达式，大于*/

// vue3
const removeHotspot = () => {
	if (krpano) {
	    krpano.value.call("loop(hotspot.count GT 0, removehotspot(0) );");
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

krpano-interface对象提供了以下js函数

hotspot常用参数

创建/添加热点、删除热点

addhotspot(name, varname*) removehotspot(name)