前端离线地图 - React项目实践

最新推荐文章于 2024-05-06 09:44:33 发布

过期的面包片

最新推荐文章于 2024-05-06 09:44:33 发布

阅读量248

点赞数

分类专栏：离线地图文章标签：前端 react.js 前端框架

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/sinat_31076477/article/details/134711477

版权

离线地图专栏收录该内容

2 篇文章 0 订阅

订阅专栏

工具网站推荐

为了渲染离线地图，不仅需要上一篇的瓦片图片信息。这里还需要GeoJson数据集。我们可以去阿里云的datav下载。如图下载

阿里这个平台的GeoJson数据很全，对于做国内项目完全够用了。

介绍leaflet

Leaflet 是一个开源并且对移动端友好的交互式地图 JavaScript 库。它大小仅仅只有 42 KB of JS, 并且拥有绝大部分开发者所需要的所有地图特性。

点击查看文档。

项目实战

以react项目为例子。

首先安装leaflet

npm i leaflet

安装完成之后在入口文件引入它的css

import 'leaflet/dist/leaflet.css'

🚗 这个很重要！！！

因为我的项目中需要只显示中国的领土区域，所以这边只显示了中国领土。首先看看成品效果吧⬇️

地图创建

因为在创建地图的时候需要指定中心点，所以我们需要补充下关于坐标的知识。

Leaflet（默认使用EPSG:3857，也可以使用WGS84）

EPSG:3857是平面坐标系，单位是米，它基于墨卡托投影，例如： [12914838.35, 4814529.9]
详细解释：GCJ02、BD09、WGS84都是地理坐标系，球面坐标，单位为度，这种坐标方便在地球上定位，但是不方便展示和进行面积距离计算，我们印象中的地图都是平面的，所以就有了另外一种平面坐标系，平面坐标系是通过投影的方式从地理坐标系中转换过来，所以也称为投影坐标系，通常单位为米，投影坐标系根据投影方式的不同存在多种，在Web开发的场景里通常使用的是Web墨卡托投影，编号为EPSG:3857，它基于墨卡托投影，把WGS-84坐标系投影成正方形，这是通过舍弃了南北85.051129纬度以上的地区实现的，因为它是正方形，所以一个大的正方形可以很方便的被分割为更小的正方形。
作者：Infinity_Future
链接：https://juejin.cn/post/6983944606387798047
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

根据上文中关于坐标的解释，我们可以使用高德的坐标来定位我们自定义地图的位置。点击高德坐标拾取获取你想要自己地图为中心的坐标。

直接上代码⬇️⬇️

import React, { FC, useEffect } from 'react';
import L from 'leaflet';
export interface MapDefaultProps {}
let map;
const MapDefault: FC<MapDefaultProps> = () => {
    useEffect(() => {
        let container: any = L.DomUtil.get('map-default');
        if (container != null) {
            container._leaflet_id = null;
        }
         
        map = L.map('map-default', {
            center: [36.67, 105.17],
            zoom: 4.4,
        });
        L.tileLayer(`http://localhost:8080/{z}/{x}/{y}.png`, {}).addTo(map)
    }, []);
     return <div id="map-default" style={{
        width: '100vw',
        height: '100vh'
     }}></div>;
};
export default MapDefault;

解释下其中center的坐标是我去高德地图坐标拾取到的位置
其中http://localhost:8080/{z}/{x}/{y}.png的地址是我本地的瓦片地图地址详情可以看上一篇文章
为什么只显示了部分呢？因为我下载的瓦片就是中国的，这个视角是看全世界。

以上代码的效果是⬇️⬇️

优化只显示中国

先看最终效果⬇️⬇️

直接上代码⬇️⬇️

 L.TileLayer.boundaryCanvas(`http://localhost:8080/{z}/{x}/{y}.png`, {
            boundary: GeoJSON,
        }).addTo(this.map);
        
        
// 需要安装boundaryCanvas插件 
npm i leaflet-boundary-canvas

解释boundaryCanvas是一个leaflet的插件，可以自己点击查看相关文档。
boundary的GeoJson需要自己去下载，上文中有提到。
插件的使用是在leaflet之后引入就好了

优化只显示某一个省/市/区

有了上一节的显示中国其实只要下载对应的GeoJson数据就可以显示对应的地区。注意zoom的缩放比例。

至此介绍完毕。

说点别的

我是项目都给到测试在测了才发现，我们并没有在服务器部署瓦片地图服务但是地图照样显示。如下图

后来才发现leaflet的geoJSON方法可以直接渲染GeoJson的的数据。代码如下。

L.geoJSON({GeoJson}, {
            style: {
                color: '#007457',
                weight: 2,
                opacity: 0.5,
                fillColor: '#e4f0ed',
                fillOpacity: 0.8,
                className: '',
            },
        }).addTo(map)

不过为了放大之后为了显示更多细节，还是把地图瓦片部署上去了。有了这个经验，其实如果纯粹的为了显示UI的话。你甚至都不需要下载瓦片地图。至于高德/百度/腾讯都有的那种添加marker的东西leaflet都可以实现。具体请认真查看文档。

React项目完整代码