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

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 (初始化路由组件)

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组件的样式）

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

MapView.jsx（地图视图组件）

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. 最终效果图