Flutter 接入MapBox地图

文章目录

接入步骤
本地化
放大地图
画标记，画线
闪退原因
图层问题
反地理编码
两点之间的距离
相机始终在运动点的范围内
表达式用于数据驱动样式

接入步骤

之前并没有接过地图的经验，所以看文档也用了一段时间，
1.在mapbox官网注册账号，获取access_token,secret_token,如果地图样式要用mapbox studio做的，token就不能用默认的
2.在module 的build.gradle 导入库 api ‘com.mapbox.mapboxsdk:mapbox-android-sdk:9.6.1’，我使用9.6.1版本，v10现在也已出，不过看文档较少，就先用这个版本试试水
3.在project的build.gradle 导入

allprojects {repositories {google()jcenter()mavenCentral()maven {url 'https://api.mapbox.com/downloads/v2/releases/maven'authentication {basic(BasicAuthentication)}credentials {// Do not change the username below.// This should always be `mapbox` (not your username).username = 'mapbox'// Use the secret token you stored in gradle.properties as the passwordpassword = 'YOUR_TOKEN'}}}
}

4.在gradle.properties 中加入secret_token

MAPBOX_DOWNLOADS_TOKEN=YOUR_TOKEN

5.在清单文件中加入权限

    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

6.在application中统一初始化地图

Mapbox.getInstance(mContext!!, mContext!!.getString(R.string.mapbox_access_token))

7.正式接入地图
通过AndroidView 在flutter中调用android的地图代码，加载地图之前要确保定位权限已开，否则闪退

 private val mapView: MapView = MapView(context)private lateinit var mapboxMap: MapboxMapinit {this.mapView.onCreate(null)this.mapView.getMapAsync{ mapboxMap ->this.mapboxMap = mapboxMapmapboxMap.setStyle(Style.DARK) {// Create and customize the LocationComponent's optionsval customLocationComponentOptions = LocationComponentOptions.builder(context).trackingGesturesManagement(true).pulseEnabled(true)//设置打开定位脉冲.pulseColor(0x770000FF)  //设置脉冲颜色.pulseInterpolator(BounceInterpolator())  //设置脉冲动画插值.bearingDrawable(R.mipmap.ic_run_location)  //设置定位图标图片.accuracyColor(Color.TRANSPARENT)   .build()val locationComponentActivationOptions = LocationComponentActivationOptions.builder(context, it).locationComponentOptions(customLocationComponentOptions).useDefaultLocationEngine(true).build()// Get an instance of the LocationComponent and then adjust its settingsmapboxMap.locationComponent.apply {// Activate the LocationComponent with optionsactivateLocationComponent(locationComponentActivationOptions)// Enable to make the LocationComponent visibleisLocationComponentEnabled = true// Set the LocationComponent's camera modecameraMode = CameraMode.TRACKING_COMPASS// Set the LocationComponent's render moderenderMode = RenderMode.COMPASS}}}}

本地化

mapbox虽是全球地图，但中国的地图没有高德详细，但。。。懂的都懂，没办法只能替换了，如果想要地图的语言适配设备语言，只需要加入另一个库

api 'com.mapbox.mapboxsdk:mapbox-android-plugin-localization-v9:0.12.0'

private val mapView: MapView = MapView(context)private lateinit var mapboxMap: MapboxMap**private lateinit var localizationPlugin:LocalizationPlugin**init {this.mapView.onCreate(null)this.mapView.getMapAsync{ mapboxMap ->this.mapboxMap = mapboxMapmapboxMap.setStyle(Style.Builder().fromUri("asset://style.json")) {**localizationPlugin = LocalizationPlugin(mapView, mapboxMap, it)try {localizationPlugin.matchMapLanguageWithDeviceDefault()} catch (exception:RuntimeException) {Log.d("lii", exception.toString())}**// Create and customize the LocationComponent's optionsval customLocationComponentOptions = LocationComponentOptions.builder(context).trackingGesturesManagement(true).pulseEnabled(true).pulseColor(0x770000FF).pulseInterpolator(BounceInterpolator()).bearingDrawable(R.mipmap.ic_run_location).accuracyColor(Color.TRANSPARENT).build()val locationComponentActivationOptions = LocationComponentActivationOptions.builder(context, it).locationComponentOptions(customLocationComponentOptions).useDefaultLocationEngine(true).build()// Get an instance of the LocationComponent and then adjust its settingsmapboxMap.locationComponent.apply {// Activate the LocationComponent with optionsactivateLocationComponent(locationComponentActivationOptions)// Enable to make the LocationComponent visibleisLocationComponentEnabled = true// Set the LocationComponent's camera modecameraMode = CameraMode.TRACKING_COMPASS// Set the LocationComponent's render moderenderMode = RenderMode.COMPASS}}}}

放大地图

之前用如下代码放大地图，时大时小的
//mapboxMap.animateCamera(CameraUpdateFactory.zoomTo(17.0))
之后改用如下操作，最大最小缩放值都设置
mapboxMap.setMaxZoomPreference(17.0)
mapboxMap.setMinZoomPreference(16.0)

画标记，画线

由于数据源各不相同，所以只列了画线核心代码

lineManager = LineManager(mapView, mapboxMap, it)
var lineOptions =  LineOptions().withLatLngs(it)   //把坐标数组放入接口.withLineColor(ColorUtils.colorToRgbaString(Color.argb(255, 255, 91, 61))).withLineWidth(5.0f)lineManager.lineCap = Property.LINE_CAP_ROUND  //设置圆角，避免画的线不平滑lineManager.create(lineOptions)

    private val START_SOURCE_ID = "start_source_id"private val START_LAYER_ID = "start_layer_id"private val START_IMAGE_ID = "start_image_id"val source = GeoJsonSource(START_SOURCE_ID)source.setGeoJson(Point.fromLngLat(start[1],start[0]))style.addSource(source)style.addImage(START_IMAGE_ID, mContext.getDrawable(R.drawable.ic_map_start)!!)val symbolLayer = SymbolLayer(START_LAYER_ID, START_SOURCE_ID).withProperties(/* show image with id title based on the value of the name feature property */iconImage(START_IMAGE_ID),/* set anchor of icon to bottom */iconAnchor(Property.ICON_ANCHOR_BOTTOM),/* all info window and marker image to appear at the same time*/iconAllowOverlap(true),iconSize(0.5f),iconOffset(arrayOf(-10f, 5f)))style.addLayer(symbolLayer)

闪退原因

刚接入mapbox时经常闪退，每次退出此地图，或者进入另一个地图就会闪退，提示

You're calling `cancelTransitions` after the `MapView` was destroyed, were you invoking it after `onDestroy()`?You're calling `jumpTo` after the `MapView` was destroyed, were you invoking it after `onDestroy()`?You're calling `getCameraValues` after the `MapView` was destroyed, were you invoking it after `onDestroy()`?java.lang.NullPointerException: Attempt to invoke virtual method 'java.lang.Class java.lang.Object.getClass()' on a null object referenceat android.animation.PropertyValuesHolder.setObjectValues(PropertyValuesHolder.java:663)at android.animation.PropertyValuesHolder.ofObject(PropertyValuesHolder.java:406)at android.animation.ValueAnimator.setObjectValues(ValueAnimator.java:524)at com.mapbox.mapboxsdk.location.MapboxAnimator.<init>(MapboxAnimator.java:67)at com.mapbox.mapboxsdk.location.MapboxLatLngAnimator.<init>(MapboxLatLngAnimator.java:13)at com.mapbox.mapboxsdk.location.MapboxAnimatorProvider.latLngAnimator(MapboxAnimatorProvider.java:28)at com.mapbox.mapboxsdk.location.LocationAnimatorCoordinator.createNewLatLngAnimator(LocationAnimatorCoordinator.java:332)at com.mapbox.mapboxsdk.location.LocationAnimatorCoordinator.updateCameraAnimators(LocationAnimatorCoordinator.java:292)at com.mapbox.mapboxsdk.location.LocationAnimatorCoordinator.feedNewLocation(LocationAnimatorCoordinator.java:118)at com.mapbox.mapboxsdk.location.LocationComponent.updateLocation(LocationComponent.java:1622)at com.mapbox.mapboxsdk.location.LocationComponent.updateLocation(LocationComponent.java:1593)at com.mapbox.mapboxsdk.location.LocationComponent.access$1000(LocationComponent.java:103)at com.mapbox.mapboxsdk.location.LocationComponent$CurrentLocationEngineCallback.onSuccess(LocationComponent.java:1809)at com.mapbox.mapboxsdk.location.LocationComponent$CurrentLocationEngineCallback.onSuccess(LocationComponent.java:1797)at com.mapbox.android.core.location.MapboxFusedLocationEngineImpl$MapboxLocationEngineCallbackTransport.onLocationChanged(MapboxFusedLocationEngineImpl.java:117)at android.location.LocationManager$LocationListenerTransport.acceptLocation(LocationManager.java:2742)at android.location.LocationManager$LocationListenerTransport.lambda$enkW18B0WwpQkSIMmVChmQ2YwC8(Unknown Source:0)at android.location.-$$Lambda$LocationManager$LocationListenerTransport$enkW18B0WwpQkSIMmVChmQ2YwC8.accept(Unknown Source:6)at com.android.internal.util.function.pooled.PooledLambdaImpl.doInvoke(PooledLambdaImpl.java:292)at com.android.internal.util.function.pooled.PooledLambdaImpl.invoke(PooledLambdaImpl.java:201)at com.android.internal.util.function.pooled.OmniFunction.run(OmniFunction.java:97)at android.os.Handler.handleCallback(Handler.java:938)at android.os.Handler.dispatchMessage(Handler.java:99)at android.os.Looper.loop(Looper.java:236)at android.app.ActivityThread.main(ActivityThread.java:8043)at java.lang.reflect.Method.invoke(Native Method)at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:620)at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1011)

看到LocationComponent字眼，想到是不是加入定位功能才出现的bug，屏蔽后果然不会闪退了，于是在销毁地图时把定位功能关闭，或许定位时有动画没有销毁导致空指针异常

override fun dispose() {mapboxMap.locationComponent.onStop()mapView.onDestroy()}

图层问题

在画线和画标记时，图层的叠加渲染问题，点的图层在线上还是在线下是个问题，
之前没用symbleLayer 而是用symbleManager

    private lateinit var symbolManager:SymbolManagerprivate lateinit var symbol: SymbolsymbolManager = SymbolManager(mapView, mapboxMap, it)style.addImage("ic_map_start",com.mapbox.mapboxsdk.utils.BitmapUtils.getBitmapFromDrawable(mContext.getDrawable(R.drawable.ic_map_start))!!,false)
symbolManager.iconAllowOverlap = trueval start = drawMapLine.list[0]// Add symbol at specified lat/lonsymbol = symbolManager.create(SymbolOptions().withLatLng( LatLng(start[0], start[1])).withIconImage("ic_map_start").withIconSize(0.5f).withDraggable(true))

用addLayer()就会符合正常逻辑一样，后add的Layer则在上层

反地理编码

mapbox有提供API对坐标进行反地理编码，location为经度，纬度组合字符串，types筛选了省市级别，语言筛选为简体中文，默认返回英文省市，根据返回的json格式，获取想要的信息即可

https://api.mapbox.com/geocoding/v5/mapbox.places/{location}.json?access_token=“”&types=place,region&language=zh-CN

两点之间的距离

location即为两点坐标，以分号间隔，这个接口是路线规划API，只是其中包含了距离字段，其中有骑行，跑步，走路的路线规划。

https://api.mapbox.com/directions/v5/mapbox/cycling/{location}?access_token=“”

相机始终在运动点的范围内

其实就是把相机移动到该点的位置

mapboxMap.animateCamera(CameraUpdateFactory.newLatLng(sections.last().last()))

表达式用于数据驱动样式

表达式（Expression）是我遇到的难点，之前一直没怎么看懂，想要在一条线上画不同的颜色，分小段画太费时，需要10s左右，这还是可以解决的点，但是线段一旦太多，必须要放大到一定程度才能看到完整线段，换成点画成线，放大之后就是离散的点了。。。。这个可不好控制，毕竟坐标点数随机，也不可能去找这种规律，直接放弃。找遍所有的例子，发现路线渐变颜色还是有点沾边，只是不知道stop()要怎么控制，还看了一个根据树木大小画不同半径大小的圆在地图上的例子，虽然例子与实际场景很接近，但是源不一样，就不知道如何下手，打开链接看看里面的源是怎么回事，发现他已经做成了一个瓦片集，每棵树位置都已经在地图上，可是实际场景的源是一串坐标点，也许也可以根据每个点设置颜色属性，再根据该属性设置线的颜色，不过没试过，本人用的渐变颜色

style.addLayer(LineLayer("linelayer", "line-source").withProperties(lineCap(Property.LINE_CAP_ROUND),lineJoin(Property.LINE_JOIN_ROUND),lineWidth(5.0f),lineGradient(interpolate(linear(), lineProgress(), *arrayStop))  //关键代码，利用线性插值，由0到1，逐渐改变每点的颜色，就把线段分成10个点，每个点的颜色放到arrayStop数组里 ，如[stop(1/10, Colors.RED),stop(2/10, Colors.YELLOW)],   linear(), lineProgress()都是表达式，还有zoom(),甚至根据自己定义的属性取值如get("DBH"),相对interpolate 还有step ，match ))