一、<script>标签引入的模式
<script src="./deckgl/deck.gl@8.5.0/dist.min.js"></script>
<script src="./deckgl/geo-layers@8.5.0/dist.min.js"></script>
<script src="./deckgl/arcgis@8.5.0/dist.min.js"></script>
<script src="https://dans.esrichina.com/javascript/4.23/init.js"></script>
1.1 AMD模式
<script>
require([
"esri/Map",
"esri/views/SceneView",
"esri/views/3d/externalRenderers"
], (Map, SceneView, externalRenderers) => {
deck.loadArcGISModules().then((arcGIS) => {
const sceneView = new SceneView({
container: "viewDiv",
map: new Map({
basemap: "dark-gray-vector"
}),
viewingMode: "local",
camera: {
position: [-73.98789805, 42.6361464, 4219.66859],
heading: 351.86,
tilt: 50.08
}
});
const renderer = new arcGIS.DeckRenderer(sceneView, {
layers: [renderLayers()]
});
externalRenderers.add(sceneView, renderer);
setInterval(() => {
renderer.deck.layers = renderLayers();
}, 30);
function renderLayers() {
return [
new deck.TripsLayer({
id: "trips",
data:
"./deckgl/trips-v7.json",
getPath: (d) => d.path,
getTimestamps: (d) => d.timestamps,
getColor: (d) => (d.vendor === 0 ? [253, 128, 93] : [23, 184, 190]),
opacity: 1.0,
widthMinPixels: 4,
rounded: true,
//fadeTrail:false,
trailLength: 180,
currentTime: (performance.now() % 20000) / 10,
shadowEnabled: false
}),
new deck.PolygonLayer({
id: 'buildings',
data: './deckgl/building.json',
extruded: true,
wireframe: false,
opacity: 0.5,
getPolygon: f => f.polygon,
getElevation: f => f.height,
getFillColor: [74, 80, 87],
material: {
ambient: 0.1,
diffuse: 0.6,
shininess: 32,
specularColor: [60, 64, 70]
}
})
];
}
});
});
</script>
1.2 ES Modules模式
注意：其中的arcgis api走ES Modules，deck依然走的deck.loadArcGISModules()
<script type="module">
import Map from "https://dans.esrichina.com/javascript/4.23/@arcgis/core/Map.js";
import SceneView from "https://dans.esrichina.com/javascript/4.23/@arcgis/core/views/SceneView.js";
import * as externalRenderers from "https://dans.esrichina.com/javascript/4.23/@arcgis/core/views/3d/externalRenderers.js";
deck.loadArcGISModules().then((arcGIS) => {
//代码与1.1一致。
});
二、NPM的模式
2.1 ES Modules模式
(1) package.json
{
"name": "arcgis-i3s",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"start": "webpack-dev-server --progress --hot --open --host 0.0.0.0",
"start-local": "webpack-dev-server --env.local --progress --hot --open"
},
"dependencies": {
"@arcgis/core": "^4.22.2",
"@deck.gl/arcgis": "^8.7.0",
"@loaders.gl/i3s": "^3.1.5",
"@luma.gl/core": "^8.5.10",
"deck.gl": "^8.7.0"
},
"devDependencies": {
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.11"
}
}
(2) webpack.config.js
const CONFIG = {
mode: 'development',
entry: {
app: './app.js'
},
output: {
library: 'App'
}
};
// This line enables bundling against src in this repo rather than installed module
module.exports = env => (env ? require('../../webpack.config.local')(CONFIG)(env) : CONFIG);
(3) app.js
import {DeckRenderer} from '@deck.gl/arcgis';
import Map from "@arcgis/core/Map";
import SceneView from "@arcgis/core/views/SceneView";
import SceneLayer from "@arcgis/core/layers/SceneLayer";
import * as externalRenderers from '@arcgis/core/views/3d/externalRenderers';
import {SimpleMeshLayer} from '@deck.gl/mesh-layers';
import {SphereGeometry} from '@luma.gl/core';
import {Tile3DLayer} from '@deck.gl/geo-layers';
import {I3SLoader} from '@loaders.gl/i3s';
import {Tiles3DLoader} from '@loaders.gl/3d-tiles';
// Tileset entry point: Indexed 3D layer file url
const TILESET_URL =
'https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/SanFrancisco_Bldgs/SceneServer/layers/0';
export async function renderToDOM(container) {
const map=new Map({
basemap: 'dark-gray-vector'
});
const sceneView = new SceneView({
container,
//qualityProfile: 'high',
map: map,
environment: {
atmosphereEnabled: false
},
camera: {
// position: {x: -122.4, y: 37.78, z: 3000},
position: {x: 106.62508, y: 26.64663742, z: 3000},
heading: 0,
tilt: 25
},
viewingMode: 'local'
});
let scenelayer = new SceneLayer({
// URL to the service
url: "https://192.168.100.123/server/rest/services/Hosted/cslpk/SceneServer/layers/0"
});
//map.add(scenelayer);
const renderer = new DeckRenderer(sceneView, {});
externalRenderers.add(sceneView, renderer);
// Video created by the NASA Jet Propulsion Laboratory, Public domain, via Wikimedia Commons
const VIDEO_URL =
'https://upload.wikimedia.org/wikipedia/commons/transcoded/0/0a/NASA_VR-360_Astronaut_Training-_Space_Walk.webm/NASA_VR-360_Astronaut_Training-_Space_Walk.webm.1080p.webm';
const sphere = new SphereGeometry({
nlat: 50,
nlong: 50,
radius: 150
});
//console.log(sphere);
let videoEl,video;
/* global document */
if (typeof document !== 'undefined') {
videoEl = document.createElement('video');
videoEl.crossOrigin = 'anonymous';
videoEl.preload = 'auto';
videoEl.loop = true;
const source = document.createElement('source');
source.src = VIDEO_URL;
videoEl.append(source);
videoEl.play();
//setVideo(videoEl);
}
//return () => videoEl && videoEl.pause();
sceneView.on('layerview-create', () => {
renderer.deck.layers = [
// new Tile3DLayer({
// id: 'tile-3d-layer',
// data: 'https://192.168.100.123/server/rest/services/slpk/osgb5G_folder/SceneServer/layers/0',
// loader: I3SLoader
// }),
new SimpleMeshLayer({
id:'video-sphere',
data: [
{
position: [106.62508, 26.646],
angle: 0,
color: [255, 0, 0]
},
],
texture:videoEl,
mesh:sphere,
getScale: [1, 1, -1],
material: false
}),
new Tile3DLayer({
id: 'tile-3d-layer1',
//tileset json file url
data: 'https://dans.esrichina.com/3dtiles/tileset.json',
loader: Tiles3DLoader,
loadOptions: {
'3d-tiles': {
isTileset: true,
}
}
})
];
});
return {
remove: () => {
sceneView.destroy();
renderer.dispose();
}
};
}
