Bing Maps--官方插件--krpano教程

领主 2015-10-23 krpano学院 0 喜欢 (0)

插件说明：

•Bing地图插件，实现增加了一个互动的Bing地图查看器.
•插件可以放于屏幕任意位置.
•可以在地图上增加热点，并点击通过点击热点跳转到指定的全景场景.
•热点整合自定义热点雷达功能.
•'Google Maps' 风格的控制键功能已经在最新版本添加.
•新版本实现对地图控件、热点的动态添加和删除.
•krpano 的Bing Maps 的Flash插件是基于OpenScales开发.
•XML版本的插件和swf、js版本插件功能几乎一致.
•本插件需要购买官方授权码才能正常使用，否则地图有水印.

语法：

<plugin name="map"
        url.flash="bingmaps.swf"
        url.html5="bingmaps.js"
        align="leftbottom" width="400" height="300" x="0" y="0"
        keep="true"
        key="...your Bing Maps API key..."
        maptype="satellite"
        culturecode=""
        lat="..."
        lng="..."
        zoom="1"
        activespotenabled="false"
        bgcolor="0x000000" bgalpha="0.0"
        onmapready=""
        onmaptypechanged=""
        onmapmoved=""
        onmapzoomed=""
>
  <spotstyle name="style1" ... />
  ...
  
  <spot name="spot1" ... active="true" />
  <spot name="spot2" ... />
  <spot name="spot3" ... />
  ...
  
  <radar visible="true" ... />
  
  <positioncontrol visible="false" ... />
  <zoomcontrol     visible="false" ... />
  <maptypecontrol  visible="false" ... />
</plugin>

<plugin name="map"

url.flash="bingmaps.swf"

url.html5="bingmaps.js"

align="leftbottom" width="400" height="300" x="0" y="0"

keep="true"

key="...your Bing Maps API key..."

maptype="satellite"

culturecode=""

lat="..."

lng="..."

zoom="1"

activespotenabled="false"

bgcolor="0x000000" bgalpha="0.0"

onmapready=""

onmaptypechanged=""

onmapmoved=""

onmapzoomed=""

...

...

</plugin>

插件属性：

•key
//bing地图的api秘钥
//该key可以在这里获取：https://www.bingmapsportal.com/
•maptype 
//地图显示类型
   ◦satellite (默认)
    卫星地图	
   ◦normal
    普通地图
   ◦hybrid
    鸟瞰图

•culturecode
//默认语言代码
◦flash代码，
这地址查获：http://msdn.microsoft.com/en-us/library/gg427600.aspx
◦html5代码，
这地址查获：http://msdn.microsoft.com/en-us/library/hh441729.aspx

•lat / lng
//默认当前地图的经纬度
//bing地图获取地址：http://www.doogal.co.uk/VELatLong.php,领主tips:不一定在bing地图获取，可以在其他地图或软件获取也行

•zoom
//bing地图的缩放级别，1-25级

•activespotenabled
//设置地图上热点是否支持点击事件

•maphandcursor (Flash only)
//设置是否鼠标光标移动到地图上时变成小手符号

•dragging (Flash only)
//设置是否地图支持鼠标拖动

•scrollwheel (Flash only)
//设置是否地图支持鼠标滚轮缩放

•dbclicking (Flash only)
//设置是否支持鼠标双击地图放大

•bgcolor / bgalpha
//地图背景的颜色和透明度

•mapsapi (HTML5 only)
//可以使用bing地图的其他api打开地图的url
例如，
◦http形式
http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0
◦https形式：
https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&s=1

•key

//bing地图的api秘钥

//该key可以在这里获取：https://www.bingmapsportal.com/

•maptype

//地图显示类型

◦satellite (默认)

卫星地图

◦normal

普通地图

◦hybrid

鸟瞰图

•culturecode

//默认语言代码

◦flash代码，

这地址查获：http://msdn.microsoft.com/en-us/library/gg427600.aspx

◦html5代码，

这地址查获：http://msdn.microsoft.com/en-us/library/hh441729.aspx

•lat / lng

//默认当前地图的经纬度

//bing地图获取地址：http://www.doogal.co.uk/VELatLong.php,领主tips:不一定在bing地图获取，可以在其他地图或软件获取也行

