uniapp引入arcgis for js

uniapp引入arcgis for js

​ 在前段时间，我刚开始接触uniapp，并接到了在uniapp项目中使用arcgis for js的任务。搜遍了所有的经验帖子也没有一个具体的方法步骤，只有几位大佬分享了可行的结果截图。所以今天写一个小白教程，如有错误，欢迎大家指出。

​ 首先在一个空项目中，引入esri-loader。

npm install--save esri-loader

​ 成功后，在页面中通过renderjs引入esri-loader，注意地图部分需要给出具体高度。

<template>  
    <view >  
        <view id="myMapView" style=" height: 623px " />  
    </view>  
</template>  

<script module="myMapViews" lang="renderjs">  
    //renderjs部分  
    import {  
        loadModules  
    } from 'esri-loader'  
    export default {  
        name: 'myMapView',  
        data() {  
            return {};  
        },  
        mounted() {  
            this.createMapView()  
        },  
        methods: {  
            createMapView() {  
                const options = {  
                    url: 'https://js.arcgis.com/4.14/init.js',  
                    css: 'https://js.arcgis.com/4.14/esri/themes/light/main.css'  
                };  
                loadModules([  
                    "esri/Map",  
                    "esri/views/MapView"  
                ], options).then(([Map, MapView]) => {  
                    var map = new Map({  
                        basemap: "topo-vector"  
                    });  
                    var view = new MapView({  
                        container: "myMapView",  
                        map: map,  
                        center: [-118.80500, 34.02700], // longitude, latitude  
                        zoom: 13  
                    });  
                })  
            }  
        }  
    }  
</script>  

<scrip>  
// service 层  
</scrip>  

<style>  
</style>

效果图如下：

​ 同时，在renderjs的script中，是无法获取到service层的数据的，也无法使用uni的相关接口（注意：H5是可以正常使用的，但是APP端就会报错，比如uni.request等），所以要通过一定的方式从service层去传输。

​ 如果要进行网络请求目前有两种思路：

​ 1.自己写一个原生ajax请求，在renderjs部分使用。

​ 2.在service层给后台发请求后，将数据传回renderjs部分

    下面简单给出个renderjs和service层通讯例子：  

<template>  
    <view>  
        <!-- service层mapdata改变就会调用renderjs部分的mapDataChanged方法 -->  
        <view id="myMapView" :change:mapData="myMapViews.mapDataChanged" :mapData="mapData" style=" height: 500px " />  
        <view>  
            <uni-button @click="changeMapData">service点击</uni-button>  
        </view>  
    </view>  

</template>  

<script module="myMapViews" lang="renderjs">  
    //renderjs部分  
    import {  
        loadModules  
    } from 'esri-loader'  
    export default {  
        name: 'myMapView',  
        data() {  
            return {};  
        },  
        mounted() {  
            this.createMapView()  
        },  
        methods: {  
            createMapView() {  
                const options = {  
                    url: 'https://js.arcgis.com/4.14/init.js',  
                    css: 'https://js.arcgis.com/4.14/esri/themes/light/main.css'  
                };  
                loadModules([  
                    "esri/Map",  
                    "esri/views/MapView"  
                ], options).then(([Map, MapView]) => {  
                    var map = new Map({  
                        basemap: "topo-vector"  
                    });  
                    var view = new MapView({  
                        container: "myMapView",  
                        map: map,  
                        center: [-118.80500, 34.02700], // longitude, latitude  
                        zoom: 13  
                    });  
                })  
            },  
            mapDataChanged(newValue, oldValue, ownerVm, vm) {  
                //mapData改变触发  
                console.log("newValue:", newValue)  
                console.log("oldValue:", oldValue)  
                //调用service层的getFromRenderJs方法，并传值  
                ownerVm.callMethod('getFromRenderJs', {  
                    type: 'polyline'  
                })  
                //这种方法也可以主动调用service层方法  
                /*UniViewJSBridge.publishHandler('onWxsInvokeCallMethod', {  
                    cid: this._$id,  
                    method: 'loadingClose',  
                    args: {  

                    }  
                })*/  
            }  

        }  
    }  

</script>  

<script>  
    //service层  
    export default {  
        data() {  
            return {  
                mapData: {}  
            }  
        },  
        mounted() {},  
        methods: {  
            changeMapData() {  
                //click事件触发的service层方法  
                this.mapData = {  
                    type: 'point'  
                }  
            },  
            getFromRenderJs(params) {  
                //renderjs调用的service层方法  
                console.log('getFromRenderJs:', params)  
            }  

        },  

    }  

</script>  

<style>  
</style>

结果如下：