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;