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

目录

  • 工具网站推荐
  • 介绍leaflet
  • 项目实战
    • 地图创建
    • 优化只显示中国
    • 优化只显示某一个省/市/区

工具网站推荐

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

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

介绍leaflet

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

点击查看文档。

项目实战

以react项目为例子。

首先安装leaflet

css 复制代码
npm i leaflet

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

arduino 复制代码
import 'leaflet/dist/leaflet.css'

🚗 这个很重要!!!

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

地图创建

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

Leaflet(默认使用EPSG:3857,也可以使用WGS84)

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

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

直接上代码⬇️⬇️

typescript 复制代码
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的地址是我本地的瓦片地图地址详情可以看上一篇文章
  • 为什么只显示了部分呢?因为我下载的瓦片就是中国的,这个视角是看全世界。

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

优化只显示中国

先看最终效果⬇️⬇️

直接上代码⬇️⬇️

arduino 复制代码
 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的的数据。代码如下。

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

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

React项目完整代码

相关推荐
zhougl9961 小时前
html处理Base文件流
linux·前端·html
花花鱼1 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_1 小时前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo3 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之4 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端4 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡4 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木5 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!6 小时前
优选算法系列(5.位运算)
java·前端·c++·算法
難釋懷6 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript