YouScene: example

简单示例

1. 生成三维球

首先在页面添加一个div，id为earth;
YouScene内部组件使用jquery绑定，所以要先引入jquery文件
然后分别引入YouScene/ThirdParty/YS/YS.js, YouScene/YouScene.js

简单的demo示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="earth"></div>
    <script src="jquery.js"></script>
    <script src="YouScene/ThirdParty/YS/YS.js"></script>
    <script src=" YouScene/YouScene.js"></script>
    <script>
        var youScene = new YS.YouScene({
            sdkServerUrl: "http://ys.infoearth.com:9090/Server/", //YouScene的后台服务地址
            markerImgServer: "http://ys.infoearth.com:9090/", //地灾标注点的图标请求根路径
            isLoadDefaultTerrain:true //加载默认DEM
        });
        youScene.init("earth"); //div的id名称
    </script>

</body>
</html>

3. 对于Vue

ys现在并不支持模块导入，所以只能在vue的index.html文件中通过script引入
在vue项目中使用时，不要将ys的任何类对象绑定在vue的data上，会被vue监听影像性能
在vue中最好的使用方式如下
1. vue2 由于vue2中没有对指定的属性不监听，所以当你想将ys的类绑定在对象上时，可以使用下面这种方式
  
  this.icon = Object.freeze({data: new YS.Icon()}) 使用时，使用this.icon.data就可以了
  
  不能直接使用 this.icon = Object.freeze(new YS.Icon())，因为这样ys上的属性就都被冻结了，无法修改
2. vue3
  
  在vue3中也可以使用vue2的方式，但是也有其他的方式，vue3中增加了shallowReactive可以对数据只做浅层代理
个人建议使用ys的最好方式
1. 对数据进行类的封装，用类里面自定义的属性去修改ys上的属性，可以和vue的组件联动

    class IconEl {
        //options是后台返回的数据
        constructor (options) { 

            this.id = options.id
            this.name = options.name

            this._visible = false //增加自定义属性用于绑定UI和ys的属性关联
            this._icon = Object.freeze({data: new YS.Icon()}) //icon点图标
        }

        get visible () {
            return this._visible
        }

        set visible (value) {
            if (this._visible === value) return
            this._icon.data.visible = value
            this._visible = value
        }
    }

    let iconEl = new IconEl(options)
    iconEl.visible = !iconEl.visible //这样既修改了类的visible, 又修改了icon的visible，达到了UI和ys联动效果

    <div v-show="iconEl.visible"></div>

2. 添加图层树控件（非必要操作），在html页面内添加一个div，取名Myztree，

new YS.LayerTreeControl('Myztree', youScene);  
//或者传入DOM对象
new YS.LayerTreeControl($('#Myztree'), youScene);

3. 从服务器端请求ini配置文件中的数据源

var loader = new YS.DataLoader2(youScene);

4. 添加影像图层

youScene.layers.addiTelluroLayer({
    id: "全国天地图影像",
    name: "全国天地图影像",
    rectangle: {
        west: -180,
        south: -90,
        east: 180,
        north: 90
    },
    url: "http://itelluroyun.infoearth.com:8038/iTelluro.Server/Service/DOM/dom.ashx",
    dsKey: "全国天地图影像",
    fileExtension: "jpg",
    zeroSpan: 36,
    levels: 11
});

5. 添加场景模型

var layer = youScene.layers.addiTelluroSceneLayer({
    id:'123',
    name:'213',
    key:'6d1a6a0a29e44c4a8f710d71319c3c31_1_cut',
    root:'http://fly.cigem.cn:8088/'
});
layer.load();

6. 添加图标

var iconLayer = youScene.layers.addIconsLayer({
    id: "123",
    name: "12",
    category: "123",
    maxHeight: 4000000,
    minHeight: 200
});
var icon = new YS.Icon({
    id: "12",
    icon: "YouScene/Assets/img/draw/dragIcon.png",
    position: { x: 113, y: 32, z: 500 },
    name: "12"
});
iconLayer.add(icon);

7. 定位到目标

youScene.camera.fly(113, 32, 300);

二次开发中，开发者与三维球的大部分交互都通过YouScene类。

常用类

矩形 Rectangle{west: -180, south: -90, east: 180, north: 90}

笛卡尔2（例如屏幕坐标等） Point2{x:100, y:200}

笛卡尔3（例如世界坐标等） Point3{x:100, y:100, z:100}

经纬度坐标 Position{x:180, y:90, z:2000}