•zoom

//bing地图的缩放级别，1-25级

•activespotenabled

//设置地图上热点是否支持点击事件

•maphandcursor (Flash only)

//设置是否鼠标光标移动到地图上时变成小手符号

•dragging (Flash only)

//设置是否地图支持鼠标拖动

•scrollwheel (Flash only)

//设置是否地图支持鼠标滚轮缩放

•dbclicking (Flash only)

//设置是否支持鼠标双击地图放大

•bgcolor / bgalpha

//地图背景的颜色和透明度

•mapsapi (HTML5 only)

//可以使用bing地图的其他api打开地图的url

例如，

◦http形式

http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0

◦https形式：

https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&s=1

插件属性事件：

•onmapready
◦设置当地图准备好被调用是执行的动作.

•onmaptypechanged
◦设置当地图被改变显示类型时执行的动作，如卫星改为普通.

•onmapmoved
◦设置当地图被拖动时执行的动作.

•onmapzoomed
◦设置地图被缩放时执行的动作.

•onmapready

◦设置当地图准备好被调用是执行的动作.

•onmaptypechanged

◦设置当地图被改变显示类型时执行的动作，如卫星改为普通.

•onmapmoved

◦设置当地图被拖动时执行的动作.

•onmapzoomed

◦设置地图被缩放时执行的动作.

插件节点- <spotstyle>：

• <spotstyle> 用于定义地图上热点的样式.
• <spotstyle>如果name使用DEFAULT，即调用系统默认样式，例如:
<spotstyle name="DEFAULT"
           url=""
           overurl=""
           activeurl=""
           edge="center"
           x="0"
           y="0"
           scale="1.0"
           />


<spotstyle> 属性：
◦name
◾热点属性名称

◦url
◾热点图片路径.
如果不定义就默认显示蓝色小点图片.

◦overurl
◾当鼠标移上热点显示的图片路径.
如果不定义就默认显示蓝色小点图片.

◦activeurl
◾当热点已被点击或已跳转到该热点对应场景时显示的图片路径.
如果不定义就默认显示蓝色小点图片.

◦edge
◾热点对齐的基准边界，和layer的edge对齐方式一致.
 可用值: lefttop, left, leftbottom, top, center, bottom, righttop, right, rightbottom.

◦x / y
◾偏移坐标.

◦scale
◾热点缩放程度.

• <spotstyle> 用于定义地图上热点的样式.

• <spotstyle>如果name使用DEFAULT，即调用系统默认样式，例如:

<spotstyle name="DEFAULT"

url=""

overurl=""

activeurl=""

edge="center"

x="0"

y="0"

scale="1.0"

<spotstyle> 属性：

◦name

◾热点属性名称

◦url

◾热点图片路径.

如果不定义就默认显示蓝色小点图片.

◦overurl

◾当鼠标移上热点显示的图片路径.

如果不定义就默认显示蓝色小点图片.

◦activeurl

◾当热点已被点击或已跳转到该热点对应场景时显示的图片路径.

如果不定义就默认显示蓝色小点图片.

◦edge

◾热点对齐的基准边界，和layer的edge对齐方式一致.

可用值: lefttop, left, leftbottom, top, center, bottom, righttop, right, rightbottom.

◦x / y

◾偏移坐标.

◦scale

◾热点缩放程度.

插件节点- <spot>：

•热点 <spot>标签的定义.
•热点等于一个layer或按钮，可以跳转全景或执行动作.

<spot>定义样例 :

<spot name="..."
      spotstyle="DEFAULT"
      url="..."
      lat="..."
      lng="..."
      heading="0"
      active="false"
      onover=""
      onhover=""
      onout=""
      onclick=""
      />

<spot>属性：
•name
◦地图上热点名称.

•spotstyle
◦spotstyle的名称.

•url
◦热点图片路径，只有在没有定义spotstyle的情况下才会生效.

•lat / lng
◦经纬度（获取方法见上文）

•heading
◦定义全景目前水平方向角度，用于雷达方向定位.

•active
◦热点是否被激活，激活即当前场景对应当前热点，雷达也会跳到该热点上.
◦也可以用activatespot()动作激活.


