首页

启用技术指南

认识2000坐标系

启用六十问

六十问回答

使用步骤和注意事项

常见问题解决

任务列表

提交任务

dev-base分支

分支管理

dev-changchun分支

登录

首页

资源目录

仪表盘列表

仪表盘详情

数据出入库

资源项详情

地图预览

现势库和历史库对比

地图对比

任务状态

数据统计

方案管理

创建方案

方案添加服务/模板

方案服务列表

方案编辑

方案服务编辑

创建任务/提交方案

提交方案字典类型参数填写

提交方案文件类型参数填写

提交方案文件类型参数临时上传

计划任务列表

创建计划任务

流程列表

创建流程

流程定义

流程步骤创建

流程步骤挂载方案

执行流程

流程状态列表

流程状态详情

角色列表

角色接口授权

角色方案授权

用户管理

资源目录管理

资源目录节点创建

资源目录资源项编辑

资源项元数据录入

用户目录

上传文件

文件目录

文件目录详情

数据库连接

地图服务

用户字典

fmeserver服务器管理

系统迁移

元数据结构定义

日志管理

图表管理

仪表盘管理

仪表盘设计

仪表盘图表挂载

令牌管理

许可管理

接口管理

参考：https://blog.csdn.net/nineya_com/article/details/103380243
这里是文章内容

esri/widgets的使用

本文主要讲解在vue项目中如何使用Arcgis Api for javascript的esri/wigets。

AreaMeasurement2D

更多配置请查看官网：AreaMeasurement2D

1

require(['esri/widgets/AreaMeasurement2D'], function(AreaMeasurement2D) { /* code goes here */ });

计算并显示地图视图中多边形的面积和周长。这个小部件将为地理坐标系和WebMercator计算面积和周长。
示例：
官方示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

<template>
  <div class="page">
    <div id="map">
      <div id="topbar" ref="topbar">
        <button class="action-button esri-icon-measure-line"></button>
      </div>
    </div>
  </div>
</template>

<script>
import esriLoader from 'esri-loader'
export default {
  name: 'Home',
  data () {
    return {
      view: null,
      map: null,
      activeWidget: null,
      publicPath: process.env.BASE_URL // 获取public的
    }
  },
  methods: {
    measure2D (AreaMeasurement2D) {
      if (this.activeWidget === null) {
        this.activeWidget = new AreaMeasurement2D({
          view: this.view
        })
        this.activeWidget.viewModel.newMeasurement()
        this.view.ui.add(this.activeWidget, 'top-right')
      } else {
        this.view.ui.remove(this.activeWidget)
        this.activeWidget.destroy()
        this.activeWidget = null
      }
    }
  },
  mounted () {
    const options = {
      url: `${this.publicPath}4.17/init.js`,
      css: `${this.publicPath}4.17/esri/themes/dark-blue/main.css`
    }
    esriLoader.loadModules([
      'esri/Map',
      'esri/views/MapView',
      'esri/widgets/AreaMeasurement2D'
    ], options)
      .then(([ArcGISMap, MapView, AreaMeasurement2D]) => {
        this.map = new ArcGISMap({
          basemap: 'hybrid'
        })
        this.view = new MapView({
          container: 'map',
          map: this.map,
          zoom: 4
        })
        // 添加按钮到右顶部
        this.view.ui.add('topbar', 'top-right')
        // 为按钮绑定点击事件
        this.$refs.topbar.addEventListener('click', () => {
          this.measure2D(AreaMeasurement2D)
        })
      })
  }
}
</script>

<style lang="scss">
.page{
  width: 100%;
  overflow: hidden;
  flex: 1 1 auto;
  position: relative;
}
#map {
  width: 100%;
  height: 100%;
}
#topbar {
  background: #fff;
  padding: 10px;
  .action-button {
    font-size: 16px;
    background-color: transparent;
    border: 1px solid #d3d3d3;
    color: #6e6e6e;
    height: 32px;
    width: 32px;
    text-align: center;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
  }
  .action-button:hover,
  .action-button:focus {
    background: #0079c1;
    color: #e4e4e4;
  }
  .active {
    background: #0079c1;
    color: #e4e4e4;
  }
}
</style>

效果如图：

解释：

1. this.$refs.topbar.addEventListener使用
   不能采用如下这种方式，如果这样做，就相当于立即执行了该函数

   1	this.$refs.topbar.addEventListener('click', this.measure2D(AreaMeasurement2D))

   需要采用这种方式：

   1 2 3

   this.$refs.topbar.addEventListener('click', () => { this.measure2D(AreaMeasurement2D) })

为什么不用@click="measure2D"?
因为我们需要将AreaMeasurement2D传递到measure2D函数中，如果使用@click="measure2D"就无法传递。
2. activeWidget.viewModel.newMeasurement()说明
使用这行代码就会跳过AreaMeasurement2D初始的“新测量”按钮,如果不加这一行，会在右上角生成新测量按钮：如图

AreaMeasurement3D

更多配置请查看官网：AreaMeasurement3D

1

require(['esri/widgets/AreaMeasurement3D'], function(AreaMeasurement3D) { /* code goes here */ });

计算并显示多边形的面积和周长。这个小部件可以在场景视图中用来测量多边形的面积和周长。
示例：
官方示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

<template>
  <div class="page">
    <div id="map">
      <div id="topbar" ref="topbar">
        <button class="action-button esri-icon-measure-area"></button>
      </div>
    </div>
  </div>
</template>
<script>
import esriLoader from 'esri-loader'
export default {
  name: 'Home',
  data () {
    return {
      view: null,
      map: null,
      activeWidget: null,
      publicPath: process.env.BASE_URL // 获取public的
    }
  },
  methods: {
    measure2D (AreaMeasurement3D) {
      if (this.activeWidget === null) {
        this.activeWidget = new AreaMeasurement3D({
          view: this.view
        })
        this.activeWidget.viewModel.newMeasurement()
        this.view.ui.add(this.activeWidget, 'top-right')
      } else {
        this.view.ui.remove(this.activeWidget)
        this.activeWidget.destroy()
        this.activeWidget = null
      }
    }
  },
  mounted () {
    const options = {
      url: `${this.publicPath}4.17/init.js`,
      css: `${this.publicPath}4.17/esri/themes/dark-blue/main.css`
    }
    esriLoader.loadModules([
      'esri/WebScene',
      'esri/views/SceneView',
      'esri/widgets/AreaMeasurement3D'
    ], options)
      .then(([WebScene, SceneView, AreaMeasurement3D]) => {
        this.map = new WebScene({
          portalItem: {
            id: 'b6c889ff1f684cd7a65301984b80b93d'
          }
        })
        this.view = new SceneView({
          container: 'map',
          map: this.map
        })
        // 添加按钮到右顶部
        this.view.ui.add('topbar', 'top-right')
        this.$refs.topbar.addEventListener('click', () => {
          this.measure2D(AreaMeasurement3D)
        })
      })
  }
}
</script>
<style lang="scss">
.page{
  width: 100%;
  overflow: hidden;
  flex: 1 1 auto;
  position: relative;
}
#map {
  width: 100%;
  height: 100%;
}
#topbar {
  background: #fff;
  padding: 10px;
  .action-button {
    font-size: 16px;
    background-color: transparent;
    border: 1px solid #d3d3d3;
    color: #6e6e6e;
    height: 32px;
    width: 32px;
    text-align: center;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
  }
  .action-button:hover,
  .action-button:focus {
    background: #0079c1;
    color: #e4e4e4;
  }
  .active {
    background: #0079c1;
    color: #e4e4e4;
  }
}
</style>

