base-web-map 说明文档

此文档为base-web-map项目案例以及arc-gis和ol-map使用说明文档

# base-web-map

# 项目说明

此项目主要分为三个部分：工具类、arcgis 案例、olmap 案例，采用代码混入的方式使用，除此之外还包含部分组件代码（后续持续扩充）

# 项目结构

src
├─ arc-gis   arcgis混入目录
│ ├─ index.js
│ └─ modules
│    ├─ draw.js
│    ├─ init.js
│    ├─ measure.js
│    └─ sketch.js
├─ map-json  地图路径json集合
│ ├─ index.js
│ └─ modules
│   ├─ dl-dark-online-ol.json
│   ├─ dl-dark-test-ol.json
│   ├─ dl-normal-test.json
│   ├─ qz-wms-test.json
│   └─ yc-dark-test.json
├─ mapComponents 组件
├─ ol-map  olmap混入目录
│ ├─ index.js
│ └─ modules
│   ├─ draw.js
│   ├─ init.js
│   └─ measure.js
├─ page

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

# 使用方式

arcgis 和 olmap 的使用方式基本一致

引入
- 其中mapJson包含所有地图 json 数据，使用文件名引入即可
- 其中arcgis包含所有混入(olMap同理)

<div :id="mapRandomId" class="map-dom" />

import arcgis from "@/arc-gis/index.js";
import mapJson from "@/map-json/index.js";

1
2

声明

export default {
  mixins: [arcgis.init],
  data() {
    return {
      gisConfig: mapJson["yc-dark-test"],
    };
  },
};

1
2
3
4
5
6
7
8

初始化

this.InitMap({
  controls: ["full", "mini", "scale", "zoom", "extent", "rotate"],
});
await this.InitGis({ center: this.center, zoom: this.zoom });

1
2
3
4

# 工具类

目前工具类只有坐标转换一项内容：https://base-web.btzh.net:4443/base-map/#/coordinate

# ArcGis

本次案例基本基于arcgis14.x版本案例

本次案例代码方向主要分为四个模块init(初始化)、draw(绘制)、measure(测距)、sketch(组件)来进行区分和使用

# init(初始化)

初始化代码主要包括初始化地图、加载各种类型的地图(tile;image;feature;wms;webTile等)、地图中心点、初始化各种Geometry、设置token等用于基础方法和用于其他方法的基础配置

# draw(绘制)

绘制代码主要绘制方向分为两个Graphics和Featrue，绘制实现主要是：点位；图片；线段；文字；图形，除此之外包括了查询功能

# measure(测距)

测距代码主要包括绘制点线面并测量距离坐标和面积，除此之外还包括空间统计，在一定范围内查询点线面内的点位数量

# sketch(组件)

该方法主要是arc-gis内部提供了绘制组件，可以自定义绘制点线面和方形、圆形并且获得绘制的坐标集合,并且可以二次编辑

# OlMap

本次代码案例方向主要分为三个模块init(初始化)、draw(绘制)、measure(测距)来进行区分和使用

# init(初始化)

本模块主要包括初始化地图和地图组件，加载各种类型地图、地图中心点等基础配置

# draw(绘制)

本模块主要包括绘制点线面逻辑和配置样式方法,还包括点位查询，sql 查询等查询方法

# measure(测距)

主要包括绘制点线面并测量距离坐标和面积，除此之外还包括空间统计，在一定范围内查询点线面内的点位数量

# 组件

# 楼栋查询组件

本组件是包括楼栋列表，楼栋详情，户室列表，户室详情四个弹窗组成，主题分为白色和黑色两种

# 点位查询组件

本组件分为arc-gis和ol-map都各有一个，功能类似

可以输入社区、网格、街道编码，地图弹窗直接定位到该区域
点击查询可以返回社区、网格、街道的信息以及坐标信息

上次更新: 2024/01/18, 10:44:15

← base-web-ele说明文档 base-web说明文档→