WebGIS - ArcGIS + Vue3.0初始地图服务加载（Demo）

Dear 丶 2022-12-11 07:58 58阅读 0赞

> 基于**Vue3.0**，使用**ArcGis API For JavaScript**，加载一个地图服务

## 项目构建 ##

# 项目构建-选择3.0版本
    vue create arcgis
    # 安装arcgis
    npm i esri-loader -S

### 1. 引入样式 ###

**    index.scss**

@import "https://js.arcgis.com/4.10/esri/css/main.css";

### 2. setup() ###

**    App.vue**

<template>
       <div id="map"></div>
    </template>
    
    <script>
    import { loadModules } from "esri-loader";
    import { computed, onMounted, reactive } from "vue";
    export default {
      setup() {
        const state = reactive({
          name: "arcgis"
        });
        onMounted(handleMounted);
        return { state };
      },
    };
    function handleMounted() {
      loadModules(["esri/Map", "esri/views/MapView"]).then(([Map, MapView]) => {
        let map = new Map({
          basemap: "hybrid", // streets，hybrid
        });
    
        let view = new MapView({
          container: "map",
          map,
          center: [106, 34.09042],
          zoom: 3,
        });
      });
    }
    </script>
    
    <style lang="scss" scoped>
    #map {
      width: 100%;
      height: 500px;
    }
    </style>

--------------------

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70]: /images/20221123/f9f0957ab8f7460d87b06d6a9714979d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，58人围观）

还没有评论，来说两句吧...

相关阅读

相关 openlayers加载MapServer地图服务

引入proj4脚本文件 <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4

妖狐艹你老母/ 2023年06月29日 10:46/ 0 赞/ 12 阅读

相关【ArcGIS Engine二次开发】地图操作（1）：加载Mxd地图文档

> 在ArcGIS中，以mxd作为扩展名的文件叫地图文档。地图文档中只是包含图层的引用，即存储当前地图的图层路径、符号、状态、修饰等信息，并不存储真实的数据层。 > ArcG

左手的ㄟ右手/ 2023年01月15日 03:54/ 0 赞/ 242 阅读

相关 WebGIS - ArcGIS + Vue3.0初始地图服务加载（Demo）

> 基于Vue3.0，使用ArcGis API For JavaScript，加载一个地图服务项目构建项目构建-选择3.0版本 vue creat

Dear 丶/ 2022年12月11日 07:58/ 0 赞/ 59 阅读

相关带你剖析WebGis的世界奥秘----瓦片式加载地图

WebGIS应用程序的页面能够通过HTML、JSP、ASP或任何任何类型的Web页文件构成，其特殊之处在于，它的请求提交的方法并不是通过常用的 “超链接”形式，而是使用鼠

爱被打了一巴掌/ 2022年09月25日 02:25/ 0 赞/ 278 阅读

相关 arcgis for android（七）加载arcgis server服务

1、上一章讲了arcgis for android 入门与提高（六）定位[https://blog.csdn.net/HB\_Programmer/article/detail

待我称王封你为后i/ 2022年09月09日 09:23/ 0 赞/ 275 阅读

相关 ArcGis API for JavaScript学习——加载地图

ArcGis API for JavaScript开发笔记——加载地图在这个例子中使用的离线部署的API（请参见 [http://note.youdao.com/not

川长思鸟来/ 2022年07月13日 05:54/ 0 赞/ 292 阅读

相关 ArcGIS API for JavaScript 加载高德地图

前言加载高德作为底图切片线划图层 gaodeLayer.js define(["dojo/_base/declare", "

谁践踏了优雅/ 2021年09月15日 03:28/ 0 赞/ 582 阅读

相关 ArcGIS API for JavaScript 加载百度地图

前言有时我们在面对需要使用百度地图作为地图的场景，我们可以通过对百度地图，百度卫星图，百度标注图层进行加载通过在网上查阅，得到了比较合适的坐标转换加载百度

男娘i/ 2021年09月15日 02:46/ 0 赞/ 903 阅读

相关（四）ArcGIS JS 加载切片地图服务

前言在上一篇博客讲述了怎么发布切片地图服务，在本章中介绍怎么在JavaScript加载切片地图服务。准备在本地部署ArcGIS JS

墨蓝/ 2021年09月14日 16:26/ 0 赞/ 560 阅读

相关（二）ArcGIS JS 加载动态地图服务

前言在上一篇博客讲述了怎么发布动态地图服务，在本章中介绍怎么在JavaScript加载动态地图服务。准备在本地部署ArcGIS JS

Dear 丶/ 2021年09月14日 16:18/ 0 赞/ 557 阅读