效果如下：

DistanceMeasurement2D

更多配置请查看官网：DistanceMeasurement2D

1

require(['esri/widgets/DistanceMeasurement2D'], function(DistanceMeasurement2D) { /* code goes here */ });

小部件计算并显示地图视图中两个或多个点之间的距离。这个小部件将计算地理坐标系和WebMercator的地理距离。
示例：
官方示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

<template>
  <div class="page">
    <div id="map">
      <div id="topbar" ref="topbar">
        <button class="action-button esri-icon-measure-line"></button>
      </div>
    </div>
  </div>
</template>
<script>
import esriLoader from 'esri-loader'
export default {
  name: 'Home',
  data () {
    return {
      view: null,
      map: null,
      activeWidget: null,
      publicPath: process.env.BASE_URL // 获取public的
    }
  },
  methods: {
    measure2D (DistanceMeasurement2D) {
      if (this.activeWidget === null) {
        this.activeWidget = new DistanceMeasurement2D({
          view: this.view
        })
        this.activeWidget.viewModel.newMeasurement()
        this.view.ui.add(this.activeWidget, 'top-right')
      } else {
        this.view.ui.remove(this.activeWidget)
        this.activeWidget.destroy()
        this.activeWidget = null
      }
    }
  },
  mounted () {
    const options = {
      url: `${this.publicPath}4.17/init.js`,
      css: `${this.publicPath}4.17/esri/themes/dark-blue/main.css`
    }
    esriLoader.loadModules([
      'esri/WebMap',
      'esri/views/MapView',
      'esri/widgets/DistanceMeasurement2D'
    ], options)
      .then(([WebMap, MapView, DistanceMeasurement2D]) => {
        this.map = new WebMap({
          portalItem: {
            id: '990d0191f2574db495c4304a01c3e65b'
          }
        })
        this.view = new MapView({
          container: 'map',
          map: this.map
        })
        // 添加按钮到右顶部
        this.view.ui.add('topbar', 'top-right')
        this.$refs.topbar.addEventListener('click', () => {
          this.measure2D(DistanceMeasurement2D)
        })
      })
  }
}
</script>
<style lang="scss">
.page{
  width: 100%;
  overflow: hidden;
  flex: 1 1 auto;
  position: relative;
}
#map {
  width: 100%;
  height: 100%;
}
#topbar {
  background: #fff;
  padding: 10px;
  .action-button {
    font-size: 16px;
    background-color: transparent;
    border: 1px solid #d3d3d3;
    color: #6e6e6e;
    height: 32px;
    width: 32px;
    text-align: center;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
  }
  .action-button:hover,
  .action-button:focus {
    background: #0079c1;
    color: #e4e4e4;
  }
  .active {
    background: #0079c1;
    color: #e4e4e4;
  }
}
</style>

效果如下：

DirectLineMeasurement3D

更多配置请查看官网：DirectLineMeasurement3D

1

require(['esri/widgets/DirectLineMeasurement3D'], function(DirectLineMeasurement3D) { /* code goes here */ });

部件计算并显示两点之间的三维距离。这个小部件可以在SceneView中用来测量两点之间的垂直、水平和直接距离。
示例：
官方示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

<template>
  <div class="page">
    <div id="map">
      <div id="topbar" ref="topbar">
        <button class="action-button esri-icon-measure-line"></button>
      </div>
    </div>
  </div>
</template>
<script>
import esriLoader from 'esri-loader'
export default {
  name: 'Home',
  data () {
    return {
      view: null,
      map: null,
      activeWidget: null,
      publicPath: process.env.BASE_URL // 获取public的
    }
  },
  methods: {
    measure2D (DirectLineMeasurement3D) {
      if (this.activeWidget === null) {
        this.activeWidget = new DirectLineMeasurement3D({
          view: this.view
        })
        this.activeWidget.viewModel.newMeasurement()
        this.view.ui.add(this.activeWidget, 'top-right')
      } else {
        this.view.ui.remove(this.activeWidget)
        this.activeWidget.destroy()
        this.activeWidget = null
      }
    }
  },
  mounted () {
    const options = {
      url: `${this.publicPath}4.17/init.js`,
      css: `${this.publicPath}4.17/esri/themes/dark-blue/main.css`
    }
    esriLoader.loadModules([
      'esri/WebScene',
      'esri/views/SceneView',
      'esri/widgets/DirectLineMeasurement3D'
    ], options)
      .then(([WebScene, SceneView, DirectLineMeasurement3D]) => {
        this.map = new WebScene({
          portalItem: {
            id: 'b6c889ff1f684cd7a65301984b80b93d'
          }
        })
        this.view = new SceneView({
          container: 'map',
          map: this.map
        })
        // 添加按钮到右顶部
        this.view.ui.add('topbar', 'top-right')
        this.$refs.topbar.addEventListener('click', () => {
          this.measure2D(DirectLineMeasurement3D)
        })
      })
  }
}
</script>
<style lang="scss">
.page{
  width: 100%;
  overflow: hidden;
  flex: 1 1 auto;
  position: relative;
}
#map {
  width: 100%;
  height: 100%;
}
#topbar {
  background: #fff;
  padding: 10px;
  .action-button {
    font-size: 16px;
    background-color: transparent;
    border: 1px solid #d3d3d3;
    color: #6e6e6e;
    height: 32px;
    width: 32px;
    text-align: center;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
  }
  .action-button:hover,
  .action-button:focus {
    background: #0079c1;
    color: #e4e4e4;
  }
  .active {
    background: #0079c1;
    color: #e4e4e4;
  }
}
</style>

效果如下：

Measurement

更多配置请查看官网：Measurement

1

require(['esri/widgets/Measurement'], function(Measurement) { /* code goes here */ });

部件计算并显示两点之间的三维距离。这个小部件可以在SceneView中用来测量两点之间的垂直、水平和直接距离。
示例：
官方示例

BasemapGallery

BasemapGallery小部件显示一个集合，该集合表示来自ArcGIS.com网站或用户定义的一组地图或图像服务。从BasemapGallery中选择新的基础地图时，地图的基础地图图层将被删除，并替换为在库中选择的关联基础地图的基础地图图层。
BasemapGallery

1

require(['esri/widgets/BasemapGallery'], function(BasemapGallery) { /* code goes here */ });

示例：
官方示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

<template>
  <div class="page">
    <div id="map">
    </div>
  </div>
