ol地图小方法

原创已于 2024-04-28 13:57:31 修改 · 187 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2024-04-28 10:51:27 首次发布

openlayers 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了在OpenLayers(ol)中处理地理坐标转换的方法，包括使用`transform`函数在不同投影间转换，如从EPSG:4326到EPSG:3857。同时，讨论了如何使用`newGeoJSON`和`Overlay`组件来调整弹窗的默认位置，实现更美观的显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

起因是ol原生的位置转换使用起来有误差，自己手搓一个

   // 定义一个函数来计算两点之间的直线距离
        calculateDistance(point1, point2) {
            const deltaX = point2[0] - point1[0]; // 计算横向距离差
            const deltaY = point2[1] - point1[1]; // 计算纵向距离差
            const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY); // 应用欧几里得距离公式
            return distance;
        },

数据编码格式转换

import { transform, get } from "ol/proj";
//坐标，源投影，目标投影
transform(coordinate, 'EPSG:4326', 'EPSG:3857')
//坐标，源投影，目标投影
transform(coordinate, 'EPSG:4326', 'EPSG:3857')
//如果是 geoJSON数据格式转换，则MultiPolygon和Polygon方法可以直接点出transform方法直接转换。
geometry: new MultiPolygon(
    lineData.geometry.coordinates
).transform("EPSG:4326", "EPSG:3857")
//或者
geometry: new Polygon(
	lineData.geometry.coordinates
).transform("EPSG:4326", "EPSG:3857")



//使用 new GeoJSON().readFeatures方法时，默认的是4326编码，如果想转换编码格式的话加一个参数
 const fts = new GeoJSON().readFeatures(data, {
                dataProjection: 'EPSG:4326',
                featureProjection: 'EPSG:3857',
            });

设置弹窗偏移，默认的弹窗是左上角出现在我们的点击位置，不太美观需要相对调整一下

  import { Overlay} from 'ol';

const popupOverlay = new Overlay({
                element: document.getElementById("contextmenu"),
                positioning: 'bottom-center',
                stopEvent: false,
                visible: false,
                offset: [-150, -200], // 弹窗位置的偏移量，向上偏移 200 像素，向右150
            });

持续更新