Vue读取解析shapefile本地数据并在地图上演示_Maptalks 地图入门
async selectShpFile() {
//获取上传文件
const shpFile = document.getElementById("uploadFileInput").files[0];
console.log(shpFile)
//将文件转为二进制编码
let fileReader = new FileReader();
fileReader.readAsArrayBuffer(shpFile)
//定义一个变量a作为虚拟dom节点，因为试验数据没有id属性
var a = 1
//文件读取成功
const that = this
fileReader.onload = function () {
//导入shpfile包
let shapefile = require("shapefile");
//读取二进制数据转成geojson
shapefile.read(this.result).then((geojson) => {
console.log(geojson, "转好的数据")
//遍历geojson数据
geojson.features.map((feature) => {
//(feature)
//获取类型
let type = feature.geometry.type
let mapdata = feature.geometry.coordinates
//判断shp数据类型
if (type == "LineString") {
//创建线
const line = new maptalks.LineString(mapdata, {
arrowStyle: null, // arrow-style : now we only have classic
arrowPlacement: 'vertex-last', // arrow's placement: vertex-first, vertex-last, vertex-firstlast, point
visible: true,
editable: true,
cursor: null,
shadowBlur: 0,
shadowColor: 'black',
draggable: false,
dragShadow: false, // display a shadow during dragging
drawOnAxis: null, // force dragging stick on a axis, can be: x, y
symbol: {
'lineColor': 'red',
'lineWidth': 10
}
})
//导入map中
new maptalks.VectorLayer(a++, line).addTo(that.map);
} else if (type == "Polygon") {
const polygon = new maptalks.Polygon(mapdata, {
visible: true,
editable: true,
cursor: 'pointer',
shadowBlur: 0,
shadowColor: 'black',
draggable: false,
dragShadow: false,
drawOnAxis: null,
symbol: {
'lineColor': '#34495e',
'lineWidth': 2,
'polygonFill': 'rgb(135,196,240)',
'polygonOpacity': 0.6
}
})
new maptalks.VectorLayer(a++, polygon).addTo(that.map);
} else if (type == "Point") {
const marker = new maptalks.Marker(mapdata, {
visible: true,
editable: true,
cursor: 'pointer',
shadowBlur: 0,
shadowColor: 'black',
draggable: false,
dragShadow: false,
drawOnAxis: null,
})
new maptalks.VectorLayer(a++, marker).addTo(that.map);
}
})
})
}
}