更新记录

1.3（2022-11-25）

1.定位适配优化 2.增加定位自身位置功能

1.2（2022-07-24）

初步发布版本，完善markdown文件

平台兼容性

原生插件通用使用流程：

1. 购买插件，选择该插件绑定的项目。
2. 在HBuilderX里找到项目，在manifest的app原生插件配置中勾选模块，如需要填写参数则参考插件作者的文档添加。
3. 根据插件作者的提供的文档开发代码，在代码中引用插件，调用插件功能。
4. 打包自定义基座，选择插件，得到自定义基座，然后运行时选择自定义基座，进行log输出测试。
5. 开发完毕后正式云打包

付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios

注意事项：使用HBuilderX2.7.14以下版本，如果同一插件且同一appid下购买并绑定了多个包名，提交云打包界面提示包名绑定不一致时，需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择

目录

一、ZkxUniMapBoxView简介
二、示例
三、传参对象和属性
四、方法
五、事件

下载demo，随便哪个都可以【demo中有天地图底图，其需要token，每天有限额的，我用的个人版，如果底图不出来，大概是超额了，等明天看】

1.下载使用Android Studio打包的demo
2.下载使用云打包的demo

项目示例demo

项目示例已上传，需要使用的时候，下载到本地，然后点击试用，即可直接用。

一、ZkxUniMapBoxView简介

ZkxUniMapBoxView，基于mapbox android sdk9.7.1版本，将mapbox一些常用的功能改造为了uniapp的插件。

用前必看

1.该插件仅支持Android端，iOS应该不会有了【因为我是搞Android的】，所以使用必须慎重！！！

2.mapbox和高德、百度的使用差异很大，里面涉及了source、layer、geojson、symbol、热力图、点线面圆、多点线面圆等多种要素，对地图知识要求较高，有mapbox使用经验者更适合

3.mapbox移动端sdk使用的是web墨卡托投影，坐标系是WGS84坐标系——不支持经纬度投影。

4.mapbox可以用来叠加天地图、mapbox家的地图、谷歌地图、自己发布的地图——但是不要叠加高德和百度的，因为根本不是一套坐标系。

5.天地图采用的是CGCS2000坐标系。——非高精度的大多数情况下，我们可以认为WGS84坐标系=CGCS2000坐标系,2000坐标系与WGS84坐标系偏差不大，因为CGCS2000坐标系与WGS84坐标系的原点、尺度、定向及定向演变的定义都是相同的，参考椭球的参数略有不同而已。相同的坐标点，在CGCS2000与WGS84下，经度是相同的，只在纬度上存有0.11mm上下的区别，可以忽略掉。

6.uni.requireNativeplugin()不需要，不需要，不需要，直接使用ZkxUniMapBoxView控件就可以

实现功能

1.常规地图操作，如添加底图、放大、缩小、定位、缩放到某个位置或者区域

2.批量绘制和移除单点、单线、单面、单圆类型，显示点击气泡

3.高阶操作，添加矢量mvt、栅格、geojson的数据源，叠加栅格、点线面圆图层【OGC标准，支持Multi的点线面】、热力图等图层

关于mapbox官网地图和token

1.插件主要设计给天地图等使用，因token问题，不支持直接使用mapbox官方的地图
2.如果明确需要使用mapbox的token和地图服务，请您在其官网自己申请token，然后使用Android studio在主应用模块的strings.xml文件中，加上uniapp_plugin_mapbox_token，写入token

二、示例，直接复制拿去用

地图控件

<ZkxUniMapBoxView ref="zkxMapBoxView" style="width: 100%;height: 500px;" @onError="onError"
            @onCameraMove="onCameraMove" @onMapLongClick="onMapLongClick" :mapOptions="{
            styleWebUrl:"【这里是用户自己写的style.json的url】",
            logoEnabled: true,
            tiltGesturesEnabled: true,
            rotateGesturesEnabled: true,
            isForbiddenAllGestures: false,
            defaultCameraPosition: {
                lat: 25.6555,
                lng: 110.545658,
                zoom: 12,
                isShowAnimation:false,
            },
            isShowUserLocation:true,
            isShowScaleBar:true}"></ZkxUniMapBoxView>

一些方法

1.设置地图style

this.$refs.zkxMapBoxView.jsSetMapStyleByJson(【这里是json字符串】);
this.$refs.zkxMapBoxView.jsSetMapStyleByWebUrl(【这里是一个webUrl】);

2.放大

this.$refs.zkxMapBoxView.jsZoomIn();        

3.缩放到某个范围

