Yet Another
Mapping API - Not !
      Mansour Raad
     mraad@esri.com
www.esri.com/flex
www.esri.com/flex
ArcGIS Services
• Map Tiles ESRI / Virtual Earth (token)
• Geocoding / Reverse
• Query / Identify
• Routing with Barriers ...
You & ArcGIS




Blaze
PHP               Local AGS
.Net
Map “Hello World”
Map “Hello World”
1.<?xml version=quot;1.0quot; encoding=quot;utf-8quot;?>
2.<mx:Application
3. xmlns:mx=quot;http://www.a...
Map “Hello World”
1.<?xml version=quot;1.0quot; encoding=quot;utf-8quot;?>
2.<mx:Application
3. xmlns:mx=quot;http://www.a...
1.<?xml version=quot;1.0quot; encoding=quot;utf-8quot;?>
2.<mx:Application
3. xmlns:mx=quot;http://www.adobe.com/2006/mxml...
1.<?xml version=quot;1.0quot; encoding=quot;utf-8quot;?>
2.<mx:Application
3. xmlns:mx=quot;http://www.adobe.com/2006/mxml...
1.<?xml version=quot;1.0quot; encoding=quot;utf-8quot;?>
2.<mx:Application
3. xmlns:mx=quot;http://www.adobe.com/2006/mxml...
GeoProcessing
 DriveTimes
