# webgis-maps

**Repository Path**: azure-s/webgis-maps

## Basic Information

- **Project Name**: webgis-maps
- **Description**: 前端WebGIS统一Map地图模型库，目前主要增加了对leaflet和mapbox地图框架的支持， 通过typescript技术实现js模型的抽象定义，最后对外暴露API，使得用户拿到API就可以很轻松的上手使用leaflet和mapbox各种炫酷的地图交互。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2023-12-13
- **Last Updated**: 2023-12-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# webgis-maps

## 1. 介绍
前端WebGIS通用Map地图框架模型库，目前暂只支持leaflet和mapbox两款地图框架的部分API功能。通过TypeScript实现JS业务模型的抽象定义，并封装了日常开发中经常使用到的XXX地图框架的API，从而降低了地图交互功能的重复编码率，提高开发效率的同时也降低了开发人员学习XXX地图框架的门槛。

## 2. 使用

### 2.1 依赖项
该模块依赖于leaflet和mapbox-gl库，由于mapbox地图框架用的场景比较少，因此前期的版本中关于mapbox部分的API没有
暴露出去，所以仅需在宿主项目中安装leaflet库即可，其推荐版本如下：
```
leaflet:1.7.1

```

### 2.2 安装
由于该模块还在不断完善中，npm仓库提交的版本会很频繁，如有检测到最新版本，建议先移除旧版本，然后再安装新版本。
```
 yarn remove webgis-maps && yarn add webgis-maps
```
### 2.3 axios封装
axios简单封装如下（以下只是参考，主要为了配合该模块做的封装，具体情况基于实际开发环境来）：

request.js

```javascript
import axios from "axios";

const apiService = axios.create({
  timeout: 60 * 1000,
});

const axiosFn = {
  // get请求
  commonOnGet: (url, params = {}, headers = {}) => {
    return apiService.get(url, {
      params: params,
      headers: headers,
    });
  },
};

export {apiService,axiosFn};
```

### 2.3 leaflet使用案例

index.jsx (初始化路由组件)

```javascript
import React from "react";
import MapView from "../pages/map-view/MapView";
import {Switch } from "antd";
import { useState } from "react";
import { axiosFn } from "../request";

const switchStyle = {
  position: "absolute",
  top: "50px",
  right: "280px",
  zIndex: 9999999999,
  borderRadius: "3px",
};

const spanStyle = {
    position: "absolute",
    top: "50px",
    right: "200px",
    zIndex: 9999999999,
    borderRadius: "3px",
    fontSize:"15px",
    color:"white"
  };

const MapIndex = (props) => {
  const [showGrid, setShowGrid] = useState(false);
  const onChange = () => {
    setShowGrid(!showGrid);
  };
  return (
    <div className="App">
      <MapView showGrid={showGrid} />
      <Switch
        style={switchStyle}
        checkedChildren="开启"
        unCheckedChildren="关闭"
        defaultChecked
        onChange={onChange}
      >
      </Switch>
      <span style={spanStyle}>经纬线网格</span>
    </div>
  );
};

export default MapIndex;

```

mapview.css（MapView组件的样式）

```css
.container {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  left: 0;
  top: 0;
}
```

MapView.jsx（地图视图组件）

```javascript
import React, { Component } from "react";
import {
  LeafletMap, // LeafLet地图模型类
  LeafletDrawLonlatLine, // LeafLet经纬网格插件类
  LeafletTileLayer,// LeafLet栅格瓦片图层
  OgcXmlParser,// ogc服务能力解析类
  LeafletWmtsLayer,// LeafLet·wmts图层
} from "webgis-maps";
import { axiosFn } from "../../request";
import "./mapview.css";

export default class MapView extends Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    this.initMap();
  }
  componentWillUnmount() {
    /**释放资源,移除经纬线相关图层和地图事件*/
    this.lonLatGridLines.removeDrawEvent();
  }

  initMap() {
    /** 构建LeafletMap对象*/
    const leafletMap = new LeafletMap("map", { zoomControl: false },[30.3634,107.33643]);
    /** 获取LeafletMap对象中的map对象（leaflet api中的map实例）*/
    let map = leafletMap.getMap();
    /** 添加自定义的缩放控件,默认屏幕位置：topleft */
    leafletMap.addZoomSlider();
    /** 添加自定义的缩放层级显示span功能，默认屏幕位置：topleft */
    leafletMap.addZoomLable();
    /** 添加鼠标滑过动态显示经纬度span功能，默认屏幕位置：bottomright */
    leafletMap.addMousePosition();

    /** arcgis xyz服务类型的地址 */
    let arcgisXYZ = "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}";
    /** 构建leaflet栅格瓦片图层对象 */
    let arcgisLayer = new LeafletTileLayer("arcgis", arcgisXYZ);
    /** 将栅格瓦片图层添加到leafletMap中 */
    leafletMap.addLayer(arcgisLayer);

    let suzhouWMTS = "http://10.16.248.40:8080/tile/service/wmts/1572457472291904/0";
    /** 解析wmts服务（比如：范围、图层、样式、分辨率、瓦片变化矩阵等） */
    axiosFn
      .commonOnGet(OgcXmlParser.getWmtsCapabilitiesUrl(suzhouWMTS))
      .then((res) => {
        /** 获取wmts服务能力xml描述 */
        let xmlData = res.data;
         /** 获取wmts服务图层的配置项 */
        let options = OgcXmlParser.getWmtsOptions(xmlData);
         /** 获取wmts服务的范围 */
        let fitBounds = OgcXmlParser.getFitBounds(xmlData)
         /** 地图定位到wmts服务所在的范围 */
        map.fitBounds(fitBounds)
        /** 构建wmts图层 */
        let suzhouWMTSLayer = new LeafletWmtsLayer("suzhou", suzhouWMTS);
        /** 设置wmts图层的配置项 */
        suzhouWMTSLayer.setWmtsOptions(options);
        /** 将wmts图层添加到leafletMap中 */
        leafletMap.addLayer(suzhouWMTSLayer);
      });
    
    /** leaflet·wms服务图层与wmts图层类似！！！ */

    /**以下仅是额外扩展的leaflet插件功能*/
    this.lonLatGridLines = new LeafletDrawLonlatLine(map);
    /**经纬线设置为红色*/
    this.lonLatGridLines.setLineColor("red");
    /**经纬线度数文本颜色调整为黄色*/
    this.lonLatGridLines.setTextColor("yellow");
    /**经纬线度数文本四个方位（东西南北）均显示*/
    this.lonLatGridLines.setTextPosition("all");
  }

  /**展示经纬格网图层*/
  doShowGrid(showGrid) {
    if (!this.lonLatGridLines) {
      return;
    }
    if (showGrid) {
      /** 添加绘制地图事件（即拖动地图时，清除上一次的图层的同时绘制新的图层）*/
      this.lonLatGridLines.addDrawEvent();
      /** 初始化话的时候，触发一次绘制*/
      this.lonLatGridLines.drawLonlatTileGrid();
    } else {
      this.lonLatGridLines.removeDrawEvent();
    }
  }

  render() {
    let { showGrid } = this.props;
    this.doShowGrid(showGrid);
    return <div id="map" className="container"></div>;
  }
}
```
## 3. 最终效果图

![img](https://upload-images.jianshu.io/upload_images/24868727-9c75fb080b27e47d.png)