</template>
<script>
import esriLoader from 'esri-loader'
export default {
  name: 'Home',
  data () {
    return {
      view: null,
      map: null,
      publicPath: process.env.BASE_URL // 获取public的
    }
  },
  methods: {
    renderMap () {
      const options = {
        url: `${this.publicPath}4.17/init.js`,
        css: `${this.publicPath}4.17/esri/themes/dark-blue/main.css`
      }
      esriLoader.loadModules([
        'esri/Map',
        'esri/views/MapView',
        'esri/widgets/BasemapGallery'
      ], options)
        .then(([Map, MapView, BasemapGallery]) => {
          this.map = new Map({
            basemap: 'hybrid'
          })
          this.view = new MapView({
            map: this.map,
            container: 'map',
            zoom: 4,
            center: [104.051196, 30.573084]
          })
          var basemapGallery = new BasemapGallery({
            view: this.view
          })
          this.view.ui.add(basemapGallery, 'top-right')
        })
    }
  },
  mounted () {
    this.renderMap()
  }
}
</script>
<style lang="scss">
.page{
  width: 100%;
  overflow: hidden;
  flex: 1 1 auto;
  position: relative;
}
#map {
  width: 100%;
  height: 100%;
}
</style>

效果如下：

BasemapToggle

BasemapToggle提供了一个小部件，允许最终用户在两个Basemap之间切换。切换的底图设置在视图的map对象内。
BasemapToggle

1

require(['esri/widgets/BasemapToggle'], function(BasemapToggle) { /* code goes here */ });

示例：
官方示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

<template>
  <div class="page">
    <div id="map">
    </div>
  </div>
</template>
<script>
import esriLoader from 'esri-loader'
export default {
  name: 'Home',
  data () {
    return {
      view: null,
      map: null,
      publicPath: process.env.BASE_URL // 获取public的
    }
  },
  methods: {
    renderMap () {
      const options = {
        url: `${this.publicPath}4.17/init.js`,
        css: `${this.publicPath}4.17/esri/themes/dark-blue/main.css`
      }
      esriLoader.loadModules([
        'esri/Map',
        'esri/views/MapView',
        'esri/widgets/BasemapToggle'
      ], options)
        .then(([Map, MapView, BasemapToggle]) => {
          this.map = new Map({
            basemap: 'hybrid'
          })
          this.view = new MapView({
            map: this.map,
            container: 'map',
            zoom: 4,
            center: [104.051196, 30.573084]
          })
          var basemapToggle = new BasemapToggle({
            view: this.view,
            nextBasemap: 'topo-vector'
          })
          this.view.ui.add(basemapToggle, 'bottom-right')
        })
    }
  },
  mounted () {
    this.renderMap()
  }
}
</script>
<style lang="scss">
.page{
  width: 100%;
  overflow: hidden;
  flex: 1 1 auto;
  position: relative;
}
#map {
  width: 100%;
  height: 100%;
}
</style>

效果如下：

Bookmarks

Bookmarks小部件允许最终用户快速导航到感兴趣的特定区域。它显示书签列表，这些书签通常在WebMap中定义。
Bookmarks
示例：
官方示例
官方示例
官方示例
官方示例

BuildingExplorer

BuildingExplorer小部件用于过滤和浏览BuildingSceneLayers的各个组件。建筑场景是建筑物和内部的复杂数字模型，可以包含数千个分组在子层中的组件。使用此小部件，可以按级别、施工阶段或按规程和类别筛选建筑物。
BuildingExplorer
示例：
官方示例

Compass

Compass小部件指示相对于当前视图旋转或相机航向的北向位置。单击“指南针”小部件将视图旋转为朝北（航向=0）。默认情况下，此小部件将添加到SceneView。
Compass
示例：
官方示例

CoordinateConversion

CoordinateConversion小部件提供了一种将用户光标位置显示为地图坐标或几种常用坐标符号之一的方法。此外，小部件还提供了一种将用户输入坐标转换为点的方法。
CoordinateConversion
示例：
官方示例
官方示例

Daylight

Daylight小部件可用于操纵时间和日期，并在SceneView中切换阴影。更改时间和日期时，太阳和星星的位置会相应地更新，从而更改场景中的照明和阴影。
Daylight
示例：
官方示例

Directions

Directions小部件提供了一种使用ArcGIS Online和自定义网络分析路线服务构建驾驶和步行方向的方法。与RouteTask的工作方式类似，这个小部件生成一条路由，使用指定的网络在多个点之间寻找成本最低的路径。搜索地址时，用于导航的点的位置取决于搜索属性的locationType。
Directions
示例：
官方示例
官方示例

Editor

Editor小部件提供开箱即用的编辑体验，以帮助简化web应用程序中的编辑体验。小部件有两个不同的工作流：CreateWorkflow和UpdateWorkflow。这些工作流允许您在可编辑要素图层中添加要素或编辑和/或删除现有要素。
Editor
示例：
官方示例
官方示例
官方示例
官方示例
官方示例

Expand

Expand小部件充当打开小部件的可单击按钮。
Expand
示例：
官方示例

FeatureForm

FeatureForm小部件显示功能的属性。此小部件根据功能的属性以及字段是否允许编辑来呈现输入字段。
FeatureForm
示例：
官方示例
官方示例
官方示例

Fullscreen

Fullscreen提供一个简单的小部件来显示视图或使用整个屏幕的用户定义的HTMLElement。
Fullscreen
示例：
官方示例

Home

Home提供一个简单的小部件，用于将视图切换到其初始视点或先前定义的视点。
Home
示例：
官方示例

LayerList

LayerList小部件提供了一种显示层列表并打开/关闭其可见性的方法。ListItemAPI提供对每个层的属性的访问，允许开发人员配置与层相关的操作，并允许开发人员向与层相关的项添加内容。
LayerList
示例：
官方示例

Legend

Legend小部件显示地图中图层的标签和符号。标签及其相应的符号取决于在层的渲染器中设置的值。图例将仅显示视图中可见的图层和子图层。
Legend
示例：
官方示例

LineOfSight

LineOfSight小部件是一个三维分析工具，允许您在SceneView中执行可见性分析。给定观察者和多个目标点之间的可见性是根据视图中当前显示的内容（包括地面、集成网格和三维对象（如建筑物或树木））计算的。
LineOfSight
示例：
官方示例

Locate

Locate提供一个简单的小部件，将视图动画化到用户的当前位置。
Locate
示例：
官方示例

NavigationToggle

NavigationToggle提供两个简单的按钮来切换SceneView的导航模式。请注意，此小部件仅用于SceneView中的3D鼠标交互。它对触摸导航没有影响，并且不应与地图视图中的二维鼠标交互一起使用。
NavigationToggle
示例：

Popup

Popup小部件允许用户查看功能属性中的内容。弹出窗口通过为用户提供一种简单的方式来交互和查看层中的属性，从而增强了web应用程序。它们在向用户传递信息方面起着重要的作用，从而提高了应用程序的讲故事能力。
Popup
示例：
官方示例

Print

Print小部件将应用程序与打印服务连接起来，以允许打印地图。它利用了服务器端、高质量、完整的地图打印功能，使用ArcGIS的ExportWebMap服务，可以配置自定义布局模板。其中一个只显示地图，而另一个提供带有图例等的布局。Print小部件与PrintTask一起工作，PrintTask生成地图的打印机就绪版本。
Print
示例：
官方示例

ScaleBar