1. <esri:Geoprocessor id=quot;gpquot; url=quot;<GeoProcessesorURL>quot; showBusyCursor=quot;truequot;/>
2. <esri:Map id=qu...
1. <esri:Geoprocessor id=quot;gpquot; url=quot;<GeoProcessesorURL>quot; showBusyCursor=quot;truequot;/>
2. <esri:Map id=qu...
1. <esri:Geoprocessor id=quot;gpquot; url=quot;<GeoProcessesorURL>quot; showBusyCursor=quot;truequot;/>
2. <esri:Map id=qu...
1. <esri:Geoprocessor id=quot;gpquot; url=quot;<GeoProcessesorURL>quot; showBusyCursor=quot;truequot;/>
2. <esri:Map id=qu...
1.<mx:Script>
2. <![CDATA[
3.    import com.esri.ags.tasks.FeatureSet;
4.    import com.esri.ags.Graphic;
5.    import com...
1.<mx:Script>
2. <![CDATA[
3.    import com.esri.ags.tasks.FeatureSet;
4.    import com.esri.ags.Graphic;
5.    import com...
Demo
Sample 1-2
DriveTimes
Many Children Layers
Many Graphic Layers
GraphicLayer
GraphicLayer

• graphicProvider
 • ArrayCollection
• renderer
 • graphic with no symbol
Graphic
Graphic

• UIComponent
 • Flex life cycle management
• geometry
• symbol
• attributes
Graphic/Geometry
Graphic/Geometry

• Geometry - base class
 • MapPoint
 • Polyline
 • Polygon
Polyline/Polygon
Polyline/Polygon


• Multi Part Geometry
• Islands of Hawaii
Graphic/Symbol
Graphic/Symbol

• Symbol - base class
• Draws geometry of Graphic
• Uses Flash Drawing API
Graphic/Attributes
Graphic/Attributes


• Any Object !
• Attach any dynamic property to Graphic
Geometry/Symbol
Geometry/Symbol


• [Bindable] Properties
• Dispatch CHANGE event
Demo
Sample 3-7
LCDS
LCDS

• Remote Objects
• Messaging
• Data Services
Feature
Feature

• Serializable server side object
• Properties
 • featureID:int;
 • geometry:IGeometry;
 • attributes:ASObject;
public class Feature
    implements Serializable
{
  private int m_featureId;
  private IGeometry m_geometry;
  private AS...
public class MapPoint
    implements IGeometry
{
  private double m_x;
  private double m_y;
  private SpatialReference m_...
DS Assembler

• fill
• createItem
• getItem
• updateItem
• deleteItem
private int m_featureId = 1;
private Map<Integer, Feature> m_map = new ConcurrentHashMap<Integer, Feature>(17);

public Co...
private int m_featureId = 1;
private Map<Integer, Feature> m_map = new ConcurrentHashMap<Integer, Feature>(17);

public Co...
private int m_featureId = 1;
private Map<Integer, Feature> m_map = new ConcurrentHashMap<Integer, Feature>(17);

public Co...
private int m_featureId = 1;
private Map<Integer, Feature> m_map = new ConcurrentHashMap<Integer, Feature>(17);

public Co...
private int m_featureId = 1;
private Map<Integer, Feature> m_map = new ConcurrentHashMap<Integer, Feature>(17);

public Co...
private int m_featureId = 1;
private Map<Integer, Feature> m_map = new ConcurrentHashMap<Integer, Feature>(17);

public Co...
data-management-config.xml
data-management-config.xml
    <destination id=quot;featurequot;>
      <properties>
        <factory>spring</factory>
    ...
Back To The Client :-)
package com.esri.cats
{
  import com.esri.ags.SpatialReference;
  import com.esri.ags.geometry.MapPoint;

    import flash...
package com.esri.cats
{
  import com.esri.ags.SpatialReference;
  import com.esri.ags.geometry.MapPoint;

    import flash...
1.package com.esri.cats
2.{
3. import com.esri.ags.geometry.Geometry;

5. [Managed]
6. [RemoteClass(alias=quot;com.esri.ca...
1.package com.esri.cats
2.{
3. import com.esri.ags.geometry.Geometry;

5. [Managed]
6. [RemoteClass(alias=quot;com.esri.ca...
1.<cats:ClassAliasRegistry/>
2.<mx:ArrayCollection id=quot;featuresquot;
3.     collectionChange=quot;collectionChangeHand...
1.<cats:ClassAliasRegistry/>
2.<mx:ArrayCollection id=quot;featuresquot;
3.     collectionChange=quot;collectionChangeHand...
1.<cats:ClassAliasRegistry/>
2.<mx:ArrayCollection id=quot;featuresquot;
3.     collectionChange=quot;collectionChangeHand...
1.<cats:ClassAliasRegistry/>
2.<mx:ArrayCollection id=quot;featuresquot;
3.     collectionChange=quot;collectionChangeHand...
1.<cats:ClassAliasRegistry/>
2.<mx:ArrayCollection id=quot;featuresquot;
3.     collectionChange=quot;collectionChangeHand...
private function collectionChangeHandler(event:CollectionEvent):void
{
  switch (event.kind)
  {
     case CollectionEvent...
private function doReset(event:CollectionEvent):void
{
  graphicsLayer.clear();
  m_graphicsDict = new Dictionary();
  for...
private function doReset(event:CollectionEvent):void
{
  graphicsLayer.clear();
  m_graphicsDict = new Dictionary();
  for...
private function doReset(event:CollectionEvent):void
{
  graphicsLayer.clear();
  m_graphicsDict = new Dictionary();
  for...
private function doUpdate(event:CollectionEvent):void
{
  for each (var propertyChangeEvent:PropertyChangeEvent in event.i...
private function doUpdate(event:CollectionEvent):void
{
  for each (var propertyChangeEvent:PropertyChangeEvent in event.i...
private function doUpdate(event:CollectionEvent):void
{
  for each (var propertyChangeEvent:PropertyChangeEvent in event.i...
1.private function mouseDownHandler(event:MouseEvent):void
2.{
3. const graphic:Graphic = event.target as Graphic;
4. if (...
1.private function mouseDownHandler(event:MouseEvent):void
2.{
3. const graphic:Graphic = event.target as Graphic;
4. if (...
1.private function mouseDownHandler(event:MouseEvent):void
2.{
3. const graphic:Graphic = event.target as Graphic;
4. if (...
Demo CATS
“Lots” Features
Spatial Index
Spatial Index
• RTree
• QuadTree
• Grid / Trellis
 • Simple
 • Efficient (points)
 • Good enough !
0,0




      width,height
Xmax,Ymax
 0,0




            width,height
Xmin,Ymin
Xmax,Ymax
 0,0




            width,height
Xmin,Ymin
Xmax,Ymax
 0,0




            width,height
Xmin,Ymin
Cy


3


2


1


0
                         Cx
         0   1   2   3
Cy
                     (1,3)
3
                                 (3,2)
2                            (3,2)

1
             ...
Cx & Cy > 0 int
Cx & Cy <   216
Dict[(cx<<16)|cy]
Cluster : Geometry
Cluster : Geometry

• Original X
• Original Y
• Cluster X
• Cluster Y
• count
ClusterSymbol : Symbol
ClusterSymbol : Symbol

• Draws a Cluster geometry instance
• Flash drawing API
 • beginFill - based on cluster count
 • d...
Demo
DrawSymbol Code
Adaptive Clustering
Adaptive Clustering

• JIT
• “Smart” algorithm - all client side.
• React to map extent change
Given set of map points
Given set of map points
Assign map point to cluster set
Given set of map points
Assign map point to cluster set
do
Given set of map points
Assign map point to cluster set
do
 spatial index clusters
Given set of map points
Assign map point to cluster set
do
 spatial index clusters
 for each cluster Ci
Given set of map points
Assign map point to cluster set
do
 spatial index clusters
 for each cluster Ci
   find adjacent cl...
Given set of map points
Assign map point to cluster set
do
 spatial index clusters
 for each cluster Ci
   find adjacent cl...
Given set of map points
Assign map point to cluster set
do
 spatial index clusters
 for each cluster Ci
   find adjacent cl...
Given set of map points
Assign map point to cluster set
do
 spatial index clusters
 for each cluster Ci
   find adjacent cl...
Given set of map points
Assign map point to cluster set
do
 spatial index clusters
 for each cluster Ci
   find adjacent cl...
Given set of map points
Assign map point to cluster set
do
 spatial index clusters
 for each cluster Ci
   find adjacent cl...
Adjusting Ci location
Adjusting Ci location

      Ci




     Wi
Adjusting Ci location

      Ci
              Cj



              Wj
     Wi
Adjusting Ci location

      Ci
              Cj



              Wj
     Wi
Adjusting Ci location
        Ci=(Ci Wi+CjWj)/WiWj




      Wi+Wj
Demo
ClusterApp
HeatMaps are Bitmaps !
1.<?xml version=quot;1.0quot; encoding=quot;utf-8quot;?>
2.<view:PrepApplication
3. xmlns:mx=quot;http://www.adobe.com/200...
1.<?xml version=quot;1.0quot; encoding=quot;utf-8quot;?>
2.<view:PrepApplication
3. xmlns:mx=quot;http://www.adobe.com/200...
PrepLayer : Layer
PrepLayer : Layer
• Subclass Layer
• Override updateLayer
 • Invoked by updateDisplayList
 • create bitmap - lock/unlock
 ...
PrepLayer
PrepLayer

• Kept data in 2 arrays
 • x = []
 • y = []
• Easy to AMF
• toScreenX/Y built-in functions
Demo
PrecipitationApp
Street Tracing
Street Tracing

• A*
• Create nodes and edges
• Define barriers
• Reverse geocoding
• Custom layer - faster rendering
A* / Path Finding
Streets
Streets
“Street” Graph
“Street” Graph

• Intersection - nodes
• Street Segment - edge
• Travel distance or time - cost
Nodes/Edges/Barriers
Nodes/Edges/Barriers
           C

  A                E
       B


               D
Nodes/Edges/Barriers
           C

  A                E
       B


               D
Nodes/Edges/Barriers
           C

  A                E
       B


               D
Street Info


       n St
   M ai
Street Info
                    200

             n St
         M ai

100
Street Info
                       200
                             199
                n St
            M ai

100
      1...
ReverseGeocoding
ReverseGeocoding
   Main St
Left 100-200
Right 101-199
ReverseGeocoding
   Main St
Left 100-200
Right 101-199   t
ReverseGeocoding
   Main St
Left 100-200
Right 101-199   t
ReverseGeocoding
   Main St
Left 100-200
Right 101-199   t   d
ReverseGeocoding
   Main St
Left 100-200
Right 101-199   t   d
                        153 Main St
Distance Calculations
Distance Calculations

     C

               B

A
Distance Calculations

     C

               B
         P
A
Distance Calculations
                      AC • AB
                 r=
                       ∣AB∣2
         C

         ...
Distance Calculations
                      AC • AB   r≺0 beyond A ↤
                 r=
                       ∣AB∣2
    ...
Distance Calculations
                      AC • AB   r≺0 beyond A ↤
                 r=
                       ∣AB∣2    r...
Distance Calculations
                      AC • AB   r≺0 beyond A ↤
                 r=
                       ∣AB∣2    r...
Distance Calculations
                           AC • AB   r≺0 beyond A ↤
                      r=
                       ...
Distance Calculations
                                  AC • AB   r≺0 beyond A ↤
                             r=
         ...
Distance Calculations
                                  AC • AB   r≺0 beyond A ↤
                             r=
         ...
Distance Calculations
                                  AC • AB   r≺0 beyond A ↤
                             r=
         ...
1.override protected function updateLayer():void{
2. const model:Model = Model.instance;
3. graphics.clear();
4. graphics....
1.override protected function updateLayer():void{
2. const model:Model = Model.instance;
3. graphics.clear();
4. graphics....
1.override protected function updateLayer():void{
2. const model:Model = Model.instance;
3. graphics.clear();
4. graphics....
1.override protected function updateLayer():void{
2. const model:Model = Model.instance;
3. graphics.clear();
4. graphics....
1.override protected function updateLayer():void{
2. const model:Model = Model.instance;
3. graphics.clear();
4. graphics....
1.override protected function updateLayer():void{
2. const model:Model = Model.instance;
3. graphics.clear();
4. graphics....
Demo
StreetTrace
When Will I Use This ?
Q&A
http://thunderheadxpler.blogspot.com
           mraad@esri.com
Mansour Raad & Anthony Jayaprakash - Yet Another Mapping Framework, NOT!
Mansour Raad & Anthony Jayaprakash - Yet Another Mapping Framework, NOT!
Mansour Raad & Anthony Jayaprakash - Yet Another Mapping Framework, NOT!
Mansour Raad & Anthony Jayaprakash - Yet Another Mapping Framework, NOT!
Mansour Raad & Anthony Jayaprakash - Yet Another Mapping Framework, NOT!
Mansour Raad & Anthony Jayaprakash - Yet Another Mapping Framework, NOT!
Mansour Raad & Anthony Jayaprakash - Yet Another Mapping Framework, NOT!
Mansour Raad & Anthony Jayaprakash - Yet Another Mapping Framework, NOT!
Mansour Raad & Anthony Jayaprakash - Yet Another Mapping Framework, NOT!
Mansour Raad & Anthony Jayaprakash - Yet Another Mapping Framework, NOT!
Mansour Raad & Anthony Jayaprakash - Yet Another Mapping Framework, NOT!
Mansour Raad & Anthony Jayaprakash - Yet Another Mapping Framework, NOT!
Mansour Raad & Anthony Jayaprakash - Yet Another Mapping Framework, NOT!
Mansour Raad & Anthony Jayaprakash - Yet Another Mapping Framework, NOT!
Upcoming SlideShare
Loading in...5
×

Mansour Raad & Anthony Jayaprakash - Yet Another Mapping Framework, NOT!

902

Published on

In this session we will demonstrate the Flex Mapping API For ArcGIS Server, where we will deconstruct live real-world mapping applications and algorithms such as dense clustering, auto labeling of features, collaborative editing, real-time asset tracking and client/server collaborative Geo-Processing. In addition, we will demonstrate how to create your own layer, geometry and symbol extensions for superior rendering performance taking advantage of the FP10 drawing API.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
902
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mansour Raad & Anthony Jayaprakash - Yet Another Mapping Framework, NOT!

  1. 1. Yet Another Mapping API - Not ! Mansour Raad mraad@esri.com
  2. 2. www.esri.com/flex
  3. 3. www.esri.com/flex
  4. 4. ArcGIS Services • Map Tiles ESRI / Virtual Earth (token) • Geocoding / Reverse • Query / Identify • Routing with Barriers and Time Windows • Buffer / Projection • GeoProcessing
  5. 5. You & ArcGIS Blaze PHP Local AGS .Net
  6. 6. Map “Hello World”
  7. 7. Map “Hello World” 1.<?xml version=quot;1.0quot; encoding=quot;utf-8quot;?> 2.<mx:Application 3. xmlns:mx=quot;http://www.adobe.com/2006/mxmlquot; 4. xmlns:esri=quot;http://www.esri.com/2008/agsquot; 5. layout=quot;absolutequot; 6. > 7. <esri:Map id=quot;mapquot;> 8. <esri:ArcGISTiledMapServiceLayer url=”http://host/rest/map”/> 9. </esri:Map> 10.</mx:Application>
  8. 8. Map “Hello World” 1.<?xml version=quot;1.0quot; encoding=quot;utf-8quot;?> 2.<mx:Application 3. xmlns:mx=quot;http://www.adobe.com/2006/mxmlquot; 4. xmlns:esri=quot;http://www.esri.com/2008/agsquot; 5. layout=quot;absolutequot; 6. > 7. <esri:Map id=quot;mapquot;> 8. <esri:ArcGISTiledMapServiceLayer url=”http://host/rest/map”/> 9. </esri:Map> 10.</mx:Application>
  9. 9. 1.<?xml version=quot;1.0quot; encoding=quot;utf-8quot;?> 2.<mx:Application 3. xmlns:mx=quot;http://www.adobe.com/2006/mxmlquot; 4. xmlns:esri=quot;http://www.esri.com/2008/agsquot; 5. layout=quot;absolutequot; 6. > 7. <esri:Map id=quot;mapquot; openHandCursorVisible=quot;falsequot; zoomSliderVisible=quot;falsequot;> 8. <esri:ArcGISTiledMapServiceLayer id=quot;layerquot; url=quot;{cb.selectedItem.url}quot;/> 9. </esri:Map> 10. <mx:ComboBox id=quot;cbquot; dataProvider=quot;{[ 11. {label:'Imagery',url:'http://host/rest/Image'}, 12. {label:'Physical',url:'http://host/rest/Physical'} 13. ]}quot;/> 14.</mx:Application>
  10. 10. 1.<?xml version=quot;1.0quot; encoding=quot;utf-8quot;?> 2.<mx:Application 3. xmlns:mx=quot;http://www.adobe.com/2006/mxmlquot; 4. xmlns:esri=quot;http://www.esri.com/2008/agsquot; 5. layout=quot;absolutequot; 6. > 7. <esri:Map id=quot;mapquot; openHandCursorVisible=quot;falsequot; zoomSliderVisible=quot;falsequot;> 8. <esri:ArcGISTiledMapServiceLayer id=quot;layerquot; url=quot;{cb.selectedItem.url}quot;/> 9. </esri:Map> 10. <mx:ComboBox id=quot;cbquot; dataProvider=quot;{[ 11. {label:'Imagery',url:'http://host/rest/Image'}, 12. {label:'Physical',url:'http://host/rest/Physical'} 13. ]}quot;/> 14.</mx:Application>
  11. 11. 1.<?xml version=quot;1.0quot; encoding=quot;utf-8quot;?> 2.<mx:Application 3. xmlns:mx=quot;http://www.adobe.com/2006/mxmlquot; 4. xmlns:esri=quot;http://www.esri.com/2008/agsquot; 5. layout=quot;absolutequot; 6. > 7. <esri:Map id=quot;mapquot; openHandCursorVisible=quot;falsequot; zoomSliderVisible=quot;falsequot;> 8. <esri:ArcGISTiledMapServiceLayer id=quot;layerquot; url=quot;{cb.selectedItem.url}quot;/> 9. </esri:Map> 10. <mx:ComboBox id=quot;cbquot; dataProvider=quot;{[ 11. {label:'Imagery',url:'http://host/rest/Image'}, 12. {label:'Physical',url:'http://host/rest/Physical'} 13. ]}quot;/> 14.</mx:Application>
  12. 12. GeoProcessing DriveTimes
  13. 13. 1. <esri:Geoprocessor id=quot;gpquot; url=quot;<GeoProcessesorURL>quot; showBusyCursor=quot;truequot;/> 2. <esri:Map id=quot;mapquot; openHandCursorVisible=quot;falsequot; mapClick=quot;mapClickHandler(event)quot;> 3. <esri:extent> 4. <esri:Extent xmin=quot;-95.41quot; ymin=quot;38.86quot; xmax=quot;-95.1quot; ymax=quot;39.06quot;> 5. <esri:SpatialReference wkid=quot;4326quot;/> 6. </esri:Extent> 7. </esri:extent> 8. <esri:ArcGISTiledMapServiceLayer url=quot;<MapServiceURL>quot;/> 9. <esri:GraphicsLayer id=quot;polygonLayerquot; graphicProvider=quot;{gp.executeFirstFeatureSet.features}quot;> 10. <esri:renderer> 11. <esri:UniqueValueRenderer attribute=quot;ToBreakquot;> 12. <esri:UniqueValueInfo value=quot;1quot;> 13. <esri:symbol> 14. <esri:SimpleFillSymbol alpha=quot;0.5quot; color=quot;0xFF0000quot;/> 15. </esri:symbol> 16. </esri:UniqueValueInfo> 17. <esri:UniqueValueInfo value=quot;2quot;> 18. <esri:symbol> 19. <esri:SimpleFillSymbol alpha=quot;0.5quot; color=quot;0x00FF00quot;/> 20. </esri:symbol> 21. </esri:UniqueValueInfo> 22. <esri:UniqueValueInfo value=quot;3quot;> 23. <esri:symbol> 24. <esri:SimpleFillSymbol alpha=quot;0.5quot; color=quot;0x0000FFquot;/> 25. </esri:symbol> 26. </esri:UniqueValueInfo> 27. </esri:UniqueValueRenderer> 28. </esri:renderer> 29. </esri:GraphicsLayer> 30. <esri:GraphicsLayer id=quot;pointLayerquot;/> 31. </esri:Map>
  14. 14. 1. <esri:Geoprocessor id=quot;gpquot; url=quot;<GeoProcessesorURL>quot; showBusyCursor=quot;truequot;/> 2. <esri:Map id=quot;mapquot; openHandCursorVisible=quot;falsequot; mapClick=quot;mapClickHandler(event)quot;> 3. <esri:extent> 4. <esri:Extent xmin=quot;-95.41quot; ymin=quot;38.86quot; xmax=quot;-95.1quot; ymax=quot;39.06quot;> 5. <esri:SpatialReference wkid=quot;4326quot;/> 6. </esri:Extent> 7. </esri:extent> 8. <esri:ArcGISTiledMapServiceLayer url=quot;<MapServiceURL>quot;/> 9. <esri:GraphicsLayer id=quot;polygonLayerquot; graphicProvider=quot;{gp.executeFirstFeatureSet.features}quot;> 10. <esri:renderer> 11. <esri:UniqueValueRenderer attribute=quot;ToBreakquot;> 12. <esri:UniqueValueInfo value=quot;1quot;> 13. <esri:symbol> 14. <esri:SimpleFillSymbol alpha=quot;0.5quot; color=quot;0xFF0000quot;/> 15. </esri:symbol> 16. </esri:UniqueValueInfo> 17. <esri:UniqueValueInfo value=quot;2quot;> 18. <esri:symbol> 19. <esri:SimpleFillSymbol alpha=quot;0.5quot; color=quot;0x00FF00quot;/> 20. </esri:symbol> 21. </esri:UniqueValueInfo> 22. <esri:UniqueValueInfo value=quot;3quot;> 23. <esri:symbol> 24. <esri:SimpleFillSymbol alpha=quot;0.5quot; color=quot;0x0000FFquot;/> 25. </esri:symbol> 26. </esri:UniqueValueInfo> 27. </esri:UniqueValueRenderer> 28. </esri:renderer> 29. </esri:GraphicsLayer> 30. <esri:GraphicsLayer id=quot;pointLayerquot;/> 31. </esri:Map>
  15. 15. 1. <esri:Geoprocessor id=quot;gpquot; url=quot;<GeoProcessesorURL>quot; showBusyCursor=quot;truequot;/> 2. <esri:Map id=quot;mapquot; openHandCursorVisible=quot;falsequot; mapClick=quot;mapClickHandler(event)quot;> 3. <esri:extent> 4. <esri:Extent xmin=quot;-95.41quot; ymin=quot;38.86quot; xmax=quot;-95.1quot; ymax=quot;39.06quot;> 5. <esri:SpatialReference wkid=quot;4326quot;/> 6. </esri:Extent> 7. </esri:extent> 8. <esri:ArcGISTiledMapServiceLayer url=quot;<MapServiceURL>quot;/> 9. <esri:GraphicsLayer id=quot;polygonLayerquot; graphicProvider=quot;{gp.executeFirstFeatureSet.features}quot;> 10. <esri:renderer> 11. <esri:UniqueValueRenderer attribute=quot;ToBreakquot;> 12. <esri:UniqueValueInfo value=quot;1quot;> 13. <esri:symbol> 14. <esri:SimpleFillSymbol alpha=quot;0.5quot; color=quot;0xFF0000quot;/> 15. </esri:symbol> 16. </esri:UniqueValueInfo> 17. <esri:UniqueValueInfo value=quot;2quot;> 18. <esri:symbol> 19. <esri:SimpleFillSymbol alpha=quot;0.5quot; color=quot;0x00FF00quot;/> 20. </esri:symbol> 21. </esri:UniqueValueInfo> 22. <esri:UniqueValueInfo value=quot;3quot;> 23. <esri:symbol> 24. <esri:SimpleFillSymbol alpha=quot;0.5quot; color=quot;0x0000FFquot;/> 25. </esri:symbol> 26. </esri:UniqueValueInfo> 27. </esri:UniqueValueRenderer> 28. </esri:renderer> 29. </esri:GraphicsLayer> 30. <esri:GraphicsLayer id=quot;pointLayerquot;/> 31. </esri:Map>
  16. 16. 1. <esri:Geoprocessor id=quot;gpquot; url=quot;<GeoProcessesorURL>quot; showBusyCursor=quot;truequot;/> 2. <esri:Map id=quot;mapquot; openHandCursorVisible=quot;falsequot; mapClick=quot;mapClickHandler(event)quot;> 3. <esri:extent> 4. <esri:Extent xmin=quot;-95.41quot; ymin=quot;38.86quot; xmax=quot;-95.1quot; ymax=quot;39.06quot;> 5. <esri:SpatialReference wkid=quot;4326quot;/> 6. </esri:Extent> 7. </esri:extent> 8. <esri:ArcGISTiledMapServiceLayer url=quot;<MapServiceURL>quot;/> 9. <esri:GraphicsLayer id=quot;polygonLayerquot; graphicProvider=quot;{gp.executeFirstFeatureSet.features}quot;> 10. <esri:renderer> 11. <esri:UniqueValueRenderer attribute=quot;ToBreakquot;> 12. <esri:UniqueValueInfo value=quot;1quot;> 13. <esri:symbol> 14. <esri:SimpleFillSymbol alpha=quot;0.5quot; color=quot;0xFF0000quot;/> 15. </esri:symbol> 16. </esri:UniqueValueInfo> 17. <esri:UniqueValueInfo value=quot;2quot;> 18. <esri:symbol> 19. <esri:SimpleFillSymbol alpha=quot;0.5quot; color=quot;0x00FF00quot;/> 20. </esri:symbol> 21. </esri:UniqueValueInfo> 22. <esri:UniqueValueInfo value=quot;3quot;> 23. <esri:symbol> 24. <esri:SimpleFillSymbol alpha=quot;0.5quot; color=quot;0x0000FFquot;/> 25. </esri:symbol> 26. </esri:UniqueValueInfo> 27. </esri:UniqueValueRenderer> 28. </esri:renderer> 29. </esri:GraphicsLayer> 30. <esri:GraphicsLayer id=quot;pointLayerquot;/> 31. </esri:Map>
  17. 17. 1.<mx:Script> 2. <![CDATA[ 3. import com.esri.ags.tasks.FeatureSet; 4. import com.esri.ags.Graphic; 5. import com.esri.ags.events.MapMouseEvent; 7. private function mapClickHandler(event:MapMouseEvent):void 8. { 9. const graphic:Graphic = new Graphic(event.mapPoint); 10. pointLayer.clear(); 11. pointLayer.add(graphic); 12. const featureSet:FeatureSet = new FeatureSet([graphic]); 13. gp.execute({quot;Input_Locationquot;: featureSet, quot;Drive_Timesquot;: quot;1 2 3quot;}); 14. } 15. ]]> 16.</mx:Script>
  18. 18. 1.<mx:Script> 2. <![CDATA[ 3. import com.esri.ags.tasks.FeatureSet; 4. import com.esri.ags.Graphic; 5. import com.esri.ags.events.MapMouseEvent; 7. private function mapClickHandler(event:MapMouseEvent):void 8. { 9. const graphic:Graphic = new Graphic(event.mapPoint); 10. pointLayer.clear(); 11. pointLayer.add(graphic); 12. const featureSet:FeatureSet = new FeatureSet([graphic]); 13. gp.execute({quot;Input_Locationquot;: featureSet, quot;Drive_Timesquot;: quot;1 2 3quot;}); 14. } 15. ]]> 16.</mx:Script>
  19. 19. Demo Sample 1-2 DriveTimes
  20. 20. Many Children Layers
  21. 21. Many Graphic Layers
  22. 22. GraphicLayer
  23. 23. GraphicLayer • graphicProvider • ArrayCollection • renderer • graphic with no symbol
  24. 24. Graphic
  25. 25. Graphic • UIComponent • Flex life cycle management • geometry • symbol • attributes
  26. 26. Graphic/Geometry
  27. 27. Graphic/Geometry • Geometry - base class • MapPoint • Polyline • Polygon
  28. 28. Polyline/Polygon
  29. 29. Polyline/Polygon • Multi Part Geometry • Islands of Hawaii
  30. 30. Graphic/Symbol
  31. 31. Graphic/Symbol • Symbol - base class • Draws geometry of Graphic • Uses Flash Drawing API
  32. 32. Graphic/Attributes
  33. 33. Graphic/Attributes • Any Object ! • Attach any dynamic property to Graphic
  34. 34. Geometry/Symbol
  35. 35. Geometry/Symbol • [Bindable] Properties • Dispatch CHANGE event
  36. 36. Demo Sample 3-7
  37. 37. LCDS
  38. 38. LCDS • Remote Objects • Messaging • Data Services
  39. 39. Feature
  40. 40. Feature • Serializable server side object • Properties • featureID:int; • geometry:IGeometry; • attributes:ASObject;
  41. 41. public class Feature implements Serializable { private int m_featureId; private IGeometry m_geometry; private ASObject m_attributes; public Feature() { } public int getFeatureId() { return m_featureId; } public void setFeatureId(final int featureId) { m_featureId = featureId; } ...
  42. 42. public class MapPoint implements IGeometry { private double m_x; private double m_y; private SpatialReference m_spatialReference; public MapPoint(){ } public MapPoint(final double x, final double y){ m_x = x; m_y = y; } public double getX(){ return m_x; } public void setX(final double x){ m_x = x; } ...
  43. 43. DS Assembler • fill • createItem • getItem • updateItem • deleteItem
  44. 44. private int m_featureId = 1; private Map<Integer, Feature> m_map = new ConcurrentHashMap<Integer, Feature>(17); public Collection fill(final List fillParameters) { return m_map.values(); } public Object getItem(final Map map) { return m_map.get(map.get(quot;featureIdquot;)); } public void createItem(final Object newVersion) { final Feature Feature = (Feature) newVersion; Feature.setFeatureId(m_featureId++); m_map.put(Feature.getFeatureId(), Feature); } public void updateItem(final Object newVersion, final Object prevVersion, final List changes) { final Feature Feature = (Feature) newVersion; m_map.put(Feature.getFeatureId(), Feature); } public void deleteItem(final Object prevVersion) { final Feature Feature = (Feature) prevVersion; m_map.remove(Feature.getFeatureId()); }
  45. 45. private int m_featureId = 1; private Map<Integer, Feature> m_map = new ConcurrentHashMap<Integer, Feature>(17); public Collection fill(final List fillParameters) { return m_map.values(); } public Object getItem(final Map map) { return m_map.get(map.get(quot;featureIdquot;)); } public void createItem(final Object newVersion) { final Feature Feature = (Feature) newVersion; Feature.setFeatureId(m_featureId++); m_map.put(Feature.getFeatureId(), Feature); } public void updateItem(final Object newVersion, final Object prevVersion, final List changes) { final Feature Feature = (Feature) newVersion; m_map.put(Feature.getFeatureId(), Feature); } public void deleteItem(final Object prevVersion) { final Feature Feature = (Feature) prevVersion; m_map.remove(Feature.getFeatureId()); }
  46. 46. private int m_featureId = 1; private Map<Integer, Feature> m_map = new ConcurrentHashMap<Integer, Feature>(17); public Collection fill(final List fillParameters) { return m_map.values(); } public Object getItem(final Map map) { return m_map.get(map.get(quot;featureIdquot;)); } public void createItem(final Object newVersion) { final Feature Feature = (Feature) newVersion; Feature.setFeatureId(m_featureId++); m_map.put(Feature.getFeatureId(), Feature); } public void updateItem(final Object newVersion, final Object prevVersion, final List changes) { final Feature Feature = (Feature) newVersion; m_map.put(Feature.getFeatureId(), Feature); } public void deleteItem(final Object prevVersion) { final Feature Feature = (Feature) prevVersion; m_map.remove(Feature.getFeatureId()); }
  47. 47. private int m_featureId = 1; private Map<Integer, Feature> m_map = new ConcurrentHashMap<Integer, Feature>(17); public Collection fill(final List fillParameters) { return m_map.values(); } public Object getItem(final Map map) { return m_map.get(map.get(quot;featureIdquot;)); } public void createItem(final Object newVersion) { final Feature Feature = (Feature) newVersion; Feature.setFeatureId(m_featureId++); m_map.put(Feature.getFeatureId(), Feature); } public void updateItem(final Object newVersion, final Object prevVersion, final List changes) { final Feature Feature = (Feature) newVersion; m_map.put(Feature.getFeatureId(), Feature); } public void deleteItem(final Object prevVersion) { final Feature Feature = (Feature) prevVersion; m_map.remove(Feature.getFeatureId()); }
  48. 48. private int m_featureId = 1; private Map<Integer, Feature> m_map = new ConcurrentHashMap<Integer, Feature>(17); public Collection fill(final List fillParameters) { return m_map.values(); } public Object getItem(final Map map) { return m_map.get(map.get(quot;featureIdquot;)); } public void createItem(final Object newVersion) { final Feature Feature = (Feature) newVersion; Feature.setFeatureId(m_featureId++); m_map.put(Feature.getFeatureId(), Feature); } public void updateItem(final Object newVersion, final Object prevVersion, final List changes) { final Feature Feature = (Feature) newVersion; m_map.put(Feature.getFeatureId(), Feature); } public void deleteItem(final Object prevVersion) { final Feature Feature = (Feature) prevVersion; m_map.remove(Feature.getFeatureId()); }
  49. 49. private int m_featureId = 1; private Map<Integer, Feature> m_map = new ConcurrentHashMap<Integer, Feature>(17); public Collection fill(final List fillParameters) { return m_map.values(); } public Object getItem(final Map map) { return m_map.get(map.get(quot;featureIdquot;)); } public void createItem(final Object newVersion) { final Feature Feature = (Feature) newVersion; Feature.setFeatureId(m_featureId++); m_map.put(Feature.getFeatureId(), Feature); } public void updateItem(final Object newVersion, final Object prevVersion, final List changes) { final Feature Feature = (Feature) newVersion; m_map.put(Feature.getFeatureId(), Feature); } public void deleteItem(final Object prevVersion) { final Feature Feature = (Feature) prevVersion; m_map.remove(Feature.getFeatureId()); }
  50. 50. data-management-config.xml
  51. 51. data-management-config.xml <destination id=quot;featurequot;> <properties> <factory>spring</factory> <source>featureAssembler</source> <scope>application</scope> <use-transactions>false</use-transactions> <metadata> <identity property=quot;featureIdquot;/> </metadata> <network> <paging enabled=quot;falsequot; pageSize=quot;10quot;/> </network> </properties> </destination>
  52. 52. Back To The Client :-)
  53. 53. package com.esri.cats { import com.esri.ags.SpatialReference; import com.esri.ags.geometry.MapPoint; import flash.net.registerClassAlias; import mx.core.IMXMLObject; public class ClassAliasRegistry implements IMXMLObject { public function initialized(document:Object, id:String):void { registerClassAlias(quot;com.esri.cats.MapPointquot;, MapPoint); registerClassAlias(quot;com.esri.cats.SpatialReferencequot;, SpatialReference); } } }
  54. 54. package com.esri.cats { import com.esri.ags.SpatialReference; import com.esri.ags.geometry.MapPoint; import flash.net.registerClassAlias; import mx.core.IMXMLObject; public class ClassAliasRegistry implements IMXMLObject { public function initialized(document:Object, id:String):void { registerClassAlias(quot;com.esri.cats.MapPointquot;, MapPoint); registerClassAlias(quot;com.esri.cats.SpatialReferencequot;, SpatialReference); } } }
  55. 55. 1.package com.esri.cats 2.{ 3. import com.esri.ags.geometry.Geometry; 5. [Managed] 6. [RemoteClass(alias=quot;com.esri.cats.Featurequot;)] 7. public class Feature 8. { 9. public var featureId:int; 10. public var geometry:Geometry; 11. public var attributes:Object; 12. 13. public function Feature() 14. { 15. } 16. 17. } 18.}
  56. 56. 1.package com.esri.cats 2.{ 3. import com.esri.ags.geometry.Geometry; 5. [Managed] 6. [RemoteClass(alias=quot;com.esri.cats.Featurequot;)] 7. public class Feature 8. { 9. public var featureId:int; 10. public var geometry:Geometry; 11. public var attributes:Object; 12. 13. public function Feature() 14. { 15. } 16. 17. } 18.}
  57. 57. 1.<cats:ClassAliasRegistry/> 2.<mx:ArrayCollection id=quot;featuresquot; 3. collectionChange=quot;collectionChangeHandler(event)quot;/> 4.<mx:DataService id=quot;dsquot; destination=quot;featurequot;/> 5.<esri:Map id=quot;mapquot; load=quot;ds.fill(features)quot;> 6. <esri:GraphicsLayer id=quot;graphicsLayerquot;/> 7. <esri:GraphicsLayer id=quot;pointLayerquot;> 8. <esri:symbol> 9. <esri:SimpleMarkerSymbol color=quot;0xFFFF00quot;/> 10. </esri:symbol> 11. </esri:GraphicsLayer> 12.</esri:Map>
  58. 58. 1.<cats:ClassAliasRegistry/> 2.<mx:ArrayCollection id=quot;featuresquot; 3. collectionChange=quot;collectionChangeHandler(event)quot;/> 4.<mx:DataService id=quot;dsquot; destination=quot;featurequot;/> 5.<esri:Map id=quot;mapquot; load=quot;ds.fill(features)quot;> 6. <esri:GraphicsLayer id=quot;graphicsLayerquot;/> 7. <esri:GraphicsLayer id=quot;pointLayerquot;> 8. <esri:symbol> 9. <esri:SimpleMarkerSymbol color=quot;0xFFFF00quot;/> 10. </esri:symbol> 11. </esri:GraphicsLayer> 12.</esri:Map>
  59. 59. 1.<cats:ClassAliasRegistry/> 2.<mx:ArrayCollection id=quot;featuresquot; 3. collectionChange=quot;collectionChangeHandler(event)quot;/> 4.<mx:DataService id=quot;dsquot; destination=quot;featurequot;/> 5.<esri:Map id=quot;mapquot; load=quot;ds.fill(features)quot;> 6. <esri:GraphicsLayer id=quot;graphicsLayerquot;/> 7. <esri:GraphicsLayer id=quot;pointLayerquot;> 8. <esri:symbol> 9. <esri:SimpleMarkerSymbol color=quot;0xFFFF00quot;/> 10. </esri:symbol> 11. </esri:GraphicsLayer> 12.</esri:Map>
  60. 60. 1.<cats:ClassAliasRegistry/> 2.<mx:ArrayCollection id=quot;featuresquot; 3. collectionChange=quot;collectionChangeHandler(event)quot;/> 4.<mx:DataService id=quot;dsquot; destination=quot;featurequot;/> 5.<esri:Map id=quot;mapquot; load=quot;ds.fill(features)quot;> 6. <esri:GraphicsLayer id=quot;graphicsLayerquot;/> 7. <esri:GraphicsLayer id=quot;pointLayerquot;> 8. <esri:symbol> 9. <esri:SimpleMarkerSymbol color=quot;0xFFFF00quot;/> 10. </esri:symbol> 11. </esri:GraphicsLayer> 12.</esri:Map>
  61. 61. 1.<cats:ClassAliasRegistry/> 2.<mx:ArrayCollection id=quot;featuresquot; 3. collectionChange=quot;collectionChangeHandler(event)quot;/> 4.<mx:DataService id=quot;dsquot; destination=quot;featurequot;/> 5.<esri:Map id=quot;mapquot; load=quot;ds.fill(features)quot;> 6. <esri:GraphicsLayer id=quot;graphicsLayerquot;/> 7. <esri:GraphicsLayer id=quot;pointLayerquot;> 8. <esri:symbol> 9. <esri:SimpleMarkerSymbol color=quot;0xFFFF00quot;/> 10. </esri:symbol> 11. </esri:GraphicsLayer> 12.</esri:Map>
  62. 62. private function collectionChangeHandler(event:CollectionEvent):void { switch (event.kind) { case CollectionEventKind.RESET: doReset(event); break; case CollectionEventKind.UPDATE: doUpdate(event); break; } }
  63. 63. private function doReset(event:CollectionEvent):void { graphicsLayer.clear(); m_graphicsDict = new Dictionary(); for each (var feature:Feature in features) { var graphic:Graphic = new Graphic(feature.geometry, null, feature); graphic.buttonMode = true; graphic.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); graphic.toolTip = String(feature.attributes.coords).replace(quot; quot;, quot;nquot;); graphicsLayer.add(graphic); m_graphicsDict[feature.featureId] = graphic; } }
  64. 64. private function doReset(event:CollectionEvent):void { graphicsLayer.clear(); m_graphicsDict = new Dictionary(); for each (var feature:Feature in features) { var graphic:Graphic = new Graphic(feature.geometry, null, feature); graphic.buttonMode = true; graphic.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); graphic.toolTip = String(feature.attributes.coords).replace(quot; quot;, quot;nquot;); graphicsLayer.add(graphic); m_graphicsDict[feature.featureId] = graphic; } }
  65. 65. private function doReset(event:CollectionEvent):void { graphicsLayer.clear(); m_graphicsDict = new Dictionary(); for each (var feature:Feature in features) { var graphic:Graphic = new Graphic(feature.geometry, null, feature); graphic.buttonMode = true; graphic.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); graphic.toolTip = String(feature.attributes.coords).replace(quot; quot;, quot;nquot;); graphicsLayer.add(graphic); m_graphicsDict[feature.featureId] = graphic; } }
  66. 66. private function doUpdate(event:CollectionEvent):void { for each (var propertyChangeEvent:PropertyChangeEvent in event.items) { var feature:Feature = propertyChangeEvent.target as Feature; if (propertyChangeEvent.property === quot;geometryquot;) { var graphic:Graphic = m_graphicsDict[feature.featureId]; if (graphic) { graphic.geometry = feature.geometry; } } } }
  67. 67. private function doUpdate(event:CollectionEvent):void { for each (var propertyChangeEvent:PropertyChangeEvent in event.items) { var feature:Feature = propertyChangeEvent.target as Feature; if (propertyChangeEvent.property === quot;geometryquot;) { var graphic:Graphic = m_graphicsDict[feature.featureId]; if (graphic) { graphic.geometry = feature.geometry; } } } }
  68. 68. private function doUpdate(event:CollectionEvent):void { for each (var propertyChangeEvent:PropertyChangeEvent in event.items) { var feature:Feature = propertyChangeEvent.target as Feature; if (propertyChangeEvent.property === quot;geometryquot;) { var graphic:Graphic = m_graphicsDict[feature.featureId]; if (graphic) { graphic.geometry = feature.geometry; } } } }
  69. 69. 1.private function mouseDownHandler(event:MouseEvent):void 2.{ 3. const graphic:Graphic = event.target as Graphic; 4. if (graphic) 5. { 6. m_feature = graphic.attributes as Feature; 7. m_graphic.geometry = map.toMapFromStage(event.stageX, event.stageY); 8. pointLayer.add(m_graphic); 9. map.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); 10. map.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); 11. } 12.} 14.private function mouseMoveHandler(event:MouseEvent):void 15.{ 16. m_graphic.geometry = map.toMapFromStage(event.stageX, event.stageY); 17. event.updateAfterEvent(); 18.} 20.private function mouseUpHandler(event:MouseEvent):void 21.{ 22. m_feature.geometry = m_graphic.geometry; // ALL DS FM is Here :-) 23. m_feature = null; 24. pointLayer.clear(); 25. map.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); 26. map.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); 27.}
  70. 70. 1.private function mouseDownHandler(event:MouseEvent):void 2.{ 3. const graphic:Graphic = event.target as Graphic; 4. if (graphic) 5. { 6. m_feature = graphic.attributes as Feature; 7. m_graphic.geometry = map.toMapFromStage(event.stageX, event.stageY); 8. pointLayer.add(m_graphic); 9. map.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); 10. map.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); 11. } 12.} 14.private function mouseMoveHandler(event:MouseEvent):void 15.{ 16. m_graphic.geometry = map.toMapFromStage(event.stageX, event.stageY); 17. event.updateAfterEvent(); 18.} 20.private function mouseUpHandler(event:MouseEvent):void 21.{ 22. m_feature.geometry = m_graphic.geometry; // ALL DS FM is Here :-) 23. m_feature = null; 24. pointLayer.clear(); 25. map.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); 26. map.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); 27.}
  71. 71. 1.private function mouseDownHandler(event:MouseEvent):void 2.{ 3. const graphic:Graphic = event.target as Graphic; 4. if (graphic) 5. { 6. m_feature = graphic.attributes as Feature; 7. m_graphic.geometry = map.toMapFromStage(event.stageX, event.stageY); 8. pointLayer.add(m_graphic); 9. map.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); 10. map.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); 11. } 12.} 14.private function mouseMoveHandler(event:MouseEvent):void 15.{ 16. m_graphic.geometry = map.toMapFromStage(event.stageX, event.stageY); 17. event.updateAfterEvent(); 18.} 20.private function mouseUpHandler(event:MouseEvent):void 21.{ 22. m_feature.geometry = m_graphic.geometry; // ALL DS FM is Here :-) 23. m_feature = null; 24. pointLayer.clear(); 25. map.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); 26. map.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); 27.}
  72. 72. Demo CATS
  73. 73. “Lots” Features
  74. 74. Spatial Index
  75. 75. Spatial Index • RTree • QuadTree • Grid / Trellis • Simple • Efficient (points) • Good enough !
  76. 76. 0,0 width,height
  77. 77. Xmax,Ymax 0,0 width,height Xmin,Ymin
  78. 78. Xmax,Ymax 0,0 width,height Xmin,Ymin
  79. 79. Xmax,Ymax 0,0 width,height Xmin,Ymin
  80. 80. Cy 3 2 1 0 Cx 0 1 2 3
  81. 81. Cy (1,3) 3 (3,2) 2 (3,2) 1 (0,0) 0 Cx 0 1 2 3
  82. 82. Cx & Cy > 0 int
  83. 83. Cx & Cy < 216
  84. 84. Dict[(cx<<16)|cy]
  85. 85. Cluster : Geometry
  86. 86. Cluster : Geometry • Original X • Original Y • Cluster X • Cluster Y • count
  87. 87. ClusterSymbol : Symbol
  88. 88. ClusterSymbol : Symbol • Draws a Cluster geometry instance • Flash drawing API • beginFill - based on cluster count • drawRoundedRect - based on Cx,Cy
  89. 89. Demo DrawSymbol Code
  90. 90. Adaptive Clustering
  91. 91. Adaptive Clustering • JIT • “Smart” algorithm - all client side. • React to map extent change
  92. 92. Given set of map points
  93. 93. Given set of map points Assign map point to cluster set
  94. 94. Given set of map points Assign map point to cluster set do
  95. 95. Given set of map points Assign map point to cluster set do spatial index clusters
  96. 96. Given set of map points Assign map point to cluster set do spatial index clusters for each cluster Ci
  97. 97. Given set of map points Assign map point to cluster set do spatial index clusters for each cluster Ci find adjacent clusters Cj
  98. 98. Given set of map points Assign map point to cluster set do spatial index clusters for each cluster Ci find adjacent clusters Cj if Cj is close enough to Ci
  99. 99. Given set of map points Assign map point to cluster set do spatial index clusters for each cluster Ci find adjacent clusters Cj if Cj is close enough to Ci assign Cj map points to Ci
  100. 100. Given set of map points Assign map point to cluster set do spatial index clusters for each cluster Ci find adjacent clusters Cj if Cj is close enough to Ci assign Cj map points to Ci remove Cj from cluster set
  101. 101. Given set of map points Assign map point to cluster set do spatial index clusters for each cluster Ci find adjacent clusters Cj if Cj is close enough to Ci assign Cj map points to Ci remove Cj from cluster set adjust Ci location
  102. 102. Given set of map points Assign map point to cluster set do spatial index clusters for each cluster Ci find adjacent clusters Cj if Cj is close enough to Ci assign Cj map points to Ci remove Cj from cluster set adjust Ci location repeat while overlapping clusters exist
  103. 103. Adjusting Ci location
  104. 104. Adjusting Ci location Ci Wi
  105. 105. Adjusting Ci location Ci Cj Wj Wi
  106. 106. Adjusting Ci location Ci Cj Wj Wi
  107. 107. Adjusting Ci location Ci=(Ci Wi+CjWj)/WiWj Wi+Wj
  108. 108. Demo ClusterApp
  109. 109. HeatMaps are Bitmaps !
  110. 110. 1.<?xml version=quot;1.0quot; encoding=quot;utf-8quot;?> 2.<view:PrepApplication 3. xmlns:mx=quot;http://www.adobe.com/2006/mxmlquot; 4. xmlns:esri=quot;http://www.esri.com/2008/agsquot; 5. xmlns:controller=quot;com.esri.controller.*quot; 6. xmlns:view=quot;com.esri.view.*quot; 7. layout=quot;verticalquot; 8. paddingLeft=quot;0quot; 9. paddingRight=quot;0quot; 10. paddingTop=quot;0quot; 11. paddingBottom=quot;0quot; 12. > 13. <controller:LoadCommand/> 14. <view:PrepSlider/> 15. <view:PrepMap> 16. <view:extent> 17. <esri:Extent xmin=quot;-143.141073quot; ymin=quot;14.930875quot; xmax=quot;-48.0570833quot; ymax=quot;57.649769quot;/> 18. </view:extent> 19. <esri:ArcGISTiledMapServiceLayer 20. url=quot;http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServerquot;/> 21. <view:PrepLayer/> 22. </view:PrepMap> 23.</view:PrepApplication>
  111. 111. 1.<?xml version=quot;1.0quot; encoding=quot;utf-8quot;?> 2.<view:PrepApplication 3. xmlns:mx=quot;http://www.adobe.com/2006/mxmlquot; 4. xmlns:esri=quot;http://www.esri.com/2008/agsquot; 5. xmlns:controller=quot;com.esri.controller.*quot; 6. xmlns:view=quot;com.esri.view.*quot; 7. layout=quot;verticalquot; 8. paddingLeft=quot;0quot; 9. paddingRight=quot;0quot; 10. paddingTop=quot;0quot; 11. paddingBottom=quot;0quot; 12. > 13. <controller:LoadCommand/> 14. <view:PrepSlider/> 15. <view:PrepMap> 16. <view:extent> 17. <esri:Extent xmin=quot;-143.141073quot; ymin=quot;14.930875quot; xmax=quot;-48.0570833quot; ymax=quot;57.649769quot;/> 18. </view:extent> 19. <esri:ArcGISTiledMapServiceLayer 20. url=quot;http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServerquot;/> 21. <view:PrepLayer/> 22. </view:PrepMap> 23.</view:PrepApplication>
  112. 112. PrepLayer : Layer
  113. 113. PrepLayer : Layer • Subclass Layer • Override updateLayer • Invoked by updateDisplayList • create bitmap - lock/unlock • bitmap.fillRect each heat map point • graphic.bitmapFill / drawRect
  114. 114. PrepLayer
  115. 115. PrepLayer • Kept data in 2 arrays • x = [] • y = [] • Easy to AMF • toScreenX/Y built-in functions
  116. 116. Demo PrecipitationApp
  117. 117. Street Tracing
  118. 118. Street Tracing • A* • Create nodes and edges • Define barriers • Reverse geocoding • Custom layer - faster rendering
  119. 119. A* / Path Finding
  120. 120. Streets
  121. 121. Streets
  122. 122. “Street” Graph
  123. 123. “Street” Graph • Intersection - nodes • Street Segment - edge • Travel distance or time - cost
  124. 124. Nodes/Edges/Barriers
  125. 125. Nodes/Edges/Barriers C A E B D
  126. 126. Nodes/Edges/Barriers C A E B D
  127. 127. Nodes/Edges/Barriers C A E B D
  128. 128. Street Info n St M ai
  129. 129. Street Info 200 n St M ai 100
  130. 130. Street Info 200 199 n St M ai 100 101
  131. 131. ReverseGeocoding
  132. 132. ReverseGeocoding Main St Left 100-200 Right 101-199
  133. 133. ReverseGeocoding Main St Left 100-200 Right 101-199 t
  134. 134. ReverseGeocoding Main St Left 100-200 Right 101-199 t
  135. 135. ReverseGeocoding Main St Left 100-200 Right 101-199 t d
  136. 136. ReverseGeocoding Main St Left 100-200 Right 101-199 t d 153 Main St
  137. 137. Distance Calculations
  138. 138. Distance Calculations C B A
  139. 139. Distance Calculations C B P A
  140. 140. Distance Calculations AC • AB r= ∣AB∣2 C B r P A
  141. 141. Distance Calculations AC • AB r≺0 beyond A ↤ r= ∣AB∣2 C B r P A
  142. 142. Distance Calculations AC • AB r≺0 beyond A ↤ r= ∣AB∣2 r≻0 beyond B ↦ C B r P A
  143. 143. Distance Calculations AC • AB r≺0 beyond A ↤ r= ∣AB∣2 r≻0 beyond B ↦ C 1 Ax Bx Cx A= 2 Ay By Cy B r P A
  144. 144. Distance Calculations AC • AB r≺0 beyond A ↤ r= ∣AB∣2 r≻0 beyond B ↦ C 1 Ax Bx Cx A= 2 Ay By Cy height B r P A
  145. 145. Distance Calculations AC • AB r≺0 beyond A ↤ r= ∣AB∣2 r≻0 beyond B ↦ C 1 Ax Bx Cx A= 2 Ay By Cy height B r P base A
  146. 146. Distance Calculations AC • AB r≺0 beyond A ↤ r= ∣AB∣2 r≻0 beyond B ↦ C 1 Ax Bx Cx A= 2 Ay By Cy height B P base×height r A= base 2 A
  147. 147. Distance Calculations AC • AB r≺0 beyond A ↤ r= ∣AB∣2 r≻0 beyond B ↦ C 1 Ax Bx Cx A= 2 Ay By Cy height B P base×height r A= base 2 A AP=rAB
  148. 148. 1.override protected function updateLayer():void{ 2. const model:Model = Model.instance; 3. graphics.clear(); 4. graphics.lineStyle(1, 0); 5. model.streetGrid.search(map.extent, streetHandler); 6.} 8.private function streetHandler(street:Street, data:Object = null):void{ 9. for each(var path:Array in street.shpPolyline.paths){ 10. var index:int = 0; 11. var lastX:Number = toScreenX(path[index++]); 12. var lastY:Number = toScreenY(path[index++]); 13. graphics.moveTo(lastX, lastY); 14. while(index < path.length){ 15. var currX:Number = toScreenX(path[index++]); 16. var currY:Number = toScreenY(path[index++]); 17. if( currX !== lastX || currY !== lastY){ 18. graphics.lineTo(currX, currY); 19. lastX = currX; 20. lastY = currY; 21. } 22. } 23. } 24.}
  149. 149. 1.override protected function updateLayer():void{ 2. const model:Model = Model.instance; 3. graphics.clear(); 4. graphics.lineStyle(1, 0); 5. model.streetGrid.search(map.extent, streetHandler); 6.} 8.private function streetHandler(street:Street, data:Object = null):void{ 9. for each(var path:Array in street.shpPolyline.paths){ 10. var index:int = 0; 11. var lastX:Number = toScreenX(path[index++]); 12. var lastY:Number = toScreenY(path[index++]); 13. graphics.moveTo(lastX, lastY); 14. while(index < path.length){ 15. var currX:Number = toScreenX(path[index++]); 16. var currY:Number = toScreenY(path[index++]); 17. if( currX !== lastX || currY !== lastY){ 18. graphics.lineTo(currX, currY); 19. lastX = currX; 20. lastY = currY; 21. } 22. } 23. } 24.}
  150. 150. 1.override protected function updateLayer():void{ 2. const model:Model = Model.instance; 3. graphics.clear(); 4. graphics.lineStyle(1, 0); 5. model.streetGrid.search(map.extent, streetHandler); 6.} 8.private function streetHandler(street:Street, data:Object = null):void{ 9. for each(var path:Array in street.shpPolyline.paths){ 10. var index:int = 0; 11. var lastX:Number = toScreenX(path[index++]); 12. var lastY:Number = toScreenY(path[index++]); 13. graphics.moveTo(lastX, lastY); 14. while(index < path.length){ 15. var currX:Number = toScreenX(path[index++]); 16. var currY:Number = toScreenY(path[index++]); 17. if( currX !== lastX || currY !== lastY){ 18. graphics.lineTo(currX, currY); 19. lastX = currX; 20. lastY = currY; 21. } 22. } 23. } 24.}
  151. 151. 1.override protected function updateLayer():void{ 2. const model:Model = Model.instance; 3. graphics.clear(); 4. graphics.lineStyle(1, 0); 5. model.streetGrid.search(map.extent, streetHandler); 6.} 8.private function streetHandler(street:Street, data:Object = null):void{ 9. for each(var path:Array in street.shpPolyline.paths){ 10. var index:int = 0; 11. var lastX:Number = toScreenX(path[index++]); 12. var lastY:Number = toScreenY(path[index++]); 13. graphics.moveTo(lastX, lastY); 14. while(index < path.length){ 15. var currX:Number = toScreenX(path[index++]); 16. var currY:Number = toScreenY(path[index++]); 17. if( currX !== lastX || currY !== lastY){ 18. graphics.lineTo(currX, currY); 19. lastX = currX; 20. lastY = currY; 21. } 22. } 23. } 24.}
  152. 152. 1.override protected function updateLayer():void{ 2. const model:Model = Model.instance; 3. graphics.clear(); 4. graphics.lineStyle(1, 0); 5. model.streetGrid.search(map.extent, streetHandler); 6.} 8.private function streetHandler(street:Street, data:Object = null):void{ 9. for each(var path:Array in street.shpPolyline.paths){ 10. var index:int = 0; 11. var lastX:Number = toScreenX(path[index++]); 12. var lastY:Number = toScreenY(path[index++]); 13. graphics.moveTo(lastX, lastY); 14. while(index < path.length){ 15. var currX:Number = toScreenX(path[index++]); 16. var currY:Number = toScreenY(path[index++]); 17. if( currX !== lastX || currY !== lastY){ 18. graphics.lineTo(currX, currY); 19. lastX = currX; 20. lastY = currY; 21. } 22. } 23. } 24.}
  153. 153. 1.override protected function updateLayer():void{ 2. const model:Model = Model.instance; 3. graphics.clear(); 4. graphics.lineStyle(1, 0); 5. model.streetGrid.search(map.extent, streetHandler); 6.} 8.private function streetHandler(street:Street, data:Object = null):void{ 9. for each(var path:Array in street.shpPolyline.paths){ 10. var index:int = 0; 11. var lastX:Number = toScreenX(path[index++]); 12. var lastY:Number = toScreenY(path[index++]); 13. graphics.moveTo(lastX, lastY); 14. while(index < path.length){ 15. var currX:Number = toScreenX(path[index++]); 16. var currY:Number = toScreenY(path[index++]); 17. if( currX !== lastX || currY !== lastY){ 18. graphics.lineTo(currX, currY); 19. lastX = currX; 20. lastY = currY; 21. } 22. } 23. } 24.}
  154. 154. Demo StreetTrace
  155. 155. When Will I Use This ?
  156. 156. Q&A http://thunderheadxpler.blogspot.com mraad@esri.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×