Vue.js 项目引入 esri-loader 并加载离线地图

Posted 2022-06-25 魏晓蕾

安装 esri-loader

>> npm install esri-loader

Vue 文件中引入 esri-loader

import  loadCss, setDefaultOptions, loadModules  from "esri-loader";

setDefaultOptions(url: 'http://localhost/arcgis_js_api/4.15/init.js')
loadCss('http://localhost/arcgis_js_api/4.15/esri/themes/light/main.css')
loadModules([
       "esri/Map",
       "esri/views/MapView",
       "esri/layers/MapImageLayer",
       "esri/tasks/QueryTask",
       "esri/tasks/support/Query"
   ],  css: true ).then(([Map, MapView, MapImageLayer, QueryTask, Query]) => 

Vue 文件

## Map.vue

<template>
    <el-main style="padding: 0; margin: 0; border: none; outline: none;" :style="width: mapWidth, height: mapHeight">
        <div id="mapDiv" :style="width: mapWidth, height: mapHeight"></div>
        <el-input placeholder="请输入搜索内容" v-model="inputData" class="input-with-select">
            <el-select v-model="select" slot="prepend" placeholder="请选择查询属性">
                <el-option label="渠道号" value="1"></el-option>
                <el-option label="渠道名" value="2"></el-option>
                <el-option label="沟道号" value="3"></el-option>
                <el-option label="沟道名" value="4"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="doQuery"></el-button>
        </el-input>
    </el-main>
</template>

<script>
    import  loadCss, setDefaultOptions, loadModules  from "esri-loader";

    export default 
        name: "Map",
        data()
            return 
                map: null,
                layer: null,
                view: null,
                pointSymbol: null,
                searchUrl: "",
                queryTask: null,
                query: null,
                inputData: '',
                select: '',
                mapWidth: '',
                mapHeight: ''
            
        ,
        mounted() 
            this.mapWidth = (window.screen.width - 44)  + 'px'
            this.mapHeight = (window.screen.height - 146) + 'px'

            setDefaultOptions(url: 'http://localhost/arcgis_js_api/4.15/init.js')
            loadCss('http://localhost/arcgis_js_api/4.15/esri/themes/light/main.css')
            loadModules([
                "esri/Map",
                "esri/views/MapView",
                "esri/layers/MapImageLayer",
                "esri/tasks/QueryTask",
                "esri/tasks/support/Query"
            ],  css: true ).then(([Map, MapView, MapImageLayer, QueryTask, Query]) => 
                this.layer = new MapImageLayer(
                    url: "http://localhost:6080/arcgis/rest/services//SampleWorldCities/MapServer"
                );

                this.map = new Map(
                    layers: [this.layer]
                );

                this.view = new MapView(
                    container: "mapDiv",
                    map: this.map,
                    ui: 
                        components: []
                    
                );

                this.pointSymbol = 
                    type: "simple-marker",
                    style: "circle",
                    color: "red",
                    size: 12
                ;

                // 要查询的图层
                this.searchUrl = "http://localhost:6080/arcgis/rest/services//SampleWorldCities/MapServer/0";
                this.queryTask = new QueryTask(
                    url: this.searchUrl
                );

                // 查询条件
                this.query = new Query(
                    outFields: ["*"],
                    returnGeometry: true,
                    where: `CITY_NAME = '$this.inputData'`,
                );
            ).catch(err => 
                console.error(err);
            );
        ,
        methods: 
            doQuery()
                // 执行属性查询
                this.queryTask.execute(this.query).then(function(result) 
                    this.view.graphics.removeAll();
                    if (result.features.length > 0) 
                        let features = result.features.map(function(feature) 
                            feature.symbol = this.pointSymbol;
                            return feature;
                        );
                        this.view.graphics.addMany(features);
                        this.view.goTo(features);
                    
                );
            
        
    
</script>

<style scoped>
    #mapDiv 
        border: none;
        outline: none;
        margin: 0;
        padding: 0;
    

    /deep/.el-input-group__prepend 
        width: 130px;
        background-color: #fff;
    

    /deep/.input-with-select 
        width: 500px;
        position: fixed;
        top: 80px;
        right: 30px;
    
</style>

运行效果