Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up

Demonstrations provided with UDSV

License

NotificationsYou must be signed in to change notification settings

VCityTeam/UD-Viz-Template

Repository files navigation

What you will get (for the impatient)

This repository provides the resulting files that this tutorial helps youto build step by step. You can examine those files and also run the resultingapplication with the following commands

git clone https://github.com/VCityTeam/UD-Viz-template.gitnpm install npx webpack --config webpack.config.jsnode ./bin/server.jsfirefox http://localhost:8000

Skills recommended for building your demo

In order to go through this tutorial you will need to be acquainted with:

Prerequisites

You will need to install the following tools

Basic (npm) project configuration

First setup your npmenvironnement, that is a set of configuration filesassembled together to form/define your application

  • Create a new directory folder (for example namedmy-demo), in order to holdall the files constituting your new web application:

    mkdir my-demo

  • Connect to that directory

    cd my-demo

  • Initialize your npm project with the help of thenpm initscaffolding command. You should obtain a defaultpackage.json file:

    npm init -y

  • Install (still with the help of the'npm' command) thewebpack andwebpack-cliutilities. The--save-dev flags will update your newly createdpackage.json with adevDependencies entry. This goes

    npm install webpack webpack-cli --save-dev

  • Edit thepackage.json file and

  • Create anindex.html (blank template) file with the following content

    <!DOCTYPE html><html><head><metacharset="UTF-8"><title>Title of the document</title></head><body>Content of the document......</body></html>

