openlayers學習之-----把坐標點改為WKT格式的數據

什么是WKT？

WKT(Well-known text)是一種文本標記語言，用於表示矢量幾何對象、空間參照系統及空間參照系統之間的轉換。

需求是：input輸入這種格式坐標-------“116.421516,39.958751”

　　　　給后台傳WKT格式的數據

 

在此之前先安裝openlayers，別忘了：cnpm install ol

代碼：

<template>
    <div>
        <h5>坐標點=>WKT格式：</h5>
        <el-input v-model="inputValue" @change="pointToWKT"></el-input>
        <span>{{inputValueWKT}}</span>
    </div>
</template>

<script>
    import {
        WKT
    } from "ol/format";
    import {
        Point as GeomPoint,
    } from "ol/geom";
    import {
        transform as ProjTransform
    } from "ol/proj";
    export default {
        data() {
            this.format = new WKT();
            return {
                inputValue: '',
                inputValueWKT:''
            }
        },
        mounted() {

        },
        methods: {
            pointToWKT(point) {
                point = point.split(",")
                point = point.map(item => {
                    return Number(item);
                });
                point = ProjTransform(point, "EPSG:4326", "EPSG:3857");
                point = new GeomPoint(point)
                point = this.format.writeGeometry(point, {
                    dataProjection: "EPSG:4326",
                    featureProjection: "EPSG:3857"
                });
                this.inputValueWKT = point
            }
        }
    }
</script>

<style scoped>

</style>

 

效果：