一个快速加载面和多面数据的html测试页面（可以导出geojson数据文件）

两点王爷2026-07-22 14:06

背景：可以快速的加载出面和多面的地理数据信息，在测试的时候，有时候需要知道数据具体在那一块，然后进行一些相关内容的判断时候可以用，具体如下：

效果如下：

代码具体如下：

html 复制代码 
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>
GIS 调试平台
</title>
<link 
rel="stylesheet"
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
/>
<link 
rel="stylesheet"
href="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.css"
/>
<style>
html,body{
    margin:0;
    padding:0;
}
#map{
    width:100%;
    height:100vh;
}
.panel{
    position:absolute;
    top:10px;
    left:10px;
    width:460px;
    z-index:9999;
    background:white;
    padding:12px;
    border-radius:8px;
    box-shadow:
    0 2px 10px rgba(0,0,0,.3);
}
textarea{
    width:100%;
    height:140px;
    font-size:12px;
}
button{
    margin:4px;
}
.title{
    font-size:18px;
    font-weight:bold;
}
.small{
    color:#666;
    font-size:12px;
}
</style>
</head>
<body>
    <div id="map"></div>
    <div class="panel">
        <div class="title">
GIS 调试平台
        </div>
        <div class="small">
支持 Point / LineString / Polygon / MultiPolygon
        </div>
<textarea id="input">
MULTIPOLYGON (
(
(127.8463 46.3968,
127.8459 46.3874,
127.8445 46.3781,
127.8463 46.3968)
),
(
(127.83 46.39,
127.82 46.38,
127.81 46.39,
127.83 46.39)
)
)
</textarea>
<br>
<button onclick="loadData()">
加载WKT
</button>
<button onclick="clearAll()">
清空
</button>
<button onclick="exportGeoJSON()">
导出GeoJSON
</button>
<textarea id="output"></textarea>
    </div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.js"></script>
<script>
/**
 * 初始化地图
 */
const map =
L.map('map')
.setView(
    [30,120],
    5
);
/**
 * ArcGIS影像
 */
L.tileLayer(
'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
{
    maxZoom:19
}
).addTo(map);
/**
 * 数据图层
 */
const drawnItems =
new L.FeatureGroup();
map.addLayer(drawnItems);
/**
 * 绘制工具
 */
const drawControl =
new L.Control.Draw({
edit:{
featureGroup:drawnItems
},
draw:{
polygon:true,
polyline:true,
marker:true,
rectangle:true,
circle:false,
circlemarker:false
}
});
map.addControl(drawControl);
/**
 * 绘制完成
 */
map.on(
L.Draw.Event.CREATED,
function(e){
drawnItems.addLayer(e.layer);
syncOutput();
});
map.on(
"draw:edited",
syncOutput
);
map.on(
"draw:deleted",
syncOutput
);
/**
 * 坐标解析
 */
function parseLine(str){
return str
.trim()
.split(",")
.map(item=>{
let arr =
item
.trim()
.split(/\s+/)
.map(Number);
return [
arr[1],
arr[0]
];
});
}
/**
 * POINT
 */
function loadPoint(wkt){
let body =
wkt
.replace(/^POINT\s*/i,'')
.replace(/[()]/g,'');
let arr =
body
.trim()
.split(/\s+/)
.map(Number);
let marker =
L.marker(
[
arr[1],
arr[0]
]
);
drawnItems.addLayer(marker);
map.setView(
[
arr[1],
arr[0]
],
14
);
}
/**
 * LINESTRING
 */
function loadLine(wkt){
let body =
wkt
.replace(/^LINESTRING\s*/i,'')
.replace(/[()]/g,'');
let line =
L.polyline(
parseLine(body),
{
color:'red',
weight:3
}
);
drawnItems.addLayer(line);
map.fitBounds(
line.getBounds()
);
}
/**
 * POLYGON
 */