<spot> 事件
•onover
◦设置当鼠标移过热点上方执行的动作.
•onhover
◦设置当鼠标移动到热点上方停留执行的动作. 
•onout
◦设置当鼠标移出热点范围执行的动作. 
•onclick
设置当鼠标点击热点时的动作. 


<spot> 动作
•activatespot()
◦设置为当前热点.

•pantospot()
◦设置当前热点为地图显示区域的中心点.

•getstagepos(xvar,yvar) (Flash only)
◦获取热点位置坐标.

•热点 <spot>标签的定义.

•热点等于一个layer或按钮，可以跳转全景或执行动作.

<spot>定义样例 :

<spot name="..."

spotstyle="DEFAULT"

url="..."

lat="..."

lng="..."

heading="0"

active="false"

onover=""

onhover=""

onout=""

onclick=""

<spot>属性：

•name

◦地图上热点名称.

•spotstyle

◦spotstyle的名称.

•url

◦热点图片路径，只有在没有定义spotstyle的情况下才会生效.

•lat / lng

◦经纬度（获取方法见上文）

•heading

◦定义全景目前水平方向角度，用于雷达方向定位.

•active

◦热点是否被激活，激活即当前场景对应当前热点，雷达也会跳到该热点上.

◦也可以用activatespot()动作激活.

<spot> 事件

•onover

◦设置当鼠标移过热点上方执行的动作.

•onhover

◦设置当鼠标移动到热点上方停留执行的动作.

•onout

◦设置当鼠标移出热点范围执行的动作.

•onclick

设置当鼠标点击热点时的动作.

<spot> 动作

•activatespot()

◦设置为当前热点.

•pantospot()

◦设置当前热点为地图显示区域的中心点.

•getstagepos(xvar,yvar) (Flash only)

◦获取热点位置坐标.

插件节点 - <radar>：

•增加热点上的雷达.
•雷达只在当前热点出现.
•<radar>代码样例：
<radar visible="true"
       dragable="true"
       size="100"
       zoomwithmap="false"
       headingoffset="90"
       alpha="0.5"
       fillcolor="0xFFFFFF"
       fillalpha="1.0"
       linewidth="0.0"
       linecolor="0xFFFFFF"
       linealpha="0.0"
       glow="true"
       glowcolor="0xFFFFFF"
       glowwidth="4"
       glowstrength="4"
       />


<radar> 属性
◦visible
◾设置雷达隐藏或显示.

◦dragable
◾是否支持鼠标拖动，改变雷达方向，当然，全景场景也跟随转动

◦size
◾雷达扇面大小.

◦zoomwithmap
◾是否随着地图缩放而缩放

◦headingoffset
◾雷达角度的偏移量.
◾默认是90, 默认是3点钟方向，偏移90即是逆时针转90度，指到12点钟，正北方向.

◦alpha
◾透明度设置.

◦fillcolor / fillalpha
◾填充颜色和填充透明度.

◦linewidth / linecolor / linealpha
◾雷达边框宽度、边框颜色、边框透明度.

◦glow / glowcolor / glowwidth / glowstrength (Flash only)
◾雷达描边效果.

•增加热点上的雷达.

•雷达只在当前热点出现.

•<radar>代码样例：

<radar visible="true"

dragable="true"

size="100"

zoomwithmap="false"

headingoffset="90"

alpha="0.5"

fillcolor="0xFFFFFF"

fillalpha="1.0"

linewidth="0.0"

linecolor="0xFFFFFF"

linealpha="0.0"

glow="true"

glowcolor="0xFFFFFF"

glowwidth="4"

glowstrength="4"

<radar> 属性

◦visible

◾设置雷达隐藏或显示.

◦dragable

◾是否支持鼠标拖动，改变雷达方向，当然，全景场景也跟随转动

◦size

◾雷达扇面大小.

◦zoomwithmap

◾是否随着地图缩放而缩放

◦headingoffset

◾雷达角度的偏移量.

◾默认是90, 默认是3点钟方向，偏移90即是逆时针转90度，指到12点钟，正北方向.

◦alpha

◾透明度设置.

◦fillcolor / fillalpha

◾填充颜色和填充透明度.

◦linewidth / linecolor / linealpha

◾雷达边框宽度、边框颜色、边框透明度.