this.$refs.zkxMapBoxView.jsMoveCameraByBounds({
                    boundsCoordinates: [
                        [119.1045, 35.58764558],
                        [119.65464, 35.5464416],
                        [119.1464464, 35.546646]
                    ],
                    padding: 100,
                    isShowAnimation: true
                }); 

4.缩放到某个位置

myMapView.jsMoveCameraByPosition({
                            lat: 25.10467575,
                            lng: 156.9787325,
                            zoom: 1,
                            isShowAnimation: true
                        });

5.批量绘制点——icon-image使用图标比较特殊

                var myMapView = this.$refs.zkxMapBoxView;
                myMapView.jsDrawSymbolList([{
                    id: "symbol001",
                    title: "一号symbol",
                    objectData: "原生携带数据001",
                    lat: 39.908287806179985,
                    lng: 116.24736785888672,
                    "text-size": 15,
                    //天地图的字体是这个的
                    "text-font": ["WenQuanYi Micro Hei Mono"],
                    "text-field": "显示文字1",
                    "text-color": "#ff0000",
                    "text-halo-color": "#ffffff",
                    "text-halo-width": 1,
                    "text-offset": [0, 2],
                    "icon-image": iconImageIdAdvancedType111
                }, {
                    id: "symbol002",
                    title: "二号symbol",
                    objectData: {
                        "name": "小红",
                        "address": "北京"
                    },
                    lat: 39.908946186502526,
                    lng: 116.12686157226561,
                    "text-size": 15,
                    //天地图的字体是这个的
                    "text-font": ["WenQuanYi Micro Hei Mono"],
                    "text-field": "显示文字2",
                    "text-color": "#ff0000",
                    "text-halo-color": "#ffffff",
                    "text-halo-width": 1,
                    "text-offset": [0, 2],
                    "icon-image": iconWebImageId222
                }]);

6.显示点击气泡

                myMapView.jsShowMarkerView({
                    lat: 39.94869836991711,
                    lng: 116.18020462036133,
                    title: "测试标题",
                    data: [{
                        "label": "姓名",
                        "value": "小白"
                    }, {
                        "label": "地址",
                        "value": "天津市"
                    }]
                });

7.添加图标到地图style中——本地static的需要转base64，使用了image-tools插件

                var myMapView = this.$refs.zkxMapBoxView;

                /**
                 * 添加要使用的图片到地图style，最后用的时候用的是imageId的值
                 */
                //1.移除图片——这步在这里其实可以不写，因为地图style切换以后，以前的图片都会清空，这里只是保险写法和示例
                myMapView.jsRemoveImage(iconImageIdAdvancedType111);
                myMapView.jsRemoveImage(iconImageIdAdvancedType222);
                //2.本地图片，首先转base64
                pathToBase64(imagePointCommonObject)
                    .then(base64 => {
                        //然后添加图片
                        myMapView.jsAddImage({
                            imageId: iconImageIdAdvancedType111,
                            imageBase64: base64
                        });
                    })
                    .catch(error => {
                        console.error(error)
                    });
                //4.在线的图片
                myMapView.jsAddImage({
                    imageId: iconImageIdAdvancedType222,
                    imageWebUrl: "http://ipad.geo-compass.com/MobileAppPublish/CommonMapConfigFiles/ic_point_type2.png"
                });

8.根据geojson添加地图图层

                var myMapView = this.$refs.zkxMapBoxView;
                //1.首先移除全部的——先移除layer，然后移除source，防止不成功
                myMapView.jsRemoveLayer(geojsonSymbolLayerId);
                myMapView.jsRemoveLayer(geojsonLineLayerId);
                myMapView.jsRemoveLayer(geojsonFillLayerId);
                myMapView.jsRemoveSource(geojsonSourceId);

                //移除当前显示的markerView
                myMapView.jsRemoveMarkerView();

                //2.添加source——geojson可以用url，也可以用geoJsonData的字符串，都加会优先用url
                myMapView.jsAddSource({
                    "sourceId": geojsonSourceId,
                    //这里是小写
                    "type": "geojson",
                    //geojson的数据
                    "geoJsonData": this.featureCollectionGeoJsonText
                }, (result) => {
                    //回调——用不用回调无所谓，这里只是示范，addSource可以不用写结果回调，直接在下面添加layer
                    //回调——用不用回调无所谓，这里只是示范，addSource可以不用写结果回调，直接在下面添加layer
                    //回调——用不用回调无所谓，这里只是示范，addSource可以不用写结果回调，直接在下面添加layer
                    if (result.isSuccess) {
                        //成功了，添加layer
                        //3.文字标注
                        myMapView.jsAddLayer({
                            id: geojsonSymbolLayerId,
                            type: "symbol",
                            source: geojsonSourceId,
                            "text-field": "{name}",
                            //天地图的字体是这个的
                            "text-font": ["WenQuanYi Micro Hei Mono"],
                            "text-color": "#ff9900",
                            "text-halo-color": "#ffffff",
                            "text-halo-width": 4,
                            "text-size": 12
                        });
                        //4.线,注意位于文字标注下面
                        myMapView.jsAddLayer({
                            id: geojsonLineLayerId,
                            type: "line",
                            source: geojsonSourceId,
                            "line-color": "#ff0000",
                            "line-width": 4
                        }, geojsonSymbolLayerId);
                        //5.面,注意位于线标注下面【 面的边界不明显， 一般别用他】
                        myMapView.jsAddLayer({
                            id: geojsonFillLayerId,
                            type: "fill",
                            source: geojsonSourceId,
                            "fill-color": "#ff0000",
                            "fill-opacity": 0.2
                        }, geojsonLineLayerId);

                        //6.移动地图到某个坐标
                        myMapView.jsMoveCameraByPosition({
                            lat: 40.72470134336627,
                            lng: 109.40597789400323,
                            zoom: 5.5,
                            isShowAnimation: true
                        });

                        /**
                         * 添加点图层的点击事件
                         */
                        myMapView.jsSetToClickTargetLayerIds([geojsonFillLayerId]);
                    } else {
                        //失败了，打印日志
                        console.log(result.info)
                    }
                });