ScaleBar小部件在地图上或指定的HTML节点中显示比例尺。小部件遵循各种坐标系，并以公制或非公制值显示单位。公制值根据比例显示公里或米，同样，非公制值根据比例显示英里和英尺。
ScaleBar
示例：
官方示例

ScaleRangeSlider

ScaleRangeSlider小部件允许用户根据指定的缩放范围设置最小和最大缩放。当一个层被提供给小部件时，minScale和maxScale被设置为该层的缩放范围。
ScaleRangeSlider
示例：

Search

Search小部件提供了一种对定位器服务、地图/要素服务要素层和/或表执行搜索操作的方法。如果将定位器与地理编码服务一起使用，则使用findaddress操作，而查询则在要素图层上使用。
Search
示例：
官方示例

Sketch

Sketch小部件提供了一个简单的UI，用于在MapView或SceneView上创建和更新图形。这大大减少了在视图中处理图形所需的代码。它用于存储在其图层属性中的图形。
Sketch
示例：
官方示例

Slice

Slice切片小部件是一个三维分析工具，可以用来显示SceneView中被遮挡的内容。“切片”小部件可以应用于任何层类型，从而可以查看建筑物内部或探索地质表面。
Slice
示例：
官方示例

Slider

Slider一个滑块小部件，可用于过滤数据或从用户处收集数字输入。滑块可以有多个拇指，并提供格式化标签和控制用户输入的功能。
Slider
示例：
官方示例

Swipe

Swipe滑动小部件提供了一个工具来显示地图顶部一个或多个图层的一部分。图层可以垂直或水平滑动，以方便比较两个图层或查看图层下面的内容。
Swipe
示例：
官方示例

TableList

TableList小部件提供了一种显示与地图关联的表列表的方法。它用于要素图层表。
TableList
示例：
官方示例

TimeSlider

TimeSlider小部件简化了应用程序中时态数据的可视化。在将时间滑块添加到应用程序之前，首先应该了解如何配置它以正确显示时态数据。
TimeSlider
示例：
官方示例

Track

Track提供一个简单的按钮，用于在单击时将视图设置为用户位置的动画。视图根据被跟踪设备朝向的方向旋转。
Track
示例：
官方示例

Zoom

Zoom缩放小部件允许用户在视图中放大/缩小。
Zoom
示例：

Arcgis实现图层控制

参考：https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=widgets-layerlist-actions

esri/layer

1、esri/layer的说明

1、esri/layer的使用

arcgis的几种使用情况

1、api文件下载(本人使用4.17)

1.首先先到百度搜索 arcgis api for js，进入官网。
2.找到Get the API按钮。

3.找到如图所示，点击Download API

4.选择对应版本的API和Documentation(官网默认展示的是最新版本的，所以其他的版本的建议还是将文档也下载下来)

2、部署

2.1 离线部署|本地部署(不用tomcat或者IIS服务器)

1.首先将你下载的API压缩包解压，然后进去找到以你的api版本号命名的文件夹，我的版本是4.17，所以我打开4.17这个文件夹，文件夹里面的内容如下：

2.将4.17这个文件夹拷贝出来（也可以不拷贝出来，就在原位置操作），随便放在一个位置，然后把文件夹名字改成你想要的名字（不改也可以），这里我将文件夹名字不做修改。
3.打开4.17文件夹，找到并打开init.js文件和dojo文件夹下的dojo.js文件，crtl+f搜索找到[HOSTNAME_AND_PATH_TO_JSAPI]这串文字，然后将包含这串文字的引号里面里的内容用"你修改的文件夹名字/dojo"替换,这里我用"4.17/dojo"替换，好啦，大功告成了，让我们来测试一下吧！
4.使用
在html文件中使用：前提是你的.html文件必须和4.17文件在同一位置。

1
2

<link rel="stylesheet" href="4.17/esri/themes/dark-blue/main.css">
<script src="4.17/init.js"></script>

如果不在请采用相对路径，如：

1
2
3
4
5
6
7

<!--
文件路径
/html/index.html
/4.17
-->
<link rel="stylesheet" href="../4.17/esri/themes/dark-blue/main.css">
<script

在vue项目使用：前提是你的4.17文件夹放进/public的根目录下即：/public/4.17，然后安装esri-loader

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import esriLoader from 'esri-loader'

const options = {
url: '4.17/init.js',
css: '../../4.17/esri/themes/dark-blue/main.css'
}
esriLoader.loadModules([
'esri/Map',
'esri/views/MapView'
], options)
.then(([ArcGISMap, MapView]) => {
var map = new ArcGISMap({
basemap: 'streets-relief-vector'
})
var view = new MapView({
container: 'map',
map: this.map,
center: [-101.17, 21.78],
zoom: 4
})
// 当视图加载完毕后
view.when(() => {
})
})

2.2 离线部署|本地部署(用tomcat服务器)

1.首先将下载好的api文件4.17放入Tomcat服务中的Webapp下，然后自己百度tomcat配置项目使用端口，然后启动你的Tomcat服务器
2.打开4.17文件夹，找到并打开init.js文件和dojo文件夹下的dojo.js文件，crtl+f搜索找到[HOSTNAME_AND_PATH_TO_JSAPI]这串文字，然后将包含这串文字的引号里面里的内容用"http://localhost:你配置的端口/4.17/dojo"替换,这里我用"http://localhost:你配置的端口/4.17/dojo"替换，好啦，大功告成了，让我们来测试一下吧！
3.使用
在html文件中使用

1
2

<link rel="stylesheet" href="http://localhost:你配置的端口/4.17/esri/themes/dark-blue/main.css">
<script src="http://localhost:你配置的端口/4.17/init.js"></script>

在vue项目使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import esriLoader from 'esri-loader'

const options = {
url: 'http://localhost:你配置的端口/4.17/init.js',
css: 'http://localhost:你配置的端口/4.17/esri/themes/dark-blue/main.css'
}
esriLoader.loadModules([
'esri/Map',
'esri/views/MapView'
], options)
.then(([ArcGISMap, MapView]) => {
var map = new ArcGISMap({
basemap: 'streets-relief-vector'
})
var view = new MapView({
container: 'map',
map: this.map,
center: [-101.17, 21.78],
zoom: 4
})
// 当视图加载完毕后
view.when(() => {
})
})

当然以我的失败经验得出肯定会出错，比如左上角的控件符号没有显示,控制台会打印出以下错误：

1

Access to Font at 'http://localhost:8080/4.17/esri/themes/base/icons/fonts/CalciteWebCoreIcons.woff?cu4poq' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

这是显示你已经跨域请求资源导致资源请求失败 但是解决办法是有的 修改Tomcat的web.xml配置文件 打开config/web.xml文件，添加下面的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

（如web.xml中有多个filter时要把下面配置放在最前端）
<filter>
 <filter-name>CorsFilter</filter-name>
 <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
 <init-param>
   <param-name>cors.allowed.methods</param-name>
   <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
 </init-param>
 <init-param>
   <param-name>cors.allowed.headers</param-name>
   <param-value>Access-Control-Allow-Origin,Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
 </init-param>
 <async-supported>true</async-supported>
