地图

leaflet

40.1k

Leaflet 是一个开源的JavaScript库，用于在网页上创建交互地图。它设计轻量级、简单、易于使用，并且提供了广泛的功能，使得开发者能够快速地在他们的网站或Web应用程序中集成地图。

主要特点:

轻量级：Leaflet核心库非常小，只有约38 KB的gzip压缩版。
跨平台兼容：支持所有主流的桌面和移动平台。
易于使用：API简单直观，上手容易。
高度可定制：可以通过插件扩展其功能，社区支持的插件非常丰富。
开源：Leaflet遵循BSD许可证，可以自由使用和修改。

以下是一个创建简单地图的基本示例，使用了OpenStreetMap作为地图源，并在地图上添加了一个标记和弹出窗口。

首先通过CDN在项目中引入Leaflet的CSS和JavaScript文件

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

调用相应API

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Leaflet Map</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
  </head>
  <body>
    <div id="map" style="width: 600px; height: 400px;"></div>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script>
        // 初始化地图并设置中心点和缩放级别
        var map = L.map('map').setView([51.505, -0.09], 13);

        // 添加瓦片图层到地图上
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);

        // 添加一个标记到地图上
        L.marker([51.5, -0.09]).addTo(map)
            .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
            .openPopup();
    </script>
  </body>
</html>

React Leaflet

4.9k

React Leaflet 是一个为React应用提供的Leaflet集成库。它将Leaflet的地图功能封装成React组件，使得在React项目中集成地图变得更加简单和React风格化。

主要特点:

React风格的组件：React Leaflet提供了Map、TileLayer、Marker等组件，使得在React中使用地图就像使用其他任何组件一样。
声明式API：通过声明式的API，你可以轻松地在React应用中添加和管理地图。
可组合性：可以将不同的地图组件组合在一起，创建复杂的地图应用。

安装: 要在React项目中使用React Leaflet，你需要安装两个包：leaflet 和 react-leaflet。npm install leaflet react-leaflet

以下是一个基本的地图集成示例，MapContainer 是地图的容器，TileLayer 是地图的瓦片层，Marker 是地图上的标记，Popup 是点击标记后显示的弹出窗口。

import React from 'react';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';

const MapExample = () => {
  return (
    <MapContainer center={[51.505, -0.09]} zoom={13} style={{ height: '100vh', width: '100%' }}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      />
      <Marker position={[51.505, -0.09]}>
        <Popup>
          A pretty CSS3 popup. <br /> Easily customizable.
        </Popup>
      </Marker>
    </MapContainer>
  );
};

export default MapExample;

注意事项：

确保在使用React Leaflet组件之前引入了Leaflet的CSS文件，否则地图可能不会正确显示。
React Leaflet的版本需要与React的版本兼容。例如，React Leaflet v3需要React 17或更高版本。
如果你需要使用Leaflet插件，可能需要额外的封装或查找已有的React Leaflet兼容插件。

Getting Started with Leaflet.js and React: Rendering a Simple Map

openlayers

10.9k

OpenLayers 是一个强大的、开源的JavaScript库，用于在网页上展示地图。它支持多种地图源，包括瓦片地图、矢量图层以及各种GIS服务，如WMS（Web Map Service）、WFS（Web Feature Service）等。OpenLayers 使得开发者可以轻松地在他们的网页或者Web应用中嵌入动态地图和地理信息系统（GIS）功能。

主要特点:

多源支持：支持多种地图源和格式，包括OpenStreetMap、Bing Maps、Google Maps等。
丰富的功能：提供了大量的功能，如地图导航、缩放、拖拽、矢量图形绘制、地图叠加等。
高度可定制：可以根据需要自定义图层、控件、交互等。
强大的API：提供了丰富的API接口，方便开发者进行开发和扩展。

以下是一个创建简单地图的基本示例，使用了OpenStreetMap作为地图源，并将地图视图定位到了指定的经纬度和缩放级别。

首先通过CDN在项目中引入OpenLayers的库。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/ol/ol.js"></script>

调用相关API

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script src="https://cdn.jsdelivr.net/npm/ol/ol.js"></script>
    <script type="text/javascript">
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([37.41, 8.82]),
          zoom: 4
        })
      });
    </script>
  </body>
</html>

turf

8.8k

Turf.js 是一个在浏览器和Node.js上运行的JavaScript库，用于进行空间分析。它提供了一系列模块化的GIS（地理信息系统）功能，使得开发者可以轻松实现各种复杂的地理空间数据处理和分析任务。Turf.js的功能包括但不限于测量距离、面积，创建缓冲区，寻找最近点，以及更多的空间操作。

主要特点：

模块化：Turf.js是完全模块化的，你可以只引入需要的功能，以减少最终打包的大小。
简单易用：Turf.js提供了简单直观的API，使得进行复杂的空间分析变得简单。
兼容性：可以在浏览器和Node.js环境中使用，与现有的JavaScript库和框架（如Leaflet、OpenLayers等）良好兼容。
开源：Turf.js是开源项目，可以自由使用和修改。

安装：

可以通过npm来安装Turf.js：npm install @turf/turf
如果你在浏览器中使用，可以通过CDN引入：<script src="https://cdn.jsdelivr.net/npm/@turf/turf"></script>

以下是一个使用Turf.js计算两点之间距离的简单示例：

const turf = require('@turf/turf');

// 定义两个点的坐标
const point1 = turf.point([-75.343, 39.984]);
const point2 = turf.point([-75.534, 39.123]);

// 计算两点之间的距离（默认单位为千米）
const distance = turf.distance(point1, point2);

console.log(`两点之间的距离是：${distance}千米`);

应用场景:

测量距离和面积：可以计算两点之间的距离，或者计算多边形的面积。
创建缓冲区：围绕一个点或多边形创建指定半径的缓冲区。
空间分析：进行点在多边形内的判断，寻找一组点中距离另一个点最近的点等。
数据转换：将地理数据从一种格式转换为另一种格式，如从GeoJSON转换为其他GIS格式。

地图

leaflet​

React Leaflet​

openlayers​

turf​

leaflet

React Leaflet

openlayers

turf