一些事件监听

1.onError——类似于错误日志，一般是传参出错捕获到异常以后方便查错的

            onError(e) {
                //一般是捕获到参数异常时候
                console.log(e.detail.errorMsg);
            },

2.onMapStyleLoaded——地图style加载完毕以后,切换style会清以前的图层

onMapStyleLoaded(e) {
                //由于切换style会清图层，这里可以重新添加图层
                console.log("style加载完毕以后");
                //提示信息
                modal.toast({
                    message: "style加载完毕回调了打印通知",
                    duration: 1.5
                });
            }

3.onMapUserLocationChanged/onMapClick/onMapLongClick——用户位置改变/地图点击/地图长按点击以后，返回的一样

onMapLongClick(e) {
                var lat = e.detail.lat;
                var lng = e.detail.lng;
                var showText = lng + "," + lat;
                modal.toast({
                    message: showText,
                    duration: 1.5
                });
            },

4.onLayerClick/onDrawAnnotationClick——自己绘制的点线面圆图层或地图要素点击以后

onLayerClick(e) {
                var myMapView = this.$refs.zkxMapBoxView;
                var feature = e.detail.feature;
                if (feature != null) {
                    myMapView.jsShowMarkerView({
                        lat: e.detail.lat,
                        lng: e.detail.lng,
                        "feature": feature
                    }, (e) => {
                        //点击以后
                        modal.toast({
                            message: "点击了markerView",
                            duration: 1.5
                        });
                    })
                }
            },

5.onMapStyleLoaded——地图加载新的style完毕以后

onMapStyleLoaded(e) {
    //由于切换style会清图层，这里建议做一些准备工作。例如图标重新加载——addImage
},

三、传参对象和属性【下面的类型是从java的写法写的，反正你懂了就可以】

0.mapOptions，控件中的地图配置，在ZkxUniMapBoxView中必须写

由于uniapp的生命周期问题，要求mapOptions属性必须写，才能正确初始化地图。mapOptions的属性值如下：

1.ResultCallback，结果回调，注意这个不是传参。一些方法为了方便用户查错，增加了可传可不传的结果回调

2.CameraPosition，指定位置

3.CameraBounds，指定范围

4.MarkerViewInfo，显示信息的气泡

5.Feature，这个是mapbox自己的类型，存储图形的属性和图形，知道下面的两个属性就够用了

6.ImageIcon，点的图标，使用前需要先加载到地图，支持本地static的和在线

7.DrawSymbol，绘制点标注

8.DrawLine，绘制线【不支持虚线】

9.DrawFill，绘制面，这里是单面，单面，单面

10.DrawCircle，绘制圆

#下面，就是进阶用法
#下面，就是进阶用法
#下面，就是进阶用法
#用法：【有图标需要就先addImage】首先removeLayer,然后removeSource,之后addSource,最后addLayer，一般这样写就不会出错

11.Source，地图数据源，支持vector、geojson、raster三大类

12.Layer，图层，简单方式添加，支持raster、symbol、circle、line、fill、heatmap

13.LayerAdvanced，图层高阶写法，支持Expression表达式，建议pc端的直接复制过来layout/paint改巴改巴之类的，支持raster、symbol、circle、line、fill、heatmap

四、方法【函数？随便叫】

五、事件