目录
前言
基于supermap leafl的二次开发，涉及几何面的上传，显示，罗列了三种上传方式
一、本地geojson文件
geojson 文件的内容如下：
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
117.15253829956055,
36.67089730689858
],
[
117.14584350585938,
36.658917692387114
],
[
117.16318130493163,
36.64721167063527
],
[
117.17554092407227,
36.65313376288551
],
[
117.18034744262694,
36.66773046368491
],
[
117.17348098754883,
36.677643625245274
],
[
117.15322494506836,
36.692786266889456
],
[
117.13193893432617,
36.68397636535661
],
[
117.15047836303711,
36.68012171607383
],
[
117.15253829956055,
36.67089730689858
]
]
]
}
}
]
}二、三种方式
1.超图官方的实例
实例源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title data-i18n="resources.title_openFile"></title>
<script type="text/javascript" src="../js/include-web.js"></script>
<script type="text/javascript" include="iclient-leaflet-css,xlsx" src="../../dist/leaflet/include-leaflet.js"></script>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<div id="loading">....</div>
<script type="text/javascript">
var map = L.map('map', {
center: [38, 110],
zoom: 5,
});
var host = window.isLocal ? window.server : "https://iserver.supermap.io";
var url = host + '/iserver/services/map-china400/rest/maps/China';
var baseLayers = L.supermap.tiledMapLayer(url).addTo(map);
var layersControl = L.control.layers({"baseLayers": baseLayers}, {}, {"position": 'topleft'}).addTo(map);
var openFileComponents = L.supermap.components.openFile().addTo(map);
//将成功返回的数据加载到地图
openFileComponents.on("openfilesucceeded", function (e) {
var layer = L.geoJSON(e.result).addTo(map);
map.flyToBounds(layer.getBounds());
layersControl.addOverlay(layer, e.layerName);
});
//避免与"源码"控件重叠
openFileComponents.rootContainer.style.margin = "40px 4px 0px 0px";
</script>
</body>
</html>
代码如下（示例）：
<el-upload class="upload-demo"
:auto-upload="false"
:on-change="openFile"
:before-remove="beforeRemove"
multiple
:limit="3"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传geojson文件，且不超过500kb</div>
</el-upload>
openFile(file) {
const self = this;
var reader = new FileReader();
reader.onload = function () {
if (reader.result) {
//打印文件内容
console.log(reader.result);
var layer = L.geoJSON(eval('(' + reader.result + ')')).addTo(self.map);
self.map.flyToBounds(layer.getBounds());
}
};
reader.readAsText(file.raw);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }？`);
},3.基于input file的文件上传
代码如下（示例）：
<input type="file" id="file1" style="display:none" accept=".json,.geojson" @change="fileInfo(getFileContent)">
asdsad(){
document.getElementById("file1").click();
},
fileInfo (callback) {
// 获取input标签选择的文件,并选择第一条
let resultFile = document.getElementById('file1').files[0]
// 如果文件存在
if (resultFile) {
// 获取文件信息
this.file = resultFile
// 获取文件名
this.fileName = resultFile.name
// 使用 FileReader 来读取文件
let reader = new FileReader()
// 读取纯文本文件,且编码格式为 utf-8
reader.readAsText(resultFile, 'UTF-8')
// 读取文件,会触发 onload 异步事件,可使用回调函数 来获取最终的值.
reader.onload = function (e) {
let fileContent = e.target.result
// 若为回调函数,则触发回调事件
if (callback && (typeof callback === 'function')) {
alert(fileContent)
}
}
}
},
getFileContent (fileContent) {
this.fileContent = fileContent
} ,
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
