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 = falselet 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;
