@geoscene/leaflet
v3.0.13
Published
Leaflet plugins for consuming GeoScene Online and GeoScene Server services.
Downloads
11
Readme
GeoScene Leaflet
Leaflet 插件用于处理 GeoScene Service服务类型. 包括 GeoScene底图和 feature services要素服务, tiled切片服务, dynamic动态地图服务.
该项目的目标不是取代用于 GeoScene API for JavaScript 而是仅为GeoScene平台的某些方面提供小型组件，供喜欢使用轻量级构建地图应用程序的开发人员使用。
快速开始
最简单的入门方法是通过CDN加载geoscene-leaflet插件。以下是一个可以复制/粘贴到自己的.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/[email protected]/dist/leaflet.css"
integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
crossorigin=""
/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script
src="https://unpkg.com/[email protected]/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***/
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 Leaflet
许可
易智瑞信息技术有限公司版权所有 © 2023并保留所有权利。发行于中华人民共和国。
本材料在 GeoScene 主许可协议（MLA）下许可使用，并受该协议条款的约束。 只要遵守主许可协议中的条款并包括此版权声明，您即可在不进行修改的情况下 重新分发和使用这些代码。
查看 https://links.geoscene.cn/legal/GeoScene_EULA.pdf 了解使用限制