◦glow / glowcolor / glowwidth / glowstrength (Flash only)

◾雷达描边效果.

地图控制：

•显示地图控制控件:
◦The Position Control - 简单控制地图移动控件. (Flash only)
◦The Zoom Control - 简单缩放控件. (Flash only)
◦The Map-Type Control - 选择地图类型控件.

Position Control: (Flash only)
<positioncontrol visible="true" align="lefttop" x="2" y="2" />

Zoom Control: (Flash only)
<zoomcontrol visible="true" align="righttop" x="2" y="2" 
             hasscrolltrack="true"
             />

Map-Type Control:
<maptypecontrol visible="true" align="rightbottom" x="2" y="2"
                buttonalign="H"
                buttontexts="Map|Satellite|Hybrid"
                scale="1.0"
                />


Control属性：
•visible
◦显示或隐藏控件.

•align
◦控件位于地图的位置定位，和layer的align原理一致.
可用值: lefttop, righttop, leftbottom, rightbottom.

•x / y
◦偏移量.

•zoomcontrol.hasscrolltrack
◦设置是否缩放控件.

•maptypecontrol.buttonalign
◦地图类型对齐按钮. 
◦可用值 "H" or "V"，水平对齐或垂直对齐.

•maptypecontrol.buttontexts (HTML5 only)
◦设置按钮类型文本.

•maptypecontrol.scale (HTML5 only)
◦按钮类型缩放.例如：
<maptypecontrol scale="1.5" buttonalign="V" devices="mobile" />

•显示地图控制控件:

◦The Position Control - 简单控制地图移动控件. (Flash only)

◦The Zoom Control - 简单缩放控件. (Flash only)

◦The Map-Type Control - 选择地图类型控件.

Position Control: (Flash only)

Zoom Control: (Flash only)

<zoomcontrol visible="true" align="righttop" x="2" y="2"

hasscrolltrack="true"

Map-Type Control:

<maptypecontrol visible="true" align="rightbottom" x="2" y="2"

buttonalign="H"

buttontexts="Map|Satellite|Hybrid"

scale="1.0"

Control属性：

•visible

◦显示或隐藏控件.

•align

◦控件位于地图的位置定位，和layer的align原理一致.

可用值: lefttop, righttop, leftbottom, rightbottom.

•x / y

◦偏移量.

•zoomcontrol.hasscrolltrack

◦设置是否缩放控件.

•maptypecontrol.buttonalign

◦地图类型对齐按钮.

◦可用值 "H" or "V"，水平对齐或垂直对齐.

•maptypecontrol.buttontexts (HTML5 only)

◦设置按钮类型文本.

•maptypecontrol.scale (HTML5 only)

◦按钮类型缩放.例如：

插件动作：

使用样例：
plugin[map].activatespot(spot1);
plugin[map].pantospot(spot1);

全部动作:
•activatespot
•addimagespot
•addspot
•addspotstyle
•addstylespot
•panby
•panto
•pantospot
•removeallspots
•removespot
•setcenter
•setmaptype
•setzoom
•zoomin
•zoomout
•zoomtospotsextent


Actions描述:
•activatespot(name)
◦指定跳转到那个热点.
◦跳转后为当前热点，雷达也跟随跳转.

•addimagespot(name, lat, lng, heading, spotstyle, url, onclick, onhover, onover, onout)
◦动态增加一个地图热点.
◦name = 增加热点的名称.
◦lat / lng = 经纬度.
◦heading = 全景首方向角度.
◦spotstyle = 热点属性.
◦url = 热点图片路径.
◦onclick, onhover, onover, onout = 鼠标点击事件. (可选)

•addspot(name, lat, lng, heading, active, onclick, onhover, onover, onout)
◦动态增加一个热点 (使用DEFAULT style，即不定义spotstyle参数).
◦name = 增加热点的名称. 
◦lat / lng = 经纬度. 
◦heading = 全景首方向角度. 
◦spotstyle = 热点属性. 
◦url = 热点图片路径. 
◦onclick, onhover, onover, onout = 鼠标点击事件. (可选)

