ThingJSの公式例（9）：CityBuilderから転送されたURLを使用して3Dマップスクリプトを開発する

＃フロント開発## 3D視覚化## IoT＃

仮想シーンの場所を特定する
シティビルダー輸出二次開発
基本的なパラメータの設定と変更

CityBuilder（都市レベルのシーン構築ツール）は、使用するのに十分シンプルで、デザイナーの使用習慣に適合します。次に、勤勉な都市レベルのシーンを開発に提供し、後続のリンクで柔軟に使用するにはどうすればよいですか？

ThingJSプラットフォームは、この問題を長い間考慮し、プラットフォームデータを統合し、CityBuilderがURLを転送することをサポートしています。プラットフォームがマップコンポーネントをロードした後、簡単に再開発できます。以下の手順を分析してみましょう。ご不明な点がございましたら、メッセージを残してください。

仮想シーンの場所を特定する

3次元の地球は世界座標系に基づいており、都市レベルまたは公園レベルのシーンが実際の読み込み場所を選択します。開発者は、app.backgroundの3点座標を変更して、正確なマップ位置を提供する必要があります。

var app = new THING.App();
app.background = [0, 0, 0];

シティビルダー輸出二次開発

マップコンポーネントスクリプトが動的にロードされた後、ビジネスレイヤーの追加やバックグラウンドでのオブジェクトパラメータの変更など、二次開発のためにCitybuilderから転送されたURLを介してマップを作成できます。説明例はシンプルで理解しやすいため、開発者は関数の値をより明確に理解できます。その他のデモを表示し、公式Webサイトにアクセスして登録してください。
ここに写真の説明を挿入
以下に示すように、CityBuilderマップツールを使用する方が便利です。設計者は、視覚化コンポーネントを使用して、レイヤースタイルを設定し、3Dアーキテクチャシーンのインポートをサポートしてから、プロジェクトURLを生成し、ThingJS（Internet of Things 3D視覚化PaaSプラットフォーム-デジタルツイン視覚化プラットフォーム）をインポートできます。示されています。
ここに写真の説明を挿入

// 引用地图组件脚本
THING.Utils.dynamicLoad(['https://www.thingjs.com/uearth/uearth.min.js'], function () {
    app.create({
        type: 'Map',
        // CityBuilder转出的url
        url: 'https://www.thingjs.com/citybuilder_console/mapProject/config/TVRFNE9UZz1DaXR5QnVpbGRlckAyMDE5',
        complete: function (event) {
            // 在这里编写业务代码
            var map = event.object;
            // 获取项目中的瓦片图层
            var baseLayers = map.baseLayers;
            // 获取项目中的业务图层
            var userLayers = map.userLayers;
            var buildingLayer = app.query('building')[0];
            buildingLayer.on(THING.EventType.DBLClick, function (e) {
                let obj = e.object;
                app.camera.earthFlyTo({
                    object: obj
                });
            });

            var toolbarWidth = 250;
            var toolbar = new THING.widget.Panel({
                hasTitle: true, // 是否有标题
                titleText: '图层列表',
                width: toolbarWidth
            });
            let clientWidth = app.domElement.clientWidth;
            toolbar.position = [clientWidth - toolbarWidth - 10, 10];
            userLayers.forEach(function (layer) {
                var button = toolbar.addBoolean({ open: true }, 'open').caption(layer.name);// 绑定回调
                button.on('change', function (ev) {
                    layer.visible = ev;
                });
            });

基本的なパラメータの設定と変更

3Dシーンのレイヤーオブジェクトは、通常、事前にcitybuilderで構成されます。基本的なパラメーターには、名前、長さ、幅、高さ、色、その他のパラメーターが含まれます。thingjsプラットフォームにインポートした後、フロントエンドコードを使用して直接変更できます。通常、線幅、ポイントサイズ、建物の高さに使用されます。

citybuilder構成パラメーター

都市レベルのシーン構築ツール
ここに写真の説明を挿入

ThingJSはパラメータコードを変更します

その他のデモビュー

// 先根据名称查询图层对象 名称是在CityBuilder中配置的图层的名称
            var primaryRoadLayer = app.query('primary')[0];
            var originWidth = primaryRoadLayer.renderer.width;
            new THING.widget.Button('修改线宽度', function () {
                if (primaryRoadLayer.renderer.width === originWidth) {
                    primaryRoadLayer.renderer.width = 8;
                }
                else {
                    primaryRoadLayer.renderer.width = originWidth;
                }
            });

ThingJSはurlを使用して地球のシーンを開発し、CityBuilderと組み合わせて簡単にします。デザイナーと開発者の両方が協力して、3Dプロジェクトのリリースを完了することができます。

ThingJSについて

ThingJSプラットフォームは、Internet of Things用の3D視覚化コンポーネントを提供し、3D開発を容易にします。200の3D開発ソースコード例に基づく直接Javascript呼び出し3Dスクリプトを使用すると、Internet ofThingsのビジュアル開発ロジックを完全に理解できます。シーン構築-3Dスクリプト開発-データドッキング-プロジェクト展開ワンストップサービスにより、開発がより効率的になり、20万人の開発者がいるデジタルツインテクノロジーイノベーターになります！魔法の豆の花の活動、公式ウェブサイトに入るにはクリックしてください>>
ここに写真の説明を挿入