vue + cesium（7）: 加载渔船（initShipBoat.js）

/*
* 说明:   加载渔船
*/


import * as Cesium from "cesium/Cesium.js";
import config from "./config";
import Vue from 'vue'

export const initLoadShipBoatModel = (
        function() {
            var viewer;
            var handler;
            var dataSource;
            var ship_color = Cesium.Color.RED;
            var ship_opacity = 1;
            function constructInitShipBoat(portName, shipDatas) {  //传入viewer
                viewer = Vue.prototype.$MyCesium.viewer;
                handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
                Vue.prototype.$MyCesium.removeDataSource('ship')
                dataSource = new Cesium.CustomDataSource('ship');
                viewer.dataSources.add(dataSource);
                initShipBoat(shipDatas)
            }
            function initShipBoat(shipDatas) {
                let data = shipDatas
                console.log('initShipBoat', data, dataSource.entities.values.length)
                console.time("shipTime")
                for(let i = 0, len = data.length; i < len; i++) {
                    let item = data[i]
                    if (!item.lon || !item.lat) continue
                    item.lon = item.lon / 10000000
                    item.lat = item.lat / 10000000
                    let length = parseFloat(item.length)
                    let position = Cesium.Cartesian3.fromDegrees(parseFloat(item.lon), parseFloat(item.lat));
                    var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position); // 直接转换发现方向相差了90度因此采取如下形式
                    let uri = length > 24 ? config.mapUrl.gltf.shipBoat : length > 12 ? config.mapUrl.gltf.shipBoat2 : config.mapUrl.gltf.shipBoat2;
                    // console.log(uri, 'uri', length)
                    //entities  方式添加
                    dataSource.entities.add(new Cesium.Entity({
                        type: "ship",
                        tag: "ship",
                        shipName: item.shipName,
                        id: item.shipId,
                        position: Cesium.Cartesian3.fromDegrees(parseFloat(item.lon), parseFloat(item.lat)),
                        model: {
                            uri: uri,
                            scale: 1,
                            silhouetteColor: Cesium.Color.fromAlpha(ship_color, parseFloat(0.8)),
                            silhouetteSize: ship_opacity
                        },
                        lon: item.lon,
                        lat: item.lat,
                        mmsi: item.mmsi,
                        nationality: item.nationality,
                        dataSource: item.dataSource,

                        shipSource: item.shipSource,
                        targetNumber: item.targetNumber,
                        type: item.type,
                        update: item.update,
                        description: item
                    }));
                    //_primitives  方式添加
                    // dataSource._primitives.add(Cesium.Model.fromGltf({
                    //     id: item.shipId,
                    //     url: uri,
                    //     modelMatrix : modelMatrix,
                    //     scale: 1,
                    //     type: "ship",
                    //     tag: "ship",
                    //     name: item.shipname,
                    //     description: item
                    //     // minimumPixelSize : 128
                    // }))
                }
                console.timeEnd("shipTime")
            }
            return constructInitShipBoat
        })()