•addspotstyle(name, url, overurl, activeurl, edge, x, y)
◦动态增加一个热点样式.
◦name = 样式名字.
◦url = 热点图片路径. (可选)
◦overurl = 鼠标移上后的热点图片路径. (可选)
◦activeurl = 点击后热点图片路径. (可选)
◦edge = 边界对齐方式. (可选)
◦x / y = 坐标偏移量. (可选)

•addstylespot(name, lat, lng, heading, spotstyle, active, onclick, onhover, onover, onout)
◦动态增加一个自定义热点样式的热点.
◦name = 增加热点的名称. 
◦lat / lng = 经纬度. 
◦heading = 全景首方向角度. 
◦spotstyle = 热点属性. 
◦url = 热点图片路径. 
◦onclick, onhover, onover, onout = 鼠标点击事件. (可选)

•panby(dx,dy)
◦移动到给定地图坐标.
◦dx / dy = 坐标值.

•panto(lat,lng)
◦移动到给定经纬度.
◦lat / lng = 经纬度的值.

•pantospot(name)
◦移动到给定指定热点.
◦name = 热点名称.

•removeallspots()
◦移除全部热点.

•removespot(name)
◦移除指定热点.
◦name = 热点名称.

•setcenter(lat,lng)
◦设置一个新的地图中心点.
◦lat / lng = 中心点经纬度.

•setmaptype(maptype)
◦选择一个地图类型.

•setzoom(zoom)
◦设置一个新的缩放层级.

•zoomin(lat, lng, center)
◦放大地图到中心点.
◦lat / lng = 经纬度. (可选)
◦zoom = 设置是否缩放到中心点. (可选)

•zoomout(lat, lng)
◦缩小地图.
◦lat / lng = 经纬度. (可选)

•zoomtospotsextent()
◦缩放时或移动时动态显示热点.

100

101

102

103

104

使用样例：

plugin[map].activatespot(spot1);

plugin[map].pantospot(spot1);

全部动作:

•activatespot

•addimagespot

•addspot

•addspotstyle

•addstylespot

•panby

•panto

•pantospot

•removeallspots

•removespot

•setcenter

•setmaptype

•setzoom

•zoomin

•zoomout

•zoomtospotsextent

Actions描述:

•activatespot(name)

◦指定跳转到那个热点.

◦跳转后为当前热点，雷达也跟随跳转.

•addimagespot(name, lat, lng, heading, spotstyle, url, onclick, onhover, onover, onout)

◦动态增加一个地图热点.

◦name = 增加热点的名称.

◦lat / lng = 经纬度.

◦heading = 全景首方向角度.

◦spotstyle = 热点属性.

◦url = 热点图片路径.

◦onclick, onhover, onover, onout = 鼠标点击事件. (可选)

•addspot(name, lat, lng, heading, active, onclick, onhover, onover, onout)

◦动态增加一个热点 (使用DEFAULT style，即不定义spotstyle参数).

◦name = 增加热点的名称.

◦lat / lng = 经纬度.

◦heading = 全景首方向角度.

◦spotstyle = 热点属性.

◦url = 热点图片路径.

◦onclick, onhover, onover, onout = 鼠标点击事件. (可选)

•addspotstyle(name, url, overurl, activeurl, edge, x, y)

◦动态增加一个热点样式.

◦name = 样式名字.

◦url = 热点图片路径. (可选)

◦overurl = 鼠标移上后的热点图片路径. (可选)

◦activeurl = 点击后热点图片路径. (可选)

◦edge = 边界对齐方式. (可选)

◦x / y = 坐标偏移量. (可选)

•addstylespot(name, lat, lng, heading, spotstyle, active, onclick, onhover, onover, onout)

◦动态增加一个自定义热点样式的热点.

◦name = 增加热点的名称.

◦lat / lng = 经纬度.

◦heading = 全景首方向角度.

◦spotstyle = 热点属性.

◦url = 热点图片路径.

◦onclick, onhover, onover, onout = 鼠标点击事件. (可选)

•panby(dx,dy)

◦移动到给定地图坐标.

◦dx / dy = 坐标值.

•panto(lat,lng)

◦移动到给定经纬度.

◦lat / lng = 经纬度的值.

•pantospot(name)

◦移动到给定指定热点.

◦name = 热点名称.

•removeallspots()

◦移除全部热点.

•removespot(name)

◦移除指定热点.

