简介
- 本文采用RN桥接原生UI的方案集成高德3d地图sdk，
- 本文示例地图显示、可视区、画线路、打标注点，
- 本文依照高德开放平台官网，分别集成的ios、android端的sdk，在集成步骤中未添加其他操作，
- 需要一定RN和原生功底。
效果示例
image.png
1、准备工作
- 创建rn工程
-
在高德开放平台控制台注册key，例如
image.png
2、ios端
- 集成ios端sdk，参考高德开放平台/ios平台/ios地图sdk
- 在Appdelegate.m中注册高德sdk服务
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
moduleName:@"yjwl"
initialProperties:nil];
rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
UIViewController *rootViewController = [UIViewController new];
rootViewController.view = rootView;
UINavigationController * nav = [[UINavigationController alloc]initWithRootViewController:rootViewController];
nav.navigationBarHidden = YES;
self.window.rootViewController = nav;
[self.window makeKeyAndVisible];
//高德地图
[AMapServices sharedServices].apiKey = @"fa0e6dfc4fddffc273e8cae91834ea91";
[AMapServices sharedServices].enableHTTPS = YES;
//高德地图
return YES;
}
- 桥接类 LinesMapViewManager.m
#import <React/RCTUIManager.h>
#import <MAMapKit/MAMapKit.h>
#import "LinesMapView.h"
@interface LinesMapViewManager : RCTViewManager <MAMapViewDelegate>
@end
@implementation LinesMapViewManager
RCT_EXPORT_MODULE(LinesMapView)
/**
* 显示区域
*/
RCT_CUSTOM_VIEW_PROPERTY(region, MACoordinateRegion,LinesMapView)
{
NSLog(@"json%@",json);
CLLocationCoordinate2D center = (CLLocationCoordinate2D){[json[@"latitude"] doubleValue],[json[@"longitude"] doubleValue]};
MACoordinateSpan span = (MACoordinateSpan){[json[@"latitudeDelta"] doubleValue],[json[@"longitudeDelta"] doubleValue]};
MACoordinateRegion r = (MACoordinateRegion){center,span};
if (view.loaded) {
view.region = r;
} else {
view.initialRegion = r;
}
}
/**
* 规划线路
*/
RCT_CUSTOM_VIEW_PROPERTY(polyline, NSArray,LinesMapView){
NSLog(@"json%@",json);
NSInteger len = [(NSArray*)json count];
CLLocationCoordinate2D coords[len];
for (int i = 0; i<len ; i++) {
coords[i].latitude = [((NSArray*)json)[i][@"latitude"] doubleValue];
coords[i].longitude = [((NSArray*)json)[i][@"longitude"] doubleValue];
}
MAPolyline * commonPolyline = [MAPolyline polylineWithCoordinates:coords count:len];
[view addOverlay: commonPolyline];
}
/**
* 打标记点
*/
RCT_CUSTOM_VIEW_PROPERTY(marker, NSArray,LinesMapView){
NSLog(@"json%@",json);
NSArray * markers = (NSArray *) json;
//标记点
for (id point in markers) {
MAPointAnnotation * pointAnnotatio = [[MAPointAnnotation alloc] init];
pointAnnotatio.title = point[@"title"];
pointAnnotatio.coordinate = CLLocationCoordinate2DMake([point[@"latitude"] doubleValue],[point[@"longitude"] doubleValue]);
[view addAnnotation:pointAnnotatio];
}
}
- (UIView *)view {
LinesMapView *mapView = [LinesMapView new];
mapView.centerCoordinate = CLLocationCoordinate2DMake(39.9242, 116.3979);
mapView.zoomLevel = 10;
mapView.delegate = self;
return mapView;
}
- (MAOverlayRenderer *)mapView:(MAMapView *)mapView rendererForOverlay:(id <MAOverlay>)overlay
{
if ([overlay isKindOfClass:[MAPolyline class]])
{
MAPolylineRenderer *polylineRenderer = [[MAPolylineRenderer alloc] initWithPolyline:overlay];
polylineRenderer.lineWidth = 6.f;
polylineRenderer.strokeColor = [UIColor blueColor];
polylineRenderer.lineDashType = kMALineDashTypeSquare;
return polylineRenderer;
}
return nil;
}
#pragma mark - MAMapViewDelegate
- (MAAnnotationView*)mapView:(MAMapView *)mapView viewForAnnotation:(id <MAAnnotation>)annotation {
if ([annotation isKindOfClass:[MAPointAnnotation class]])
{
static NSString *pointReuseIndetifier = @"pointReuseIndetifier";
MAPinAnnotationView *annotationView = (MAPinAnnotationView*)[mapView dequeueReusableAnnotationViewWithIdentifier:pointReuseIndetifier];
if (annotationView == nil)
{
annotationView = [[MAPinAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:pointReuseIndetifier];
}
annotationView.canShowCallout = YES;
annotationView.animatesDrop = YES;
annotationView.draggable = YES;
if([annotation.title isEqualToString: @"终点"]){
annotationView.pinColor =MAPinAnnotationColorPurple;
}
return annotationView;
}
return nil;
}
- (void)mapInitComplete:(LinesMapView *)mapView {
mapView.loaded = YES;
// struct 里的值会被初始化为 0，这里以此作为条件，判断 initialRegion 是否被设置过
// 但实际上经度为 0 是一个合法的坐标，只是考虑到高德地图只在中国使用，就这样吧
if (mapView.initialRegion.center.latitude != 0) {
mapView.region = mapView.initialRegion;
}
//显示气泡
for (MAPointAnnotation * anno in mapView.annotations) {
if([anno.title isEqualToString:@"装货点"]){
[mapView selectAnnotation:anno animated:YES];
}
}
}
@end
- 地图实体类LinesMapView.h 和 LinesMapView.m
#import <MAMapKit/MAMapKit.h>
NS_ASSUME_NONNULL_BEGIN
@interface LinesMapView : MAMapView
@property(nonatomic) BOOL loaded;
@property(nonatomic) MACoordinateRegion initialRegion;
@end
NS_ASSUME_NONNULL_END
#import "LinesMapView.h"
@implementation LinesMapView {
BOOL _isBoundsInit;
}
- (instancetype)init {
_isBoundsInit = NO;
self = [super init];
return self;
}
- (void)setFrame:(CGRect)frame {
if (!_isBoundsInit) {
[super setFrame:frame];
}
}
- (void)setBounds:(CGRect)bounds {
_isBoundsInit = YES;
[super setBounds:bounds];
}
@end
3、android端
- 集成android端sdk，参考高德开放平台/android平台/android地图sdk
- 在AndroidManifest.xml中注册高德地图sdk服务
<meta-data
android:name="com.amap.api.v2.apikey"
android:value="3942039ab596c16fe7db4b3cd402e873"/>
- 桥接类 LinesMapViewManager
package com.yjwld.utils;
import android.graphics.Color;
import com.amap.api.maps.AMap;
import com.amap.api.maps.CameraUpdateFactory;
import com.amap.api.maps.model.LatLng;
import com.amap.api.maps.model.LatLngBounds;
import com.amap.api.maps.model.Marker;
import com.amap.api.maps.model.MarkerOptions;
import com.amap.api.maps.model.Polyline;
import com.amap.api.maps.model.PolylineOptions;
import com.facebook.react.bridge.ReadableArray;
import com.facebook.react.bridge.ReadableMap;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.ViewGroupManager;
import com.facebook.react.uimanager.annotations.ReactProp;
import java.util.ArrayList;
import java.util.List;
public class LinesMapViewManager extends ViewGroupManager<LinesMapView> {
@Override
public String getName() {
return "LinesMapView";
}
/**
* 重写 createViewInstance 方法，返回自定义的原生组件
* @param reactContext
* @return
*/
@Override
protected LinesMapView createViewInstance(ThemedReactContext reactContext) {
return new LinesMapView(reactContext);
}
@ReactProp( name = "polyline")
public void setPolyline(LinesMapView mapView , ReadableArray polyline){
List<LatLng> latLngs = new ArrayList<LatLng>();
for (int i=0 ; i < polyline.size() ; i++){
ReadableMap map = polyline.getMap(i);
latLngs.add(new LatLng( map.getDouble("latitude"),map.getDouble("longitude")));
}
Polyline polyline_ = mapView.getMap().addPolyline(new PolylineOptions().
addAll(latLngs).width(20).color(Color.BLUE));
polyline_.setDottedLine(true);
}
@ReactProp( name = "marker")
public void setMarker(LinesMapView mapView , ReadableArray marker){
AMap aMap = mapView.getMap();
//可视区域
LatLngBounds.Builder boundsBuilder = new LatLngBounds.Builder();//存放所有点的经纬度
for (int i=0 ; i < marker.size() ; i++){
ReadableMap map = marker.getMap(i);
//marker标注
Marker marker_ = aMap.addMarker(new MarkerOptions().position(new LatLng(map.getDouble("latitude"),map.getDouble("longitude"))).title(map.getString("title")));
if(i==0){
marker_.showInfoWindow();
}
boundsBuilder.include(marker_.getPosition());
}
//地图跳转到可是区域
aMap.animateCamera(CameraUpdateFactory.newLatLngBounds(boundsBuilder.build(), 100));////第二个参数为四周留空宽度
}
}
- 地图实体类 LinesMapView
package com.yjwld.utils;
import android.content.Context;
import com.amap.api.maps.TextureMapView;
public class LinesMapView extends TextureMapView {
public LinesMapView(Context context) {
super(context);
super.onCreate(null);
}
}
- 将桥接类注册到RN模块包中
package com.yjwld.utils;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
public class ReactModulePackage implements ReactPackage {
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
List<NativeModule> modules = new ArrayList<>();
modules.add(new UtilModule(reactContext));
modules.add(new LocationModule(reactContext));
return modules;
}
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
List<ViewManager> managers = new ArrayList<>();
managers.add(new LinesMapViewManager());
return managers;
}
}
- 将ReactModulePackage注册到MainApplication中
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new ReactModulePackage()//sg工具类
);
}
4、RN端调度
- rn中专门写一个js文件便于调用ios端和android端的桥接原生UI。
- LinesMapView.js
import React, { Component } from 'react';
import { requireNativeComponent, NativeModules } from 'react-native';
import PropTypes from "prop-types";
export default class LinesMapView extends Component {
render() {
return (
<LinesMap
{...this.props}
/>
);
}
}
LinesMapView.propTypes = {
region: PropTypes.shape({
latitude: PropTypes.number.isRequired,
longitude: PropTypes.number.isRequired,
latitudeDelta: PropTypes.number.isRequired,
longitudeDelta: PropTypes.number.isRequired
}),
polyline: PropTypes.arrayOf(PropTypes.shape({
latitude: PropTypes.number.isRequired,
longitude: PropTypes.number.isRequired,
})),
marker: PropTypes.arrayOf(PropTypes.shape({
latitude: PropTypes.number.isRequired,
longitude: PropTypes.number.isRequired,
title: PropTypes.string.isRequired,
})).isRequired,
}
const LinesMap = requireNativeComponent('LinesMapView', LinesMapView);
5、RN中使用
import LinesMapView from '../tmpl/LinesMapView'
<LinesMapView
style={{ flex: 1 }}
region={{
latitude: (39.902136 + 39.832136) / 2,
longitude: (116.44095 + 116.34095) / 2,
latitudeDelta: (39.902136 - 39.832136) + 0.1,
longitudeDelta: (116.44095 - 116.34095) + 0.1
}}
polyline={[
{ latitude: 39.832136, longitude: 116.34095 },
{ latitude: 39.832136, longitude: 116.42095 },
{ latitude: 39.902136, longitude: 116.42095 },
{ latitude: 39.902136, longitude: 116.44095 },
]}
marker={[
{ latitude: 39.832136, longitude: 116.34095, title: '装货点' },
{ latitude: 39.902136, longitude: 116.44095, title: '终点' },
]}
/>
附注
- 参考react-native-amap3d，因为这个插件在ios端必须使用pods工程集成，而且部分细节不能满足项目要求，所以决心自己动手。
- 小弟原本想集成高德2d地图sdk，无奈时间有限没有读透高德地图公开的api。
- 感谢拨冗翻阅，不足之处请留言指点。
