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