Start providing the application JS code

  • Create asrc sub-directory as placeholder for your JavaScript code.

    mkdir my-demo/src

  • Provide JS code to thesrc sub-directory. For this you can startconstructing your own code by taking some inspiration out of theud-viz examplesprovided with theud-viz library.

    In the following we shall extract the bare content out of theud-viz/examples/point_cloud_visualizer.html.

    You should first create an emptyindex.js file within thesrcsub-directory. Then copy the content of the<script type="text/javascript">section out of theud-viz/examples/point_cloud_visualizer.html file and paste it to the newlycreated index.js` file.

  • Modifyindex.js in the following manner:

    • Suppress theudviz variable: this is because theudviz variable is onlyuseful when ud-viz is imported as a bundle in the context of the libraryexample. You then need to further edit theindex.js file in order toremove all theudviz. prefixes occurrences.For example the initialudviz.loadMultipleJSON(...) should simply becomeloadMultipleJSON(...) andudviz.itowns.Extent(...) should becomeitowns.Extent(...).
    • Because many function or classes were previously imported by the ud-vizbundle, you must now import those function or classes through the standardES6 Module. You should do this for all the following function classes:
      • loadMultipleJSON
      • proj4
      • PointCloudVisualizer
      • LayerChoice
      • Bookmark
      • ColoLayer, Extent, WMSSource, ElevationLayer, STRATEGY_DICHOTOMY

    You should obtain anindex.js looking like this.

  • A couple remarks about the content of the resultingindex.js:

    • import xxx from 'xxx' is used to import modules (=code, assets ...). The notion of module is very important in Javascript I advise you to readthe MDN doc guide.

    • document is a variable that is part of your browser's web API, it allows you to add / retrieve / delete / create (html elements) in yourDOM.To see the contents of this variable go to your browser's console on the web page of your choice and typedocument.

    • Thedocument.body contains theHTML body element of your DOM. It corresponds to the<body> tag of theindex.html.The function takes as parameters:

    • FIXME LIGNE 16 a config in the form of ajavascript object

    • FIXEME LIGNE 57app.itownsView, aniTowns.View provided by iTowns, creates the html element that contains the 3D scene (camera, renderer...). Seeitowns doc.

    • FIXME LIGNE 22 anitowns.Extent. The geographical boundaries. Seeitowns doc.

    • You may notice that you don't have to create thePlanarView andExtent since they are already built into yourapp instance FIXME LIGNE 32 of thePointCloudVisualizer class. You might want to check out the source ofPointCloudVisualizer in order to get a better understanding of what is implicitly provided under the hood.

  • Retrieve all the configuration files loaded by the call toloadMultipleJSON(...), that are located in theexamples/assets/config/subdirectory and place their respective copy inmy-demo/assets/.This boils down to the following commands:

    git clone https://github.com/VCityTeam/UD-Viz.gitexport UDVIZ_SRC=`pwd`/UD-Vizmkdir -p my-demo/assets/config/layercd my-demo/assetscp$(UDVIZ_SRC)/examples/assets/config/extents.json.cp$(UDVIZ_SRC)/examples/assets/config/crs.json.cp$(UDVIZ_SRC)/examples/assets/config/layer/elevation.json config/layer/cp$(UDVIZ_SRC)/examples/assets/config/layer/base_maps.json config/layer/cp$(UDVIZ_SRC)/examples/assets/config/layer/3DTiles_point_cloud.json config/layer/

  • Don't forget tonpm install --save your npm package dependencies. Forexample if you considered theud-viz/examples/point_cloud_visualizer.htmlas base example (that isdeployed here) then you will need to

    npm install @ud-viz/point_cloud_visualizernpm install @ud-viz/widget_layer_choicenpm install @ud-viz/widget_bookmark

    The above instructions should add new entries in thedependencies sectionof yourpackage.json.

    • Note thatitowns andproj4 should be provided automatically as peer dependencies (for example see thepoint cloud visualizer package.json) and do not need to be installed through npm.

    Troubleshooting the above dependencies installation: when the installationof the dependencies do error, you might consider

    • clearing your npm cache withnpm cache clean --force,
    • removing any previous package installations withrm -fr node_modules
    • removing the pinned package versions withrm package-lock.json.

Create the code bundle by providing awebpack.config.js

  • Create firstwebpack.config.js with the following basic content:

    constpath=require('path');module.exports={entry:'./src/index.js',output:{filename:'bundle.js',path:path.resolve(__dirname,'dist'),},};

  • Because of an erroneous package resolution (refer tothis note together withthat note),manually install thebuffer package

    npm install buffer

  • As explained below, the point-cloud-visualizer example code imports a(CSS) style. For webpack to be able todeal with that style

    • do install the following loaders
      npm install style-loader css-loader --save-dev
    • Informwebpack.config.js of the existence of those loaders by addingamodule entry
      [...]module.exports={[...]output:{[...]},module:{rules:[{test:/\.css/,use:['style-loader','css-loader'],},],},};

  • Eventually create the code bundle with the command

npx webpack --config webpack.config.js

The resulting bundle should now exist in the form of themy-demo/dist/bundle.js file.

Import the application bundle into theindex.html and service the app

Create a<script> section in yourindex.html file in order to allow forthe bundle importation:

[...]</head><scriptsrc='./dist/bundle.js'></script>[...]<body>[...]

Define your application (CSS) style

You now need to provide a(CSS) style toyour application.

For this you can

  • copy the style related entries of the original exampleud-viz/examples/point_cloud_visualizer.html, that is the lines
    [...]<head>  [...]<linkrel="stylesheet"href="./assets/css/examples.css"/><linkrel="stylesheet"href="./assets/css/point_cloud_visualizer.css"/><linkrel="stylesheet"href="./assets/css/widget_layer_choice.css"/><linkrel="stylesheet"href="./assets/css/widget_bookmark.css"/><linkrel="stylesheet"href="./assets/css/loading_screen.css"/>  [...]</head>
    in order to paste them into the<head> section of newly createdindex.htmlfile.
  • you then need to copy the correspondingcss files out ofexamples/assets/cssof the ud-viz examples, which can be done with the following commands
    cd my-democp$(UDVIZ_SRC)/examples/assets/css/examples.css assets/css/cp$(UDVIZ_SRC)/examples/assets/css/point_cloud_visualizer.css assets/css/cp$(UDVIZ_SRC)/examples/assets/css/widget_layer_choice.css assets/css/cp$(UDVIZ_SRC)/examples/assets/css/widget_bookmark.css assets/css/cp$(UDVIZ_SRC)/examples/assets/css/loading_screen.css assets/css/

Serve your application and access it

Create an http server that will serve themy-demo which be done e.g. withexpress.

To do this create a file called./bin/server.js and add the following content to it:

// Code adapted from https://www.npmjs.com/package/expressconstpath=require('path');constexpress=require('express')constapp=express()app.use(express.static(path.resolve(__dirname,'../')));app.listen(8000)

Install express

npm install express --save-dev

To start an express server using this script, run the following code:

node ./bin/server.js

You can now access your web application by web-browsing the URL returned by theabove command (http://localhost:8000).

Further UD-Viz material

In order to quickly learn more about of what you can achieve with UD-Viz,you might wish to ead the differentexamples together withthe developers documentation and try to transpose tools, widgets, code snippet to your application.

[8]ページ先頭
©2009-2025 Movatter.jp