zoukankan      html  css  js  c++  java
  • 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>

    效果:

  • 相关阅读:
    一些css
    nginx访问静态资源
    ngixn 基本命令
    vue打包
    java集合-HashMap
    java多线程-线程池
    java多线程-中断线程
    服务端获取nginx代理后的用户真实ip
    nginx学习笔记
    数码视讯宣讲会现场笔试题
  • 原文地址:https://www.cnblogs.com/zhaoyingzhen/p/15187547.html
Copyright © 2011-2022 走看看