</filter>
<filter-mapping>
 <filter-name>CorsFilter</filter-name>
 <url-pattern>/*</url-pattern>
</filter-mapping>

2.2 不部署|在线Acrgis

这种情况因为使用的是arcgis官网的API，并且是在国外，所以在访问过程中会特别慢，不建议使用。
在html文件中使用

1
2

<link rel="stylesheet" href="https://js.arcgis.com/4.17/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.17/"></script>

在vue项目使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import esriLoader from 'esri-loader'

const options = {
url: 'https://js.arcgis.com/4.17/init.js',
css: 'https://js.arcgis.com/4.17/esri/themes/dark-blue/main.css'
}
esriLoader.loadModules([
'esri/Map',
'esri/views/MapView'
], options)
.then(([ArcGISMap, MapView]) => {
var map = new ArcGISMap({
basemap: 'streets-relief-vector'
})
var view = new MapView({
container: 'map',
map: this.map,
center: [-101.17, 21.78],
zoom: 4
})
// 当视图加载完毕后
view.when(() => {
})
})

出现地图代表访问成功。

arcgis的基本使用

参考：https://developers.arcgis.com/javascript/latest/guide/quick-start/

1、在html中使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://js.arcgis.com/4.17/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.17/"></script>
  <style>
    html,body,#map{
      height: 100%;
      width: 100%;
      box-sizing: border-box;
      overflow: hidden;
      padding: 0;
      margin: 0;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    require([
      "esri/Map",
      "esri/views/MapView"
    ], function(Map, MapView) {
      var map = new Map({
        basemap: "topo-vector"
      })
      var view = new MapView({
        container: "map",
        map: map,
        center: [-118.71511,34.09042],
        zoom: 11
      })
    })
  </script>
</body>
</html>

2、在vue项目中使用

安装arcgis官方依赖esri-loader,这个只是开发依赖,因此使用命令npm i esri-loader --save-dev来安装.
用模块的方式引入 esri-loader:

1

import esriLoader from 'esri-loader'

esriLoader有以下几个方法:

1. getScript () 从库里面获取 js 文件 ;
2. isLoaded () 检测模块是否加载完成 ;
3. loadModules( [ ], options) 用于加载arcgis 模块;
4. loadCss( url ) 用于加载css文件;
5. loadScript({url: “xxxxxxxx” }) 将js 加载到页面上;

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

   <template> <div id="map"></div> </template> <script> import esriLoader from 'esri-loader' export default { mounted () { const options = { url: 'https://js.arcgis.com/4.17/init.js', css: 'https://js.arcgis.com/4.17/esri/themes/light/main.css' } esriLoader.loadModules([ 'esri/Map', 'esri/views/MapView' ], options) .then(([ArcGISMap, MapView]) => { this.map1 = new ArcGISMap({ basemap: 'streets-relief-vector' }) this.view1 = new MapView({ container: 'map1', map: this.map1, center: [-118.71511,34.09042], zoom: 4 }) }) } } </script>

   具体部署：arcgis for js本地部署/不部署/在线arcgis的几种情况使用

应用和组件实例

创建一个应用实例

每个 Vue 应用都是通过用 createApp 函数创建一个新的应用实例开始的：

1

const app = Vue.createApp({ /* 选项 */ })

应用实例暴露的大多数方法都会返回该同一实例，允许链式：

1
2
3
4

Vue.createApp({})
  .component('SearchInput', SearchInputComponent)
  .directive('focus', FocusDirective)
  .use(LocalePlugin)

传递给 createApp 的选项用于配置根组件。当我们挂载应用时，该组件被用作渲染的起点。
注意：一个应用需要被挂载到一个 DOM 元素中。
例如：如果我们想把一个 Vue 应用挂载到<div id="app"></div>，我们应该传递#app：

1
2
3

const RootComponent = { /* 选项 */ }
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')

组件实例 property

在data中定义的property是通过组件实例暴露的：

1
2
3
4
5
6
7

const app = Vue.createApp({
  data () {
    count: 1
  }
})
const vm = app.mount('#app')
console.log(vm.count) // => 1

可以将用户定义的property添加到组件实例中，例如methods，props，computed，inject和setup。
Vue还通过组件实例暴露了一些内置property，如$attrs和$emit。这些property都有一个$前缀，以避免与用户定义的property名冲突。

生命周期钩子

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeUnmount
• unmounted
  

常用指令

指令 (Directives) 是带有v-前缀的特殊 attribute。

v-once

不需要表达式，只渲染元素和组件一次。即：只要给元素或者组件添加了v-once指令，那么元素或者组件只会渲染一次，无论组件实例中property的值怎么改变，元素或者组件都不会被重新渲染。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<div id="app">
  <p>插值：{{ msg }}</p>
  <p>v-once插值：<span v-once>{{ msg }}</span></p>
  <button @click="changeMsg">改值</button>
</div>
<script>
  const app = Vue.createApp({
    data () {
      return {
        msg: '插值'
      }
    },
    methods: {
      changeMsg () {
        this.msg = '哈哈哈哈'
      }
    },
  })
  const vm = app.mount('#app')
</script>

v-html

更新元素的 innerHTML。
注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。

1
2
3
4
5
6
7
8
9
10
11
12
13

<div id="app">
  <p v-html="rawHtml"></p>
</div>
<script>
  const app = Vue.createApp({
    data () {
      return {
        rawHtml: '<strong>哇哈哈哈</strong>'
      }
    }
  })
  const vm = app.mount('#app')
</script>

v-bind

动态地绑定一个或多个attribute，或一个组件prop到表达式。可以直接缩写:
在绑定class或styleattribute 时，支持其它类型的值，如数组或对象。

1
2
3
4
5
6

<img v-bind:src="imageSrc" />
<!-- 缩写 -->
<img :src="imageSrc" />
<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>

v-if

根据表达式的真假值来有条件地渲染元素。
当和v-if一起使用时，v-for的优先级比v-if更高。

1

<div v-if="flag">你看见我了</div>

v-else

前一兄弟元素必须有 v-if 或 v-else-if。

1
2
3
4
5
6

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

v-else-if

前一兄弟元素必须有 v-if 或 v-else-if。

1
2
3
4
5
6
7
8
9
10
11
12

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-show

根据表达式的真假值，切换元素的display CSS property。
当条件变化时该指令触发过渡效果。

1

<div v-show>看见我了</div>

与v-if的区别:

• v-if是通过控制dom节点的存在与否来控制元素的显隐,对元素进行销毁和重建;
• v-show是通过设置DOM元素的display样式，block为显示，none为隐藏,简单地 CSS 对元素进行切换;
• v-if会使得页面重绘,v-show则只是是页面重排;
  一般来说v-if有更高的切换开销,而v-show有较高的初始渲染开销,因此,如果需要非常频繁的切换,则试用v-show较好,如果在运行时条件很少改变,则使用用v-show较好

经过了漫长的迭代，Vue 3.0 终于在上 2020-09-18 发布了，带了翻天覆地的变化，使用了 Typescript 进行了大规模的重构，带来了 Composition API RFC 版本，类似 React Hook 一样的写 Vue，可以自定义自己的 hook ，让使用者更加的灵活，接下来我们就开始学习vue3.0。