function loadPolygon(wkt){
let body =
wkt
.replace(/^POLYGON\s*/i,'')
.replace(/\(\(/,'')
.replace(/\)\)/,'');
let polygon =
L.polygon(
parseLine(body),
{
color:'blue',
fillOpacity:.3
}
);
drawnItems.addLayer(polygon);
map.fitBounds(
polygon.getBounds()
);
}
/**
 * MULTIPOLYGON解析
 */
function extractMultiPolygons(str){
let result=[];
let depth=0;
let current="";
let polys=[];
for(let c of str){
if(c==='('){
depth++;
if(depth===3)
continue;
}
if(c===')'){
depth--;
if(depth===2){
polys.push(current);
current="";
continue;
}
}
if(depth>=3){
current+=c;
}
}
return polys.map(p=>{
return [
p.replace(/\(|\)/g,'')
];
});
}
function loadMultiPolygon(wkt){
let body =
wkt
.replace(/^MULTIPOLYGON\s*/i,'')
.trim();
let polygons =
extractMultiPolygons(body);
let layers=[];
polygons.forEach(p=>{
let polygon =
L.polygon(
parseLine(p[0]),
{
color:'green',
fillOpacity:.3
}
);
drawnItems.addLayer(polygon);
layers.push(polygon);
});
if(layers.length){
map.fitBounds(
L.featureGroup(layers)
.getBounds()
);
}
}
/**
 * 主加载入口
 */
