import { Component, OnInit } from '@angular/core';
import { EsriLoaderService } from 'angular-esri-loader';
@Component({
selector: 'app-demo',
templateUrl: './demo.component.html',
styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {
map: __esri.Map;
mapView: __esri.MapView;
constructor(private esriLoader: EsriLoaderService) { }
ngOnInit() {
return this.esriLoader.load({
}).then(res => {
this.esriLoader.loadModules([
'esri/Map',
'esri/views/MapView',
'esri/layers/FeatureLayer',
'esri/renderers/SimpleRenderer',
'esri/symbols/SimpleMarkerSymbol',
'esri/Color',
'esri/tasks/QueryTask',
'esri/tasks/support/Query',
'esri/geometry/SpatialReference',
'esri/layers/GraphicsLayer',
'esri/Graphic',
'esri/geometry/Point',
'esri/layers/Layer',
'dojo/domReady!'
]).then(([Map, MapView, FeatureLayer, SimpleMarkerSymbol, SimpleRenderer, Color,
QueryTask, Query, SpatialReference, GraphicsLayer, Graphic,
Point, Layer]:
[__esri.MapConstructor, __esri.MapViewConstructor,
__esri.FeatureLayerConstructor, __esri.SimpleMarkerSymbolConstructor,
__esri.SimpleRendererConstructor, __esri.ColorConstructor,
__esri.QueryTaskConstructor, __esri.QueryConstructor,
__esri.SpatialReferenceConstructor, __esri.GraphicsLayerConstructor,
__esri.GraphicConstructor, __esri.PointConstructor, __esri.Layer]) => {
this.map = new Map({
basemap: "hybrid"
});
this.mapView = new MapView({
zoom: 13,
center: [121.5, 25],
container: 'map',
map: this.map
})
let sym = new SimpleMarkerSymbol({
size: 10,
color: new Color("#0000FF"),
style: 'square',
outline: {
color: new Color("#FFFF00"),
width: 3
}
});
var markerSymbol = new SimpleMarkerSymbol({
color: new Color([226, 119, 40]),
outline: { // autocasts as new SimpleLineSymbol()
color: new Color([255, 255, 255]),
width: 2
}
});
this.mapView.on('click', evt => {
let pt = this.mapView.toScreen(evt.mapPoint);
let gc = new Graphic({
geometry: evt.mapPoint,
symbol: markerSymbol
});
this.mapView.graphics.add(gc);
console.log(evt.mapPoint);
});
});
});
}
}