安装

vue安装有如下三种方式：

• 以 CDN package 的形式导入，简而言之就是以<script>标签形式导入
  对于制作原型或学习，你可以这样使用最新版本

  1	<script src="https://unpkg.com/vue@next"></script>

• 使用npm安装
  在用 Vue 构建大型应用时推荐使用npm安装, NPM能很好地和诸如Webpack或Browserify模块打包器配合使用。同时Vue也提供配套工具来开发单文件组件。

  1 2	# 最新稳定版 $ npm install vue@next

• 使用官方的CLI来构建一个项目，它为现代前端工作流程提供了功能齐备的构建设置 (例如，热重载、保存时的提示等等)。
  Vue提供了一个官方的CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。
  对于Vue3，你应该使用npm上可用的Vue CLI v4.5作为@vue/cli@next。要升级，你应该需要全局重新安装最新版本的 @vue/cli：

  1 2 3

  $ yarn global add @vue/cli@next # OR $ npm install -g @vue/cli@next

  然后在 Vue 项目运行：

  1	$ vue upgrade --next

Vite脚手架

Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方法，它允许快速提供代码。
通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目。

1
2
3
4
5
6
7
8
9
10

# npm
$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev
# 或者 yarn
$ yarn create vite-app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev

具体操作步骤如下：

1. 第一步：全局重新安装最新版本的 @vue/cli

   1	$ npm install -g @vue/cli@next

2. 第二步：使用vite快速创建项目

   1	$ npm init vite-app vite-demo1

   
3. 第三步：进入到项目下，并执行如下命令

   1 2	$ cd vite-demo1 $ npm install

   
4. 第四步：然后使用npm run dev运行项目
   
5. 第五步：在浏览地地址栏输入localhost:3000，出现如下效果
   
   至此使用vite创建项目完成。

Vue-cli脚手架快速创建项目

使用vue-cli脚手架快速创建项目，需要执行如下几步：

1. 第一步：全局重新安装最新版本的 @vue/cli

   1	$ npm install -g @vue/cli

2. 第二步：创建项目

   1	$ vue create cli-demo

   
   选择**Default (Vue 3 preview) ([Vue 3] babel, eslint)**，然后回车

快速入门

声明式渲染

1
2
3

<div id="app">
Counter: {{ counter }}
</div>

1
2
3
4
5
6
7

Vue.createApp({
data() {
    return {
      counter: 0
    }
  }
}).mount('#app')

这样我们就创建了一个vue项目，请看下面实例：count 每秒自动递增

1
2
3
4
5
6
7
8
9
10
11
12

Vue.createApp({
data() {
    return {
      counter: 0
    }
  },
mounted () {
setInterval(() => {
      this.counter++
    }, 1000)
}
}).mount('#app')

基础类型

布尔值 boolean

最基本的数据类型就是简单的true/false值，在JavaScript和TypeScript里叫做boolean

1

let flag: boolean = false;

数字 number

和JavaScript一样，TypeScript里的所有数字都是浮点数。 这些浮点数的类型是number。

1
2
3
4

let num1: number = 6 // 十进制
let num2: number = 0xf00d // 十六进制
let num3: number = 0b1010 // ES6的二进制
let num4: number = 0o744 // ES6的八进制

字符串 string

和JavaScript一样，可以使用双引号"或单引号'表示字符串。

1
2

let str: string = 'hello typescript'
str = 'hello world'

还可以使用模板字符串

1
2
3
4
5
6
7

let fullname: string = '张三'
let age: number = 24
let sentence: string = `hello! my name is ${fullname}, I am ${age} years old`
// 使用 tsc 转换后的结果
var fullname = '张三';
var age = 24;
var sentence = "hello! my name is " + fullname + ", I am " + age + " years old";

数组

有两种方式可以定义数组。
第一种：可以在元素类型后面接上[]，表示由此类型元素组成的一个数组：

1
2
3

let arr1: number[] = [1, 2, 3]
// 使用 tsc 命令转换后的结果
var arr1 = [1, 2, 3]

第一种：使用数组泛型，Array<元素类型>：

1
2
3

let arr2: Array<number> = [1, 2, 3]
// 使用 tsc 命令转换后的结果
var arr2 = [1, 2, 3]

元组 Tuple

元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。
如：

1
2
3

let tuple1: [string, number]
tuple1 = ['haha', 23] // ok
tuple1 = [23, 'haha'] // Error

枚举

enum类型是对JavaScript标准数据类型的一个补充。

1
2

enum Color {Red, Green, Blue}
let c: Color = Color.Green

默认情况下，从0开始为元素编号。即上面的Red=0, Green=1, Blue=2，所以此时c = 1。
可以手动的指定成员的数值，如：将上面的例子改成从1开始编号：

1
2

enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green

或者，全部都采用手动赋值：

1
2

enum Color {Red = 1, Green = 4, Blue = 8}
let c: Color = Color.Green

注意：枚举类型提供的一个便利是你可以由枚举的值得到它的名字。

1
2
3

enum Color {Red = 1, Green = 2, Blue = 4}
let cName: string = Color[2]
console.log(cName)  // Green

Any

有时候在编程阶段还不清楚变量的类型，这种情况下，我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。那么我们可以使用 any类型来标记这些变量：

1
2
3
4
5

let notSure: any = 4
notSure = false
notSure = '哈哈哈'
notSure.ifItExists() // ok
notSure.toFixed() // ok

Void

某种程度上来说，void类型像是与any类型相反，它表示没有任何类型。 当一个函数没有返回值时，你通常会见到其返回值类型是void：

1
2
3

function test(): void {
console.log("This is my warning message")
}

声明一个void类型的变量没有什么大用，因为你只能为它赋予undefined和null：

1

let unusable: void = undefined

Null 和 Undefined

TypeScript里，undefined和null两者各自有自己的类型分别叫做undefined和null。 和void相似，它们的本身的类型用处不是很大：

1
2

let u: undefined = undefined
let n: null = null

默认情况下null和undefined是所有类型的子类型。 就是说你可以把null和undefined赋值给number类型的变量。

Never

never类型表示的是那些永不存在的值的类型。
例如: never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型； 变量也可能是never类型，当它们被永不为真的类型保护所约束时。
never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never类型（除了never本身之外）。 即使any也不可以赋值给never。
下面是一些返回never类型的函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
  throw new Error(message);
}

// 推断的返回值类型为never
function fail() {
  return error("Something failed");
}

// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
  while (true) {}
}

Deno是什么？

安装Deno

Typescript是什么？

安装Typescript

有两种主要的方式来获取TypeScript工具：

• 通过npm（Node.js包管理器）
• 安装Visual Studio的TypeScript插件

针对使用npm的用户：

1

npm install -g typescript

查看是否安装成功：

1

tsc -v # tsc --version

查看Typescript命令帮助：

1

tsc -h # tsc --help

构建第一个 Typescript 文件

在编辑器，新建greeter.ts文件并写入如下内容：

1
2
3
4
5

function greeter(person) {
  return "Hello, " + person
}
let user = "Jane User"
document.body.innerHTML = greeter(user)

