kopia lustrzana https://github.com/robhawkes/vizicities
Updated readme and added kitchen sink example
Robin Hawkes
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
|
||||
|
||||
|
||||
## 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
|
||||
|
|
@ -47,4 +65,4 @@ Want to share an interesting use of ViziCities, or perhaps just have a question
|
|||
|
||||
## 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