npm package: @geoscene/leaflet
Description: Leaflet plugins for consuming GeoScene Online and GeoScene Server services.
Latest version: 3.0.13

# GeoScene Leaflet


[Leaflet](http://leafletjs.com/) 插件用于处理 GeoScene Service服务类型. 包括 GeoScene底图和 feature services要素服务, tiled切片服务, dynamic动态地图服务.


该项目的目标不是取代用于 [GeoScene API for JavaScript](https://doc.geoscene.cn/javascript) 而是仅为GeoScene平台的某些方面提供小型组件，供喜欢使用轻量级构建地图应用程序的开发人员使用。

## 快速开始

最简单的入门方法是通过CDN加载geoscene-leaflet插件。以下是一个可以复制/粘贴到自己的.html文件中的示例
```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>GeoScene Leaflet Debugging Sample</title>
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />

    <!-- Load Leaflet -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
      integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
      crossorigin=""
    />

    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script
      src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
      integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
      crossorigin=""
    ></script>

    <!-- Load GeoScene Leaflet from source-->
    <script src="../dist/geoscene-leaflet.js"></script>

    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
      }

      #info-pane {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 1000;
        padding: 1em;
        background: white;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="info-pane" class="leaflet-bar">
      <label> sample application for debugging </label>
    </div>

    <script>
      /*
    make a copy of this file in the same folder if you'd like git to ignore your local changes
    */
      var map = L.map("map").setView([43.5, -98.5], 6);

       L.geoscene.basemapLayer("tianditu-vector").addTo(map);
       L.geoscene.basemapLayer("tianditu-vector-annotion").addTo(map);

      var fl = L.geoscene
        .featureLayer({
          url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/flash_flood_warnings_2002_2012/FeatureServer/0",
        })
        .addTo(map);

      L.geoscene
        .dynamicMapLayer({
          url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Elevation/WorldElevations/MapServer",
          opacity: 0.4,
        })
        .addTo(map);
    </script>
  </body>
</html>

```

### npm 安装方式
```
npm i @geoscene/leaflet
```

### 使用

```js
 /**js***/
import "leaflet/dist/leaflet.css";
import  * as L from "leaflet";
import { basemapLayer } from "@geoscene/leaflet";

const center = [30.636088, 180.990693];
const zoom = 4;
const map = L.map("map").setView(center, zoom);

basemapLayer("tianditu-vector").addTo(map);
basemapLayer("tianditu-vector-annotion").addTo(map);


 /**css***/

#map{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
}


 /**html***/
<div id="map"></div>
```


### 资源
[GeoScene Maps SDK for JavaScript](https://doc.geoscene.cn/javascript/)
[Leaflet](http://leafletjs.com/)


### 许可

易智瑞信息技术有限公司版权所有 © 2023并保留所有权利。发行于中华人民共和国。

本材料在 GeoScene 主许可协议（MLA）下许可使用，并受该协议条款的约束。 只要遵守主许可协议中的条款并包括此版权声明，您即可在不进行修改的情况下 重新分发和使用这些代码。

查看 https://links.geoscene.cn/legal/GeoScene_EULA.pdf 了解使用限制