编译代码

在命令行上，运行TypeScript编译器：

1

tsc greeter.ts

输出结果为一个greeter.js文件，它包含了和输入文件中相同的JavsScript代码。然后就可以运行typescript生成的JavaScript代码了。

electron是什么?

环境搭建

使用原生的Node.js开发环境来开发Electron应用。 为了打造一个Electron桌面程序的开发环境，只需要安装好Node.js、npm、一个顺手的代码编辑器以及对你的操作系统命令行客户端有基本了解。

创建第一个electron应用

Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用。 你可以把它看作一个 Node. js 的变体，它专注于桌面应用而不是 Web 服务器端。
从开发的角度来看, Electron application 本质上是一个 Node. js 应用程序。 与 Node.js 模块相同，应用的入口是 package.json 文件。 一个最基本的 Electron 应用一般来说会有如下的目录结构：

1
2
3
4

your-app/
 |- package.json
 |- index.js
 |- index.html

创建项目

创建项目空文件夹以及基本配置

首先为项目创建空文件夹electron-demo，然后在命令行输入如下命令：

1
2

cd electron-demo
npm init

然后一直回车到底，或者将npm init替换成npm init -y快速初始化。

配置启动命令

在上一步执行完成后会在electron-demo目录下创建package.json文件，修改package.json文件：

1
2
3
4
5
6
7
8
9
10
11
12

{
  "name": "electron-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ." // 启动项
  },
  "author": "",
  "license": "ISC"
}

配置好后，后期就可以直接在命令行输入：npm run start即可运行项目。

安装 Electron

在electron-demo命令行下输入如下命令进行安装electron：

1

npm i electron -S

开发

Electron apps 使用JavaScript开发，其工作原理和方法与Node.js 开发相同。 electron模块包含了Electron提供的所有API和功能，引入方法和普通Node.js模块一样。
在electron-demo下新建index.js，然后引入electron：

1

const electron = require('electron')

electron 模块所提供的功能都是通过命名空间暴露出来的。 比如说： electron.app负责管理Electron 应用程序的生命周期， electron.BrowserWindow类负责创建窗口。
下面是一个简单的index.js文件，它将在应用程序准备就绪后打开一个窗口：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

const { app, BrowserWindow } = require('electron')

function createWindow () {   
  // 创建浏览器窗口
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })
  // 并且为你的应用加载index.html
  win.loadFile('index.html')
}
app.whenReady().then(createWindow)

weex是什么?

开发环境配置

Weex 官方提供了weex-cli 的脚手架工具来辅助开发和调试。
首先需要安装Node.js和Weex Cli
安装好Node.js后，就可以直接使用 npm 来安装 weex-toolkit, 你也可以通过 yarn 来进行安装。

1

npm i weex-toolkit -g

安装结束后你可以直接使用 weex help 命令验证是否安装成功，它会显示 weex 支持的所有指令，同时，你也可以通过 weex doctor 命令检查你的本地开发环境。

快速创建项目

初始化项目

然后初始化 Weex 项目：

1
2

weex create 项目名称
weex create weex-demo

执行完命令后，在 weex-demo 目录中已经为我们生成了标准项目结构。

运行项目

进入项目所在路径，如果你在生成项目的时候选择了自动安装依赖，在进入项目后只需直接运行 npm start 就可以将项目完整跑起来，否则，你需要预先在项目中运行一下 npm install 安装项目所需依赖。

1
2
3

cd weex-demo
npm install # 这一步如果在创建项目时选择了自动安装依赖，就跳过
npm start

然后工具会启动一个本地的 web 服务，监听 8081 端口。你可以打开 http://localhost:8081 查看页面在 Web 下的渲染效果。 源代码在 src/ 目录中，你可以像一个普通的 Vue.js 项目一样来开发.
除此之外，你还可以打开 http://localhost:8081/preview.html 开启一个预览页面，它会把 web 端的页面放在一个 iframe 中渲染，而且在右侧生成一个二维码。用 Weex playground app 扫描这个二维码可以看到页面在手机上渲染的真实效果。

编译

默认情况下 weex create 命令并不初始化 iOS 和 Android 项目，你可以通过执行 weex platform add 来添加特定平台的项目。

1
2

weex platform add ios # ios
weex platform add android # android

为了能在本地机器上打开 Android 和 iOS 项目，你应该配置好客户端的开发环境。对于 iOS，你应该安装并且配置好 Xcode。对于 Android，你应该安装并且配置好 Android Studio。当开发环境准备就绪后，运行下面的命令，可以在模拟器或真实设备上启动应用：

1
2
3

weex run ios
weex run android
weex run web

调试

weex-toolkit 还提供了强大的调试功能，只需要执行：

1

weex debug

这条命令会启动一个调试服务，并且在 Chrome （目前只支持基于 V8 引擎的桌面浏览器） 中打开调试页面。详细用法请参考 weex-toolkit 的文档。

哈哈哈

gitee配置rsa公钥密钥

参考：https://blog.csdn.net/liyanpig/article/details/105879263

1. 在本地命令行输入：

   1	ssh-keygen -t rsa -C "xxxxx@xxxxx.com"

Github配置rsa公钥秘钥

发表说说/动态功能是使用的artitalk.js，官网

准备

1. 前往 LeanCloud 国际版，注册账号。
2. 注册完成之后根据 LeanCloud 的提示绑定手机号和邮箱。
3. 绑定完成之后点击创建应用，应用名称随意，接着在结构化数据中创建 class，命名为 shuoshuo。
4. 在你新建的应用中找到结构化数据下的用户。点击添加用户，输入想用的用户名及密码。
5. 回到结构化数据中，点击 class 下的 shuoshuo。找到权限，在 Class 访问权限中将 add_fields 以及 create 权限设置为指定用户，输入你刚才输入的用户名会自动匹配。为了安全起见，将 delete 和 update 也设置为跟它们一样的权限。
6. 然后新建一个名为atComment的class，权限什么的使用默认的即可。
7. 点击 class 下的 _User 添加列，列名称为 img，默认值填上你这个账号想要用的发布说说的头像url，这一项不进行配置，说说头像会显示为默认头像 —— Artitalk 的 logo。
8. 在菜单栏中找到设置-> 应用 keys，记下来 AppID 和 AppKey ，一会会用。
9. 最后将 _User 中的权限全部调为指定用户，或者数据创建者，为了保证不被篡改用户数据已达到强制发布说说。

开始使用

使用hexo new page 名称创建一个说说页面，如：

1

hexo new page shuoshuo

然后在shuoshuo/index.md中添加如下代码：

1
2
3
4
5
6
7
8

<script type="text/javascript" src="https://unpkg.com/artitalk"></script>
<div id="artitalk_main"></div> // 存放说说列表的容器
<script>
  new Artitalk({
    appId: 'lMd0eLhIQPpENoI7ScrQSa63-MdYXbMMI',
    appKey: '3tOgjMl6MmfupNrqfFHTnHhm'
  })
</script>

至此就已经实现了发布说说的功能。

更多配置

查看artitalk配置文档

本地搜索

hexo实现站内搜索，实则上是使用了hexo-generator-search插件

安装

