How do I make the initial load time faster?

[boriskogan81]

[文档问题] How do I make the initial load time faster?

相关文档 URL

https://github.com/zouyaoji/vue-cesium

问题描述

The initial load of map imagery takes approximately 30 seconds. How can I expedite this? Can I load a lower resolution map as a placeholder? 

My component looks like this:

    <vc-viewer :requestRenderMode="true"
               :infoBox="false"
               :geocoder="geocoder"
               :terrainExaggeration="100"
               @ready="ready"
               :camera="camera"
               @selectedEntityChanged="selectedEntityChanged"
               @moveEnd="onMoveEnd">
        <!-- We loop through our community billboards and render each as a Vue-Cesium entity -->
        <vc-entity v-if="billboards.length > 0" v-for="billboard in billboards"
                   :ref="billboard.id"
                   :position="billboard.position"
                   :billboard="billboard"
                   :key="billboard.id"
                   :id="billboard.id.toString()"></vc-entity>
        <!-- Our Vue Cesium imagery layer. We use Bing Maps -->
        <vc-layer-imagery :alpha="alpha" :brightness="brightness" :contrast="contrast">
            <vc-provider-imagery-bingmaps :url="url" :bmKey="bmKey" :mapStyle="mapStyle"/>
        </vc-layer-imagery>
    </vc-viewer>

改进建议

Document a way to make the map imagery load faster initially.

[zouyaoji]

Do you mean it takes 30 seconds to load the viewer, or 30 seconds for the bingmaps layer?

In my example, bingmaps load very quickly. If you are bingmaps load slowly, maybe the network between you and the bingmaps map service is not good.

[boriskogan81]

I mean that it takes a long time for the imagery layer to load, and the first time it doesn't load properly. You can see what I'm talking about in this screencast: https://youtu.be/AtCB0u0XYEE

It seems like this may be a Cesium issue as well.

[zouyaoji]

I think it may be too slow to load Cesium.js. You can try to put cesiumjs on your server and load it locally.

Vue.use(VueCesium, {
  cesiumPath: /YouerPath/Cesium/Cesium.js
  accessToken: 'XXXX'
})

[boriskogan81]

Wow, I had no idea Cesium weighed 55 MB!

Is there any sort of light version or some other workaround you could recommend?

Sincerely,

Baruch

On Fri, Apr 3, 2020 at 4:12 AM zouyaoji notifications@github.com wrote:

I think it may be too slow to load Cesium.js. You can try to put cesiumjs on your server and load it locally.

Vue.use(VueCesium, { cesiumPath: /YouerPath/Cesium/Cesium.js accessToken: 'XXXX' })

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/zouyaoji/vue-cesium/issues/56#issuecomment-608175336, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACONT22JDJMI46CKKRGQSKLRKUZZTANCNFSM4LZMMMZA .

[zouyaoji]

You only need the files in the "Cesium-1.64 \ Build \ Cesium" directory.

[boriskogan81]

I placed the Cesium build folder into my /staticfolder, and passed it to Vue in my main file like this:

Vue.use(VueCesium, {
    cesiumPath: '/static/Cesium/Cesium.js',
    accessToken:
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkOGM5ZTQwZS1hMDA2LTQ3MjgtOTQ5ZC03ZjU5ZTBkZTRiMjQiLCJpZCI6NzQwMSwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU3NTQ3ODUyOH0.w9ZktD2If7v4lwzIj2jk5g0hlYBqal6ko9B9QybBXb4'
});

This fails with

index.js?22a4:890 Uncaught ReferenceError: Cesium is not defined
    at HTMLScriptElement.$script.onload

What am I missing?

Sincerely,

Baruch

On Tue, Apr 7, 2020 at 4:01 AM zouyaoji notifications@github.com wrote:

You only need the files in the "Cesium-1.64 \ Build \ Cesium" directory.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/zouyaoji/vue-cesium/issues/56#issuecomment-610114318, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACONT24HOIOB6GS5MOZRRVDRLJ3OFANCNFSM4LZMMMZA .

[zouyaoji]

Please make sure that your cesium.js can be directly accessed in the browser address bar, like this:

[boriskogan81]

I can not. What should I set up to make the statics folder available?

[zouyaoji]

Please refer to the vue scaffolding project.

[boriskogan81]

Ah, ok-the default Vue CLI 3 sets it up so that you need to put Cesium in the /public folder, and then can pass it in Vue registration like this:

cesiumPath: '/Cesium/Cesium.js',

My question is whether I have to include the Cesium/Assets, /ThirdParty, /Widgets and /Workers folders.

[zouyaoji]

Just need to include Cesium.js.