◦name = 热点名称.

•setcenter(lat,lng)

◦设置一个新的地图中心点.

◦lat / lng = 中心点经纬度.

•setmaptype(maptype)

◦选择一个地图类型.

•setzoom(zoom)

◦设置一个新的缩放层级.

•zoomin(lat, lng, center)

◦放大地图到中心点.

◦lat / lng = 经纬度. (可选)

◦zoom = 设置是否缩放到中心点. (可选)

•zoomout(lat, lng)

◦缩小地图.

◦lat / lng = 经纬度. (可选)

•zoomtospotsextent()

◦缩放时或移动时动态显示热点.

样例：

<krpano onstart="loadscene(stpeterssquare,null,MERGE);">

    <layer name="map" keep="true"
           url="bingmaps.swf" alturl="bingmaps.js"
           align="lefttop" x="0" y="0" width="30%" height="100%"
           key="...your Bing Maps API key..."
           maptype="satellite"
           lat="41.90050" lng="12.46705" zoom="15"
           >
        <spot name="stpeterssquare" active="true"
              lat="41.90255" lng="12.45708" heading="64.5"
              onclick="loadscene(stpeterssquare,null,MERGE,BLEND(1));activatespot();"
              />
        <spot name="fourrivers"
              lat="41.89877" lng="12.47311" heading="270.0"
              onclick="loadscene(fourrivers,null,MERGE,BLEND(1));activatespot();"
              />
        <radar visible="true" zoomwithmap="true" size="50" />
        <maptypecontrol visible="true" buttonalign="V" />
    </layer>

    <scene name="stpeterssquare">
        <view hlookat="103" vlookat="-2" fov="100" />
        <preview type="stpeterssquare_preview.jpg" />
        <image>
            <cube url="stpeterssquare_%s.jpg" />
        </image>
    </scene>

    <scene name="fourrivers">
        <view hlookat="-1" vlookat="-4" fov="100" />
        <preview type="fourrivers_preview.jpg" />
        <image>
            <cube url="fourrivers_%s.jpg" />
        </image>
    </scene>

</krpano>

<layer name="map" keep="true"

url="bingmaps.swf" alturl="bingmaps.js"

align="lefttop" x="0" y="0" width="30%" height="100%"

key="...your Bing Maps API key..."

maptype="satellite"

lat="41.90050" lng="12.46705" zoom="15"

<spot name="stpeterssquare" active="true"

lat="41.90255" lng="12.45708" heading="64.5"

onclick="loadscene(stpeterssquare,null,MERGE,BLEND(1));activatespot();"

<spot name="fourrivers"

lat="41.89877" lng="12.47311" heading="270.0"

onclick="loadscene(fourrivers,null,MERGE,BLEND(1));activatespot();"

</layer>

<image>

</image>

</scene>

<image>

</image>

</scene>

</krpano>

㊣凡未注明来源或投稿方的文章，皆为本站原创或原译作品，转载前须经本站同意，并在转载时注明来自 域图新视界 victu360.com，否则将追究相关法律责任。
本文标题：《Bing Maps--官方插件--krpano教程》

开通VIP会员通道-查看隐藏内容

下一篇>> WebVR--官方插件--krpano教程

上一篇>> grid测试虚拟空间绘制--krpano教程

标签：bing krpano map 地图插件

领主834篇文章站点微博

发表评论

您必须 [ 登录 ] 才能发表留言！

热门标签

Bing Maps--官方插件--krpano教程

插件说明：

语法：

插件属性：

插件属性事件：

插件节点- <spotstyle>：

插件节点- <spot>：

插件节点 - <radar>：

地图控制：

插件动作：

样例：

公告栏

everpano-3D软件漫游制作

请加客服QQ号（2973828267）

关注我们

热门标签

Bing Maps--官方插件--krpano教程

插件说明：

语法：

插件属性：

插件属性事件：

插件节点- <spotstyle>：

插件节点- <spot>：

插件节点 - <radar>：

地图控制：

插件动作：

样例：

krpano1.20.7修正版本发布

krpano实现转到特定角度出现图片案例[非会员文章]

krpano1.20.3修正版本发布

公告栏

everpano-3D软件漫游制作

请加客服QQ号（2973828267）

关注我们