Arcgis地图实战二：地图实时轨迹展示

1.最终效果预览

2.定时器执行方法

进入页面执行执行器

this.locationInterval = setInterval(() => {
                            this.getCurrentPosition();
                        }, this.conf.LocateInterval);

离开页面销毁

clearInterval(this.locationInterval);

this.conf.LocateInterval为获取的数据同步中的定时器间隔时间为毫秒值

3.获取坐标

基于高德定位功能获取的坐标，并将高德坐标gcj02转为84坐标系坐标，然后调用封装的通用方法将坐标画到地图上

getCurrentPosition() {
        let obj = {
            androidOption: {
                locationMode: 1,
                gpsFirst: false,
                HttpTimeOut: 30000,
                interval: 2000,
                needAddress: true,
                onceLocation: true,
                onceLocationLatest: false,
                locationProtocol: 1,
                sensorEnable: false,
                wifiScan: true,
                locationCacheEnable: false
            },
            iosOption: {
                desiredAccuracy: 4,
                pausesLocationUpdatesAutomatically: "YES",
                allowsBackgroundLocationUpdates: "NO",
                locationTimeout: 10,
                reGeocodeTimeout: 5,
                locatingWithReGeocode: "YES"
            }
        };
        (<any>window).GaoDe.getCurrentPosition((location) => {
            let gcj = this.transform.gcj_decrypt(location.latitude, location.longitude);
            this.mapTool.MapCenterAt(gcj.lon, gcj.lat, undefined);

        }, (e) => {
            console.log("getCurrentPosition err:" + JSON.stringify(e));
        }, obj);
    }

4.地图上画点并判断是否处于屏幕边缘

this.mapTool.MapCenterAt(x, y, undefined);

将点画到图层上this.addGraphicsToMapRealTime(mapPoint, false, false);
判断点是否在屏幕边缘，如果点在屏幕边缘，将isCenter设为true,并将点放到屏幕中央

mapCenterAt: function (x, y, scale) {
					var mapPoint = new Point(x, y, this.map.spatialReference);
					if (scale != undefined) {
					    this.map.setScale(scale);
						   this.map.centerAt(mapPoint);
					} else {
						this.addGraphicsToMapRealTime(mapPoint, false, false);
						let isCenter = false
						let mHeight = this.map.height ;
						let mWidth = this.map.width ;
						let screenWH = this.map.toScreen(mapPoint);
						let sX = screenWH.x;
						let sY = screenWH.y;
						if (sX >= mWidth || sY >= mHeight || sX <= 0 || sY <= 0) {
							isCenter = true;
						}
						if (isCenter) {
							this.map.centerAt(mapPoint);
						}
                        
					}
				},

5.将点添加到图层中

addGraphicsToMapRealTime: function (geometry, location, flash, attributes, infoTemplate) {
					var symbol = this._symbol.getSymbol("point", "locatemarksymbol");
					var symbolPoint = this._symbol.getSymbol("point", "realpoint");
					if (location) {
						this.map.graphics.clear();
					}
					if (this.layerArr.length == 0) {
						this.map.graphics.clear();
					}
					var gl = this.GetGraphicLayerById("ssgjLayer");
					var gg = new Graphic(geometry, symbol);
					this.layerArr.push(gg)
					if (this.layerArr && this.layerArr.length > 0) {
						for (var i = 0; i < this.layerArr.length; i++) {
							var gg2 = new Graphic(this.layerArr[i].geometry, symbolPoint);
							if (i < this.layerArr.length - 1) {
								gl.remove(this.layerArr[i])
								gl.add(gg2);

							}
						}
					}

					var _graphic = gl.add(gg);
				},

6.地图上标记symbol标识

当标记为locatemarksymbol时，显示小人图片用PictureMarkerSymbol，当标记为realpoint时，显示一个圆点用SimpleMarkerSymbol

    case "locatemarksymbol":
						symbol = PictureMarkerSymbol(this._baseImgUrl+'focus.png', 24, 24);
						break;
					case "realpoint":
						symbol = new SimpleMarkerSymbol({
							  "color": [255,0,0,128],
							  "size": 5,
							  "angle": -30,
							  "xoffset": 0,
							  "yoffset": 0,
							  "type": "esriSMS",
							  "style": "esriSMSCircle",
							});

						break;