根据它的文档去做相应配置。注意格式只支持 xml。

1

npm install hexo-generator-search --save

配置

修改主题配置文件_config.butterfly.yml：

1
2
3
4
5

local_search:
  enable: true
  labels:
    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}" # if there are no result

Algolia

你需要安装 hexo-algolia 或 hexo-algoliasearch. 根据它们的説明文档去做相应的配置。

安装

1

npm install hexo-algolia --save

配置

修改主题配置文件_config.butterfly.yml：

1
2
3
4
5
6
7
8

algolia_search:
  enable: true
  hits:
    per_page: 6
  labels:
    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}" # if there are no result
    hits_stats: "${hits} results found in ${time} ms"

前言

因为在不同平台发布同一篇文章的时候，最一个痛苦的点就是，图片存储问题，各个平台的文件存储方式各不相同，无法直接 Ctrl + C 的方式一键搞定，为了解决这个问题，使用 MarkDown + 图床 的方式进行文章的写作，将图片放到一个统一的地方，在文章中引入图片外链。
所谓图床，就是将图片储存到第三方静态资源库中，其返回给你一个 URL 进行获取图片。MarkDown 支持使用 URL 的方式显示图片，我想这也是程序员为什么对其偏爱的原因之一。
作为程序员，你会发现，现在很多论坛和社区都开始支持使用 MarkDown，如果你没使用图床的情况下，你分享同一篇文章，你要在不同的平台，各自重新编辑排版一遍和上传图片一次。
有了图床，情况就不一样了，Ctrl+C 的方式就搞定了，根本不用再 Check 文章内容一遍。

图床的选择

• 微博图床：以前用的人比较多，从 2019 年 4 月开始开启了防盗链，凉凉
• SM.MS：运营四年多了，也变得越来越慢了，到了晚上直接打不开图片，速度堪忧
• 其他小众图床：随时有挂掉的风险
• Imgur 等国外图床：国内访问速度太慢，随时有被墙的风险
• 大厂储存服务：例如七牛云、又拍云、腾讯云COS、阿里云OSS等，操作繁琐，又是实名认证又是域名备案的，麻烦，而且还要花钱（有钱又不怕麻烦的当我没说）
• GitHub 图床：免费，但是国内访问速度慢（不过没关系，利用 jsDelivr 提供的免费的 CDN 加速 速度足够了）
• Gitee图床：免费，并且是国内的访问速度快。

Github图床搭建

搭建流程

1. 新建 GitHub 仓库
2. 生成一个 Token
3. 配置 PicGo 并使用 jsdelivr 作为 CDN 加速
4. 使用 Imagine 进行图片压缩
5. 上传图片到 PicGo 并使用图床

新建Github仓库

1. 登录/注册 GitHub
2. 新建一个仓库，填写好仓库名: 这里我们使用cdn/img随便都行
3. 仓库描述
4. 将权限设置成 public
5. 根据需求选择是否为仓库初始化一个 README.md 描述文件
   

生成Token

1. 点击用户头像 -> 选择 Settings
   

2. 点击 Developer settings
   

3. 点击 Personal access tokens
   

4. 点击 Generate new token
   

5. 填写 Token 描述，勾选 repo，然后点击 Generate token 生成一个 Token
   

6. 获取 Token 密钥
   注意：这个 Token 只会显示一次，自己先保存下来，或者等后面配置好 PicGo 后再关闭此网页
   

配置 PicGo 并使用 jsdelivr 作为 CDN 加速

前往下载 PicGo（点击下载），安装好后开始配置图床

• 设定仓库名：按照 用户名/图床仓库名 的格式填写
• 设定分支名：master
• 设定 Token：粘贴之前生成的 Token
• 指定存储路径：填写想要储存的路径，如 img/，这样就会在仓库下创建一个名为 img 的文件夹，图片将会储存在此文件夹中
• 设定自定义域名：它的的作用是，在图片上传后，PicGo 会按照自定义域名+上传的图片名的方式生成访问链接，放到粘贴板上，因为我们要使用jsDelivr 加速访问，所以可以设置为https://cdn.jsdelivr.net/gh/用户名/图床仓库名
  

什么是 jsdelivr ?
jsDelivr 为开发者提供免费公共 CDN 加速服务

使用 Imagine 进行图片压缩

通常情况下，图片大小都是超过 200KB 的，所以网页加载的时候会特别慢，一般我们会对图片进行压缩，这里我推荐 Imagine（点击下载） 支持全平台。

Imagine 采用的是有损压缩，介意的可以忽略这一步

顺便推荐一个无损压缩的网站：https://tinypng.com/

上传图片到 PicGo 并使用图床

配置好 PicGo 后，我们就可以进行高效创作了，将压缩后的图片拖拽到上传区，将会自动上传并复制访问链接，将链接粘贴到博文中就行了，访问速度杠杠的

此外 PicGo 还有相册功能，可以对已上传的图片进行删除，修改链接等快捷操作，PicGo 还可以生成不同格式的链接、支持批量上传、快捷键上传、自定义链接格式、上传前重命名等，更多功能自己去探索吧！

Gitee图床搭建

在写 markdown 文件的时，会不可避免的插入图片。可以通过PicGo + gitee 实现markdown图片在线存储。

搭建流程

1. 下载PicGo
2. 安装PicGo并且安装Gitee图床插件(PicGo默认不包含 Gitee 图床)
3. 创建Gitee图床存储仓库
4. 设置Gitee私人令牌
5. 设置PicGo + Gitee图床信息

下载PicGo

前往下载 PicGo（点击下载），下载好后进行安装

安装PicGo并且安装Gitee图床插件

PicGo默认不包含 Gitee 图床,需要自己在插件市场进行安装，请按照图上步骤进行安装。

创建Gitee图床存储仓库

登录Gitee账号(没有自己注册一个账户)，然后点击右上角的+号，按照下图的顺序填写与勾选。

设置Gitee私人令牌

私人令牌字符串只会在密码验证后出现一次，注意复制保存。
点击右上角个人头像 -> 设置 进入到设置中心，如下：

然后点击私人令牌，按照图上顺序进行填写：


生成令牌后请注意保存，关闭窗口后就无法再次查看。

设置PicGo + Gitee图床信息

• repo：仓库(一般采用Git用户名/仓库名)
• branch：分支(一般使用master)
• token：私人令牌(将上一步生成的私人令牌复制粘贴)
• path：则是在图片上传成功后访问地址的前缀
• customPath: 生成文件后的重命名方式，按照自己的需求进行选择
• customUrl: 可以不填写

配置成功后的访问地址则是如下：

https://gitee.com/jiuaiop/img/raw/master/img/Gitee%E5%9B%BE%E5%BA%8A%E6%90%AD%E5%BB%BA_08.png

NextCoud图床搭建

在写 markdown 文件的时，会不可避免的插入图片。可以通过PicGo + NextCloud 实现markdown图片在线存储。

搭建流程

1. 下载PicGo
2. 安装PicGo并且安装NextCloud图床插件(PicGo默认不包含 NextCloud 图床)
3. 搭建NextCloud个人网盘
4. 设置PicGo + NextCloud图床信息