kopia lustrzana https://github.com/robhawkes/vizicities
Updated readme and added kitchen sink example
rodzic
3064d70496
commit
0402c54df7
22
README.md
22
README.md
|
@ -21,7 +21,25 @@ Already know what you're doing? Here's the quickest way to install ViziCities...
|
||||||
## Examples
|
## Examples
|
||||||
|
|
||||||
|
|
||||||
## Changes since 0.2
|
## Main changes since 0.2
|
||||||
|
|
||||||
|
* Re-written from the ground up
|
||||||
|
* Complete overhaul of visual styling
|
||||||
|
* Massive performance improvements across the board
|
||||||
|
* Vastly simplified setup and API
|
||||||
|
* Better management and cleanup of memory
|
||||||
|
* Sophisticated quadtree-based grid system
|
||||||
|
* Physically-based lighting and materials (when enabled)
|
||||||
|
* Realistic day/night skybox (when enabled)
|
||||||
|
* Shadows based on position of sun in sky (when enabled)
|
||||||
|
* Built-in support for image-based tile endpoints
|
||||||
|
* Built-in support for GeoJSON and TopoJSON tile endpoints
|
||||||
|
* Built-in support for non-tiled GeoJSON and TopoJSON files
|
||||||
|
* Click events on individual features (when enabled)
|
||||||
|
* Internal caching of tile-based endpoints
|
||||||
|
* Easier to extend and add new functionality
|
||||||
|
* Easier to access and use general three.js features within ViziCities
|
||||||
|
* Separation of three.js from the core ViziCities codebase
|
||||||
|
|
||||||
|
|
||||||
## Getting started
|
## Getting started
|
||||||
|
@ -47,4 +65,4 @@ Want to share an interesting use of ViziCities, or perhaps just have a question
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
ViziCities is copyright UrbanSim Inc. and uses the fair and simple BSD-3 license. Want to see it in full? No problem, [you can read it here](https://github.com/UDST/vizicities/blob/master/LICENSE).
|
ViziCities is copyright [UrbanSim Inc.](http://www.urbansim.com/) and uses the fair and simple BSD-3 license. Want to see it in full? No problem, [you can read it here](https://github.com/UDST/vizicities/blob/master/LICENSE).
|
||||||
|
|
|
@ -0,0 +1,20 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
|
||||||
|
<title>Kitchen Sink ViziCities Example</title>
|
||||||
|
<link rel="stylesheet" href="main.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="world"></div>
|
||||||
|
|
||||||
|
<script src="../vendor/three.min.js"></script>
|
||||||
|
<script src="../vendor/threex.rendererstats.js"></script>
|
||||||
|
|
||||||
|
<script src="../vendor/TweenMax.min.js"></script>
|
||||||
|
|
||||||
|
<script src="../../dist/vizicities.min.js"></script>
|
||||||
|
|
||||||
|
<script src="main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -0,0 +1,4 @@
|
||||||
|
* { margin: 0; padding: 0; }
|
||||||
|
html, body { height: 100%; overflow: hidden;}
|
||||||
|
|
||||||
|
#world { height: 100%; }
|
|
@ -0,0 +1,72 @@
|
||||||
|
// London
|
||||||
|
var coords = [51.505, -0.09];
|
||||||
|
|
||||||
|
var world = VIZI.world('world', {
|
||||||
|
skybox: true,
|
||||||
|
postProcessing: true
|
||||||
|
}).setView(coords);
|
||||||
|
|
||||||
|
// Set position of sun in sky
|
||||||
|
world._environment._skybox.setInclination(0.3);
|
||||||
|
|
||||||
|
// Add controls
|
||||||
|
VIZI.Controls.orbit().addTo(world);
|
||||||
|
|
||||||
|
// CartoDB basemap
|
||||||
|
VIZI.imageTileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
|
||||||
|
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'
|
||||||
|
}).addTo(world);
|
||||||
|
|
||||||
|
// Building and roads from Mapzen (polygons and linestrings)
|
||||||
|
var topoJSONTileLayer = VIZI.topoJSONTileLayer('https://vector.mapzen.com/osm/buildings,roads/{z}/{x}/{y}.topojson?api_key=vector-tiles-NT5Emiw', {
|
||||||
|
interactive: false,
|
||||||
|
style: function(feature) {
|
||||||
|
var height;
|
||||||
|
|
||||||
|
if (feature.properties.height) {
|
||||||
|
height = feature.properties.height;
|
||||||
|
} else {
|
||||||
|
height = 10 + Math.random() * 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
height: height,
|
||||||
|
lineColor: '#f7c616',
|
||||||
|
lineWidth: 1,
|
||||||
|
lineTransparent: true,
|
||||||
|
lineOpacity: 0.2,
|
||||||
|
lineBlending: THREE.AdditiveBlending,
|
||||||
|
lineRenderOrder: 2
|
||||||
|
};
|
||||||
|
},
|
||||||
|
filter: function(feature) {
|
||||||
|
// Don't show points
|
||||||
|
return feature.geometry.type !== 'Point';
|
||||||
|
},
|
||||||
|
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://whosonfirst.mapzen.com#License">Who\'s On First</a>.'
|
||||||
|
}).addTo(world);
|
||||||
|
|
||||||
|
// London Underground lines
|
||||||
|
VIZI.geoJSONLayer('https://rawgit.com/robhawkes/4acb9d6a6a5f00a377e2/raw/30ae704a44e10f2e13fb7e956e80c3b22e8e7e81/tfl_lines.json', {
|
||||||
|
output: true,
|
||||||
|
interactive: true,
|
||||||
|
style: function(feature) {
|
||||||
|
var colour = feature.properties.lines[0].colour || '#ffffff';
|
||||||
|
|
||||||
|
return {
|
||||||
|
lineColor: colour,
|
||||||
|
lineHeight: 20,
|
||||||
|
lineWidth: 3,
|
||||||
|
lineTransparent: true,
|
||||||
|
lineOpacity: 0.5,
|
||||||
|
lineBlending: THREE.AdditiveBlending,
|
||||||
|
lineRenderOrder: 2
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onEachFeature: function(feature, layer) {
|
||||||
|
layer.on('click', function(layer, point2d, point3d, intersects) {
|
||||||
|
console.log(layer, point2d, point3d, intersects);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
attribution: '© Transport for London.'
|
||||||
|
}).addTo(world);
|
Ładowanie…
Reference in New Issue