Vue读取解析shapefile本地数据并在地图上演示_Maptalks 地图入门

AimerGIS

已于 2022-10-27 09:51:27 修改

阅读量2.1k

点赞数 1

分类专栏： Maptalks 文章标签：前端 javascript 开发语言开源 webgl

于 2022-10-26 14:44:59 首次发布

本文链接：https://blog.csdn.net/weixin_45390762/article/details/127531717

版权

Maptalks 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

maptalks简介

Maptalks是一个开源的脚本库，用于创建集成的2D / 3D地图，其中包含用于制图项目的基本功能。

Shapefile

整体思路就是获取到shp文件，利用FileReader将shp转为二进制文件，再利用shapefile将二进制转为geojson数据。

安装

maptalks下载

引入在线链接

<link href="path/to/maptalks.css" rel="stylesheet" type="text/css" />
<script src="path/to/maptalks.min.js" type="text/javascript"></script>

npm引入

npm install maptalks --save

使用

使用ES6语法引入

import * as maptalks from 'maptalks';

shapeFile下载

npm i shapefile

使用

使用node引入使用

let shpfile = require('shapefile')

代码片段

<input type="file" id="uploadFileInput" name="zip" @change="selectShpFile()" />

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) => {
                        //console.log(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);
                        }
                    })
                })
            }
        }