webgis入门（一）

余者大二地信之生也，忽起心欲习webgis，后将发文以记其学程，以志于此。吾感诸君之助，特致谢忱。并邀初学者与大贤共赴此道，源码亦将公示于GitHub之上。

引入Element UI

具体可看我的这篇文章

https://blog.csdn.net/2301_78796401/article/details/135971528?spm=1001.2014.3001.5501

引入Container 布局容器

  Header
  
    Aside
    Main
  

样式：

.el-container{
    height:100vh
}

.el-header{
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
} 

.el-aside {
    background-color: #062344;
    color: #f8f7f7;
    text-align: center;
    line-height: 200px;
} 

.el-main {
    background-color: #f6f8fb;
    color: #333;
    text-align: center;
    line-height: 160px;
}

由上述代码将App.vue写为：

这样系统的大致布局成形了

注：一开始我将el-container元素的height属性设置为100%，结果发现不能显示在整张页面上，后来查了资料才发现，下面是chatgpt的解释：

100%和100vh在CSS中都是相对单位，但它们的参照点不同。

100%是相对于其父元素的高度，而100vh是相对于视口（viewport）的高度。视口通常指的是浏览器窗口的大小。

当屏幕可视区域高度等于其父元素高度时，height: 100%和height: 100vh效果看起来一样，元素会撑满其父元素的高度。然而，当元素没有内容或其父元素没有高度时，设置height: 100%不会撑开元素，高度为0；而设置height: 100vh，该元素会被撑开与屏幕可视高度一致。

引入GIS功能 

在项目集成终端输入：

npm install --save-dev esri-loader

 安装完成后可以在package.json中查看版本号：

在componnents中新建MapView.vue文件，并写入如下代码

在App.vue中引入MapView组件：

这样一个简单的webgis系统做成功了

当然MapView那块的代码我也不怎么懂，等我再慢慢研究吧
源码已上传至github上：https://github.com/songguo1/vue-webgis