function loadData(){
let wkt =
document
.getElementById("input")
.value
.trim();
drawnItems.clearLayers();
let type =
wkt
.split(/\s|\(/)[0]
.toUpperCase();
try{
switch(type){
case "POINT":
loadPoint(wkt);
break;
case "LINESTRING":
loadLine(wkt);
break;
case "POLYGON":
loadPolygon(wkt);
break;
case "MULTIPOLYGON":
loadMultiPolygon(wkt);
break;
default:
alert(
"暂不支持:"+type
);
}
syncOutput();
}catch(e){
console.error(e);
alert(
"解析失败:"+e.message
);
}
}
/**
 * 输出GeoJSON
 */
function syncOutput(){
let json =
drawnItems.toGeoJSON();
document
.getElementById("output")
.value =
JSON.stringify(
json,
null,
2
);
}
/**
 * 导出文件
 */
function exportGeoJSON(){
let data =
JSON.stringify(
drawnItems.toGeoJSON(),
null,
2
);
let blob =
new Blob(
[data],
{
type:"application/json"
}
);
let url =
URL.createObjectURL(blob);
let a =
document.createElement("a");
a.href=url;
a.download=
"gis-data.geojson";
a.click();
URL.revokeObjectURL(url);
}
function clearAll(){
drawnItems.clearLayers();
syncOutput();
}
</script>
</body>
</html>

导出手绘GEOJSON数据文件，测试页面：

代码如下：

html 复制代码 
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>GIS 编辑器 v3</title>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
<link rel="stylesheet" href="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.css"/>

<style>
body { margin:0; font-family: Arial; }
#map { height: 100vh; }

.panel {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 420px;
  z-index: 9999;
  background: #fff;
  padding: 10px;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
}

button {
  margin: 4px 4px 4px 0;
}

textarea {
  width: 100%;
  height: 120px;
  font-size: 12px;
}
</style>
</head>

<body>

<div id="map"></div>

<div class="panel">
  <b>GIS 编辑器 点、线、面</b>

  <div>
    <button onclick="exportGeoJSON()">📥 导出GeoJSON</button>
    <button onclick="clearAll()">🧹 清空</button>
  </div>

  <div style="margin-top:8px;">
    <b>GeoJSON 输出</b>
    <textarea id="output"></textarea>
  </div>
</div>

<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.js"></script>

<script>

/* =========================
   1. 初始化地图
========================= */
const map = L.map('map').setView([30, 120], 5);

L.tileLayer(
  'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
  { maxZoom: 19 }
).addTo(map);

/* =========================
   2. 图层管理
========================= */
const drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

/* =========================
   3. 绘制工具（核心）
========================= */
const drawControl = new L.Control.Draw({
  position: 'topright',
  edit: {
    featureGroup: drawnItems,
    remove: true
  },
  draw: {
    polygon: {
      allowIntersection: false,
      showArea: true
    },
    polyline: true,
    rectangle: true,
    marker: true,
    circle: false,
    circlemarker: false
  }
});

map.addControl(drawControl);

/* =========================
   4. 绘制完成事件
========================= */
map.on(L.Draw.Event.CREATED, function (event) {
  const layer = event.layer;

  drawnItems.addLayer(layer);

  syncOutput();
});

map.on('draw:edited', syncOutput);
map.on('draw:deleted', syncOutput);

/* =========================
   5. GeoJSON 输出同步
========================= */
function syncOutput(){
  const geojson = drawnItems.toGeoJSON();

  document.getElementById("output").value =
    JSON.stringify(geojson, null, 2);
}

/* =========================
   6. 导出 GeoJSON 文件
========================= */
function exportGeoJSON(){

  const data = drawnItems.toGeoJSON();

  const blob = new Blob(
    [JSON.stringify(data, null, 2)],
    { type: "application/json" }
  );

  const url = URL.createObjectURL(blob);

  const a = document.createElement("a");
  a.href = url;
  a.download = "gis-draw.geojson";
  a.click();

  URL.revokeObjectURL(url);
}

/* =========================
   7. 清空
========================= */
function clearAll(){
  drawnItems.clearLayers();
  syncOutput();
}

/* =========================
   8. 初始化输出
========================= */
syncOutput();

</script>

</body>
</html>

好了，至此就可以实现快速加载点线面数据和导出数据文件了！

加载GEOJSON文件数据内容

html 复制代码 
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>WebGIS Editor 加载GeoJSON文件</title>
<link rel="stylesheet"
 href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<link rel="stylesheet"
 href="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.css">
<style>
html,body{
    margin:0;
    height:100%;
}
#map{
    width:100%;
    height:100%;
}
.panel{
    position:absolute;
    top:10px;
    left:10px;
    width:380px;
    background:white;
    padding:12px;
    z-index:9999;
    border-radius:8px;
    box-shadow:
    0 2px 10px rgba(0,0,0,.25);
}
button{
    margin:4px;
}
textarea{
    width:100%;
    height:120px;
}
</style>
</head>
<body>
    <div id="map"></div>
    <div class="panel">
        <h3>
 WebGIS 编辑器 v4
        </h3>
<input 
 type="file"
 id="fileInput"
 accept=".geojson,.json"
/>
<br>
<button onclick="loadFile()">
📂 加载GeoJSON
</button>
<button onclick="exportGeoJSON()">
📥 导出GeoJSON
</button>
<button onclick="clearLayer()">
🧹 清空
</button>
        <hr>
<b>
当前GeoJSON
</b>
<textarea id="output"></textarea>
        </div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.js"></script>
<script>
/***********************************
 * 1. 初始化地图
 ***********************************/
const map =
L.map('map')
.setView(
    [30,120],
    5
);
L.tileLayer(
'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
{
    maxZoom:19
})
.addTo(map);
/***********************************
 * 2. 图层管理
 ***********************************/
const drawnItems =
new L.FeatureGroup();
map.addLayer(
    drawnItems
);
/***********************************
 * 3. 绘制工具
 ***********************************/
const drawControl =
new L.Control.Draw({
    edit:{
        featureGroup:drawnItems
    },
    draw:{
        marker:true,
        polyline:true,
        polygon:{
            allowIntersection:false,
            showArea:true
        },
        rectangle:true,
        circle:false,
        circlemarker:false
    }
});
map.addControl(drawControl);
/***********************************
 * 4. 手绘完成
 ***********************************/
