Skip to content

Commit f981755

Browse files
willian-fengwillian-feng
authored
feat: MapView的几个属性实现 (#26)
1 parent 5d00f70 commit f981755

File tree

6 files changed

+218
-97
lines changed

6 files changed

+218
-97
lines changed

‎harmony/maps/src/main/cpp/Props.cpp

+1-1
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ namespace react {
4545
showsScale(convertRawProp(context, rawProps, "showsScale", sourceProps.showsScale, {true})),
4646
showsBuildings(convertRawProp(context, rawProps, "showsBuildings", sourceProps.showsBuildings, {true})),
4747
showsTraffic(convertRawProp(context, rawProps, "showsTraffic", sourceProps.showsTraffic, {false})),
48-
showsIndoors(convertRawProp(context, rawProps, "showsIndoors", sourceProps.showsTraffic, {true})),
48+
showsIndoors(convertRawProp(context, rawProps, "showsIndoors", sourceProps.showsIndoors, {true})),
4949
showsIndoorLevelPicker(convertRawProp(context, rawProps, "showsIndoorLevelPicker", sourceProps.showsIndoorLevelPicker, {false})),
5050
zoomEnabled(convertRawProp(context, rawProps, "zoomEnabled", sourceProps.zoomEnabled, {true})),
5151
zoomTapEnabled(convertRawProp(context, rawProps, "zoomTapEnabled", sourceProps.zoomTapEnabled, {true})),

‎harmony/maps/src/main/ets/AIRMaps/AIRMap.ets

+119-31
Original file line numberDiff line numberDiff line change
@@ -20,16 +20,20 @@
2020
* SOFTWARE.
2121
*/
2222

23-
import { RNViewBase, Tag, RNComponentContext, ComponentBuilderContext} from '@rnoh/react-native-openharmony';
24-
23+
import { RNViewBase, Tag, RNComponentContext } from '@rnoh/react-native-openharmony';
2524
import abilityAccessCtrl, { Permissions } from '@ohos.abilityAccessCtrl';
2625
import common from '@ohos.app.ability.common';
27-
import {map, mapCommon, MapComponent} from '@kit.MapKit'
26+
import { map, mapCommon, MapComponent } from '@kit.MapKit'
2827
import { AsyncCallback, BusinessError } from '@kit.BasicServicesKit';
2928
import { bundleManager } from '@kit.AbilityKit';
30-
3129
import { mapsComponentFactoryBuilder } from '../MapsComponentFactory'
32-
import { Camera, DEFAULT_ZOOM, EdgePadding, LatLng, Region, TAG } from '../sharedTypes';
30+
import {
31+
Camera,
32+
DEFAULT_ZOOM,
33+
HmMapStyleElement,
34+
MapStyleElement,
35+
Region
36+
} from '../sharedTypes';
3337
import { MapsManager } from '../MapsManager';
3438
import { AIRMapDescriptor } from './AIRMapDescriptorTypes';
3539
import { MapsTurboManager } from '../MapsTurboManager';
@@ -46,6 +50,7 @@ export struct AIRMap {
4650
tag: number = 0
4751
@BuilderParam public renderChildren: () => void
4852
@State descriptor: AIRMapDescriptor = {} as AIRMapDescriptor
53+
@State loadingEnabled: boolean = false;
4954
protected cleanUpCallbacks: (() => void)[] = []
5055
private callback?: AsyncCallback<map.MapComponentController>;
5156
private mapController?: map.MapComponentController = undefined;
@@ -56,8 +61,35 @@ export struct AIRMap {
5661
this.descriptor = this.ctx.descriptorRegistry.getDescriptor<AIRMapDescriptor>(this.tag)
5762
this.cleanUpCallbacks.push(this.ctx.descriptorRegistry.subscribeToDescriptorChanges(this.tag,
5863
(newDescriptor) => {
59-
this.descriptor = (newDescriptor as AIRMapDescriptor)
60-
LWLog('AIRMap.subscribeToDescriptorChanges=' + JSON.stringify(newDescriptor))
64+
this.descriptor = (newDescriptor as AIRMapDescriptor);
65+
66+
// 更新属性
67+
this.mapController?.setMapType(this.getMapType());
68+
this.mapController?.setPadding(this.descriptor.rawProps.mapPadding);
69+
this.mapController?.setMinZoom(this.descriptor.rawProps.minZoomLevel);
70+
this.mapController?.setMaxZoom(this.descriptor.rawProps.maxZoomLevel);
71+
this.mapController?.setZoomGesturesEnabled(this.descriptor.rawProps.zoomEnabled);
72+
this.mapController?.setZoomControlsEnabled(this.descriptor.rawProps.zoomControlEnabled);
73+
this.mapController?.setRotateGesturesEnabled(this.descriptor.rawProps.rotateEnabled);
74+
this.mapController?.setScrollGesturesEnabled(this.descriptor.rawProps.scrollEnabled);
75+
this.mapController?.setScaleControlsEnabled(this.descriptor.rawProps.showsScale);
76+
this.mapController?.setAlwaysShowScaleEnabled(this.descriptor.rawProps.showsScale);
77+
this.mapController?.setTiltGesturesEnabled(this.descriptor.rawProps.pitchEnabled);
78+
this.mapController?.setBuildingEnabled(this.descriptor.rawProps.showsBuildings);
79+
this.mapController?.setMyLocationEnabled(this.descriptor.rawProps.showsUserLocation);
80+
this.mapController?.setMyLocationControlsEnabled(this.descriptor.rawProps.showsMyLocationButton);
81+
this.mapController?.setCompassControlsEnabled(this.descriptor.rawProps.showsCompass);
82+
this.mapController?.setTrafficEnabled(this.descriptor.rawProps.showsTraffic);
83+
this.mapController?.setDayNightMode(this.descriptor.rawProps.userInterfaceStyle === 'dark' ? mapCommon.DayNightMode.NIGHT : mapCommon.DayNightMode.DAY);
84+
if (this.descriptor.rawProps.compassOffset) {
85+
this.mapController?.setCompassPosition({
86+
positionX: this.descriptor.rawProps.compassOffset.x,
87+
positionY: this.descriptor.rawProps.compassOffset.y,
88+
});
89+
}
90+
if (this.descriptor.rawProps.customMapStyle) {
91+
this.mapController?.setCustomMapStyle({ styleContent: JSON.stringify(this.customMapStyleConversion(this.descriptor.rawProps.customMapStyle)) });
92+
}
6193
}
6294
));
6395

@@ -90,29 +122,49 @@ export struct AIRMap {
90122
if (!err) {
91123
// 获取地图的控制器类，用来操作地图
92124
this.mapController = _mapController;
93-
this.mapController.setMyLocationEnabled(this.descriptor.rawProps.showsUserLocation)
125+
this.loadingEnabled = false;
126+
127+
// 设置初始化结束后，需要设置的属性
128+
this.mapController.setTrafficEnabled(this.descriptor.rawProps.showsTraffic); // 路况图层
129+
this.mapController.setMyLocationEnabled(this.descriptor.rawProps.showsUserLocation);
130+
this.mapController.setBuildingEnabled(this.descriptor.rawProps.showsBuildings);
131+
if (this.descriptor.rawProps.compassOffset) {
132+
this.mapController.setCompassPosition({
133+
positionX: this.descriptor.rawProps.compassOffset.x,
134+
positionY: this.descriptor.rawProps.compassOffset.y,
135+
});
136+
}
137+
if (this.descriptor.rawProps.customMapStyle) {
138+
this.mapController.setCustomMapStyle({ styleContent: JSON.stringify(this.customMapStyleConversion(this.descriptor.rawProps.customMapStyle)) });
139+
}
140+
94141
if (this.mapController.isMyLocationEnabled()) {
95142
let applyResult = 0;
96-
//检查权限
143+
// 检查权限
97144
for (let permission of permissions) {
98145
let grantStatus: abilityAccessCtrl.GrantStatus = await this.checkAccessToken(permission);
99-
LWLog('AIRMap.aboutToAppear----->permission=' + permission + ' status=' + grantStatus);
100-
//abilityAccessCtrl.GrantStatus.PERMISSION_GRANTED
146+
LWLog('AIRMap.aboutToAppear----->permission=' + permission + ' status=' + grantStatus);
101147
applyResult += grantStatus;
102148
}
103-
//没有权限去申请权限
149+
// 没有权限去申请权限
104150
if (applyResult !== 0) {
105151
applyResult = await this.reqPermissionsFromUser(permissions);
106152
}
107153
if (applyResult === 0) {
108-
LWLog('AIRMap.aboutToAppear----->权限申请通过')
154+
LWLog('AIRMap.aboutToAppear----->权限申请通过')
109155
// 启用我的位置图层
110156
this.mapController?.setMyLocationEnabled(true);
157+
this.mapController?.setMyLocationStyle({
158+
displayType: this.descriptor.rawProps.followsUserLocation
159+
? mapCommon.MyLocationDisplayType.FOLLOW
160+
: mapCommon.MyLocationDisplayType.DEFAULT
161+
});
162+
111163
// 我的位置按钮
112164
this.mapController?.setMyLocationControlsEnabled(this.descriptor.rawProps.showsMyLocationButton);
165+
113166
// 首次设置我的位置
114167
geoLocationManager.getCurrentLocation().then((result) => {
115-
console.log('current location: ' + JSON.stringify(result));
116168
// 设置用户的位置
117169
let position: geoLocationManager.Location = {
118170
"latitude": result.latitude,
@@ -137,7 +189,7 @@ export struct AIRMap {
137189
}
138190
MapsManager.getInstance().initMapComponentController(this.mapController)
139191

140-
//mapview
192+
// mapview
141193
this.mapController.on("mapLoad", () => {
142194
this.ctx.rnInstance.emitComponentEvent(this.descriptor.tag, AIR_MAP_TYPE, { type: "onMapReady" });
143195
});
@@ -149,7 +201,7 @@ export struct AIRMap {
149201
LWLog('AIRMap.aboutToAppear.callback.mapLongClick');
150202
this.ctx.rnInstance.emitComponentEvent(this.descriptor.tag, AIR_MAP_TYPE, { type: "onLongPress", coordinate: latLng });
151203
});
152-
//marker
204+
// marker
153205
this.mapController.on("markerClick", (marker) => {
154206
LWLog('AIRMap.aboutToAppear.callback.markerClick');
155207
this.ctx.rnInstance.emitComponentEvent(this.descriptor.tag, AIR_MAP_TYPE, { type: "onMarkerPress", coordinate: marker.getPosition() });
@@ -194,7 +246,7 @@ export struct AIRMap {
194246
});
195247
});
196248
this.mapController.on("cameraMove", () => {
197-
//LWLog('AIRMap.aboutToAppear.callback.cameraMove');
249+
// LWLog('AIRMap.aboutToAppear.callback.cameraMove');
198250
});
199251
this.mapController.on("poiClick", (poi) => {
200252
LWLog('AIRMap.aboutToAppear.callback.poiClick', JSON.stringify(poi));
@@ -207,6 +259,7 @@ export struct AIRMap {
207259
}
208260
};
209261

262+
this.loadingEnabled = this.descriptor.rawProps.loadingEnabled ?? false;
210263
this.mapOptions = {
211264
mapType: this.getMapType(),
212265
position: {
@@ -225,11 +278,12 @@ export struct AIRMap {
225278
scaleControlsEnabled: this.descriptor.rawProps.showsScale,
226279
alwaysShowScaleEnabled: this.descriptor.rawProps.showsScale,
227280
scrollGesturesEnabled: this.descriptor.rawProps.scrollEnabled,
228-
tiltGesturesEnabled: true,
281+
tiltGesturesEnabled: this.descriptor.rawProps.pitchEnabled,
229282
zoomGesturesEnabled: this.descriptor.rawProps.zoomEnabled,
230283
zoomControlsEnabled: this.descriptor.rawProps.zoomControlEnabled,
231284
myLocationControlsEnabled: this.descriptor.rawProps.showsMyLocationButton,
232285
compassControlsEnabled: this.descriptor.rawProps.showsCompass,
286+
dayNightMode: this.descriptor.rawProps.userInterfaceStyle === 'dark' ? mapCommon.DayNightMode.NIGHT : mapCommon.DayNightMode.DAY,
233287
padding: {
234288
left: this.descriptor.rawProps.mapPadding?.left,
235289
top: this.descriptor.rawProps.mapPadding?.top,
@@ -240,20 +294,40 @@ export struct AIRMap {
240294
}
241295

242296
aboutToDisappear() {
243-
this.mapController?.off('mapLoad', ()=>{});
244-
this.mapController?.off('mapClick', ()=>{});
245-
this.mapController?.off('mapLongClick', ()=>{});
246-
this.mapController?.off('markerClick', ()=>{});
247-
this.mapController?.off('markerDrag', ()=>{});
248-
this.mapController?.off('markerDragEnd', ()=>{});
249-
this.mapController?.off('markerDragStart', ()=>{});
250-
this.mapController?.off('cameraChange', ()=>{});
251-
this.mapController?.off('cameraMove', ()=>{});
252-
this.mapController?.off('poiClick', ()=>{});
297+
this.mapController?.off('mapLoad', () => {});
298+
this.mapController?.off('mapClick', () => {});
299+
this.mapController?.off('mapLongClick', () => {});
300+
this.mapController?.off('markerClick', () => {});
301+
this.mapController?.off('markerDrag', () => {});
302+
this.mapController?.off('markerDragEnd', () => {});
303+
this.mapController?.off('markerDragStart', () => {});
304+
this.mapController?.off('cameraChange', () => {});
305+
this.mapController?.off('cameraMove', () => {});
306+
this.mapController?.off('poiClick', () => {});
253307
this.cleanUpCallbacks.forEach(cb => cb())
254308
MapsManager.getInstance().initMapComponentController(undefined);
255309
}
256310

311+
customMapStyleConversion(resource: MapStyleElement[]): HmMapStyleElement[] {
312+
const arr2obj = (arr: object[]) => {
313+
const obj: object = new Object();
314+
arr.forEach(arrItem => {
315+
Object.keys(arrItem).forEach(key => {
316+
obj[key] = arrItem[key];
317+
});
318+
});
319+
return obj;
320+
};
321+
return resource.map(item => {
322+
return {
323+
mapFeature: item.featureType,
324+
options: item.elementType,
325+
paint: arr2obj(item.stylers),
326+
visibility: 'inherit',
327+
} as HmMapStyleElement;
328+
});
329+
}
330+
257331
public animateToRegion(region: Region, duration: number) {
258332
let mapCamera = {
259333
target: { latitude: region.latitude, longitude: region.longitude },
@@ -274,13 +348,14 @@ export struct AIRMap {
274348
case 'terrain':
275349
return mapCommon.MapType.TERRAIN;
276350
default:
277-
//others not support
278351
return undefined;
279352
}
280353
}
281354

282355
getCameraOption() {
283-
let lat: number = 39.9, lng: number = 118.9, zoom: number = DEFAULT_ZOOM;
356+
let lat: number = 39.9089236;
357+
let lng: number = 116.3991428;
358+
let zoom: number = DEFAULT_ZOOM;
284359
if (this.descriptor.rawProps.camera) {
285360
lat = this.descriptor.rawProps.camera.center.latitude;
286361
lng = this.descriptor.rawProps.camera.center.longitude;
@@ -295,8 +370,15 @@ export struct AIRMap {
295370
} else if (this.descriptor.rawProps.initialRegion) {
296371
lat = this.descriptor.rawProps.initialRegion.latitude;
297372
lng = this.descriptor.rawProps.initialRegion.longitude;
373+
} else {
298374
}
299-
return { center: {latitude: lat!!, longitude: lng}, zoom: MapsTurboManager.getInstance().getCameraZoom(zoom), pitch: 1, heading: 1, altitude: 1} as Camera;
375+
return {
376+
center: { latitude: lat ?? 39.9089236, longitude: lng ?? 116.3991428 },
377+
zoom: MapsTurboManager.getInstance().getCameraZoom(zoom),
378+
pitch: 0,
379+
heading: 0,
380+
altitude: 0
381+
} as Camera;
300382
}
301383

302384
async reqPermissionsFromUser(permissions: Array<Permissions>): Promise<number> {
@@ -352,6 +434,12 @@ export struct AIRMap {
352434
tag,
353435
this.ctx.rnInstance.getComponentNameFromDescriptorType(this.ctx.descriptorRegistry.getDescriptor(tag)?.type))
354436
}, (tag: Tag) => tag.toString())
437+
if (this.loadingEnabled) {
438+
LoadingProgress()
439+
.color(this.descriptor.rawProps.loadingIndicatorColor)
440+
.backgroundColor(this.descriptor.rawProps.loadingBackgroundColor)
441+
.width('100%')
442+
}
355443
}
356444
}
357445
}

‎harmony/maps/src/main/ets/AIRMaps/AIRMapDescriptorTypes.ts

+4
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,10 @@ export interface AIRMapRawProps extends ViewRawProps {
5757
showsScale: boolean,
5858
showsUserLocation: boolean;
5959
showsMyLocationButton: boolean,
60+
userInterfaceStyle: 'light' | 'dark';
61+
showsBuildings: boolean;
62+
showsTraffic: boolean;
63+
pitchEnabled: boolean;
6064
provider: string;
6165
userLocationAnnotationTitle: string;
6266
}

0 commit comments

Comments
 (0)