不久前收到一个需求,说要随机创建约一百个某段江河上的坐标点,用于做一些数据呈现。
我首先是想到用AI直接给我一点数据,没想到给出来的坐标,有许多都落在陆地上,根本不符合我的要求。后来结合AI给出的建议,我用程序计算,得到了一些坐标点。思路如下:
1、在地图上沿江河勾勒出一个封闭的多边形,计算出来的坐标点,将落在该多边形内
2、导出该多边形,用于计算
具体实现如下:
1、勾勒多边形
勾勒多边形的工具,我在谷歌地图上完成。https://www.google.com/maps/d/,
2、计算多边形内的坐标
比如随机算出100个坐标。
我用vue3来完成。代码由chatGPT给出,如下:
<template><div><div v-if="coordinates.length"><h2>生成的坐标:</h2><ul><li v-for="(coord, index) in coordinates" :key="index">{{ coord }}</li></ul></div><div v-else><p>暂无坐标生成</p></div><button @click="generateCoordinates">生成坐标</button></div>
</template><script>
import { ref } from 'vue';
import * as turf from '@turf/turf';export default {setup() {const coordinates = ref([]);const generateCoordinates = () => {//这是勾勒出来的多边形const polygonCoords = [[121.0473533, 31.7894934], [121.026754, 31.7521328], [121.2245079, 31.6469753],[121.3233848, 31.5147756], [121.4950462, 31.4163819], [121.6406151, 31.3472103],[121.6708275, 31.3331352], [121.6941734, 31.377699], [121.545858, 31.4620776],[121.5019127, 31.4843315], [121.5115257, 31.5054093], [121.5678306, 31.4843315],[121.5911766, 31.4609062], [121.6790672, 31.4257572], [121.7230125, 31.4198978],[121.7449852, 31.4714483], [121.6886803, 31.4983839], [121.6062828, 31.5217998],[121.4057823, 31.6118963], [121.2890526, 31.6890526], [121.2217613, 31.7019058],[121.2052818, 31.7439582], [121.1627098, 31.7836568], [121.1242576, 31.7894934],[121.0967918, 31.781322], [121.0473533, 31.7894934]];const polygon = turf.polygon([polygonCoords]);const bbox = turf.bbox(polygon);const points = [];while (points.length < 100) {const randomLng = Math.random() * (bbox[2] - bbox[0]) + bbox[0];const randomLat = Math.random() * (bbox[3] - bbox[1]) + bbox[1];const randomPoint = turf.point([randomLng, randomLat]);if (turf.booleanPointInPolygon(randomPoint, polygon)) {points.push([randomLng, randomLat]);}}coordinates.value = points;};return { coordinates, generateCoordinates };}
}
</script><style>
/* 在这里添加样式 */
</style>