agentscript
Version:
AgentScript Model in Model/View architecture
94 lines (72 loc) • 2.86 kB
HTML
<html>
<head>
<title>DropletsDrag</title>
</head>
<body>
<div id="map"></div>
<script type="module">
import * as mltools from './mltools.js'
import Model from '../models/DropletsModel.js'
import TwoDraw from '../src/TwoDraw.js'
import Animator from '../src/Animator.js'
const bbox = mltools.santaFeBBox
const patchesWidth = 250
const patchSize = 10
const zoom = 10
console.log('bbox', bbox)
let model = new Model({ bbox, patchesWidth }) // bbox => GeoWorld.js
await model.startup(zoom) // DropletsModel needs startup
model.setup()
const drawOptions = {
patchesColor: 'transparent',
turtlesShape: 'square',
turtlesRotate: false,
turtlesSize: 0.8, // 0.5,
turtlesColor: 'blue',
}
let view = new TwoDraw(model, {
div: mltools.newCanvas(),
patchSize,
drawOptions,
})
// ===== Start of map & layers
// terrain sources: osm topo topo1 smooth usgs
// elevation sources: mapzen maptiler redfishUSA redfishWorld mapbox
const terrain = mltools.terrain('usgs')
const elevation = mltools.elevation('mapzen')
const map = await mltools.newMap(bbox, zoom)
map.setMaxZoom(15)
mltools.addRasterLayer(map, 'terrain', terrain)
mltools.addRasterLayer(map, 'elevation', elevation, 0.1)
mltools.addGeojsonLayer(map, 'bbox', bbox, 'transparent', 'red', 3)
mltools.addCanvasLayer(map, 'model', view.canvas, bbox)
// modify the geojason above by dragging a new rect
mltools.dragRectListener(map, 'bbox', async bbox => {
anim.stop()
const zoom = Math.floor(map.getZoom())
model = new Model({ bbox, patchesWidth })
await model.startup(zoom)
model.setup(zoom)
view = new TwoDraw(model, {
div: mltools.newCanvas(),
patchSize,
drawOptions,
})
mltools.updateGeojson(map, 'bbox', bbox)
mltools.updateCanvas(map, 'model', view.canvas, bbox)
// anim.restart(model, view)
anim.reset()
anim.start()
})
// ===== End of map & layers
const anim = new Animator(
() => {
model.step()
view.draw()
},
-1, // run forever
10 // fps
)
</script>
</body>
</html>