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

拼搏现实的明天。 2022-12-28 08:20 371阅读 0赞

### 安装 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>

### 运行效果 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/b292c889dda24a7dad207383799e65e9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/46ec9b840c324d649b470fc2a0c756dd.png