map.on(
L.Draw.Event.CREATED,
function(e){
    let layer=e.layer;
    drawnItems.addLayer(layer);
    syncGeoJSON();
}
);
map.on(
"draw:edited",
syncGeoJSON
);
map.on(
"draw:deleted",
syncGeoJSON
);
/***********************************
 * 5. 加载GeoJSON文件
 ***********************************/
function loadFile(){
const file =
document
.getElementById("fileInput")
.files[0];
if(!file){
alert(
"请选择geojson文件"
);
return;
}
const reader =
new FileReader();
reader.onload=function(e){
try{
let json =
JSON.parse(
e.target.result
);
let layer =
L.geoJSON(
json,
{
style:function(){
return {
color:"#3388ff",
weight:2,
fillOpacity:0.3
}
},
pointToLayer:function(
feature,
latlng
){
return L.marker(latlng);
},
onEachFeature:function(
feature,
layer
){
// 保存属性
layer.feature =
feature;
}
}
);
layer.eachLayer(
function(l){
drawnItems.addLayer(l);
}
);
map.fitBounds(
layer.getBounds()
);
syncGeoJSON();
}
catch(err){
alert(
"GeoJSON解析失败"
);
console.error(err);
}
};
reader.readAsText(file);
}
/***********************************
 * 6. 输出GeoJSON
 ***********************************/
function syncGeoJSON(){
let json =
drawnItems.toGeoJSON();
document
.getElementById("output")
.value =
JSON.stringify(
json,
null,
2
);
}
/***********************************
 * 7. 导出GeoJSON
 ***********************************/
function exportGeoJSON(){
let data =
drawnItems.toGeoJSON();
let blob =
new Blob(
[
JSON.stringify(
data,
null,
2
)
],
{
type:
'application/json'
}
);
let url =
URL.createObjectURL(blob);
let a =
document.createElement("a");
a.href=url;
a.download=
"export.geojson";
a.click();
URL.revokeObjectURL(url);
}
/***********************************
 * 8. 清空
 ***********************************/
function clearLayer(){
drawnItems.clearLayers();
syncGeoJSON();
}
syncGeoJSON();
</script>
    </body>
</html>
相关推荐
热爱前端的小张1 小时前
第四章 接口和类型兼容性
前端
hunterandroid1 小时前
[鸿蒙从零到一] HarmonyOS 资源管理与多语言适配实战
前端
用户69371750013841 小时前
Claude Code终端日志Token占用实测：一个过滤器砍掉60%-90%
android·前端·后端
无人生还1 小时前
第 1 篇：从 Vue3 到 React 的思维转变
前端·vue.js·react.js
爱分享的程序猿-Clark2 小时前
【前端分享】vue开发项目，如何实现 从A页面跳转到B页面,并传值！
前端·javascript·vue.js
YouGIS顽石工坊2 小时前
Python GDAL实战：ASTER GDEM V003全国DEM高程数据处理（1123幅分幅合并→34省裁切，30m精度）
gis·遥感·dem·数据处理·空间数据库·数字高程模型·aster gdem
breeze jiang2 小时前
从原生事件到 React 组件化：用状态驱动模型加载进度 UI
前端·react.js·ui
徐小夕2 小时前
花了3天，我写了一款开源AI公众号编辑器
前端·vue.js·github
PBitW2 小时前
git 中容易遗忘的点 （二） ⚡⚡⚡
前端·git·面试
热门推荐
012026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片02GitHub 镜像站点03如何新建文件夹？ 电脑新建文件夹的4种方法04AI科技热点日报 | 2026年07月01日05幻兽帕鲁 - 服务器管理员权限与 GM 命令完全指南06国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）07AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路082026 年 AI 大模型 & AI 编程工具实战全总结092026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？102026年AI技术突破与产业落地全景：从GPT-5到多模态智能体的新纪元