3.0.13 • Published 8 months ago
@geoscene/leaflet v3.0.13
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/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***/
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）下许可使用，并受该协议条款的约束。 只要遵守主许可协议中的条款并包括此版权声明，您即可在不进行修改的情况下 重新分发和使用这些代码。