JS如何在高德地图多边形覆盖物填充平行折线的算法

需求：在多边形覆盖物中填充折线

实现

第一步: 用JS封装一个对象或者采用ES6的Class写法，并将地图经纬度转成坐标点

class ScanFill {allPoints = [] // 存多边形的经纬度数据map = null // 地图实例angel = 45 // 线的度数 180 45 90strokeStyle = 'solid' // dashed 折线的样式strokeColor = "#fff" // 折线的颜色interval = 10 // 平行折线之间间隔pxconstructor() {this.watch() // 赋值后就画}watch(obj) {Object.defineProperty(this, 'allPoints', {get: () => {return []},set: value => {this.lnglatToPixel(value)}})}/** 地图经纬度转成坐标 */lnglatToPixel(points) {const pixel = points.map(it => {const lnglat = new AMap.LngLat(it.lng, it.lat)const pixel = this.mapInstance.lngLatToContainer(lnglat)const x = pixel.xconst y = pixel.yreturn { x, y }})this.findPoints(pixel, points) }
}

第二步: 利用两个点之间建立一条直线，与所设定的直线算出相交的点

/** 算出所有边的函数 */
calc_side_Function(pointsPixel) {const length = pointsPixel.lengthconst coefficient = []for (let i = 0; i < length; i++) {const x2 = pointsPixel[(i + 1) % length].xconst y2 = pointsPixel[(i + 1) % length].yconst x1 = pointsPixel[i].xconst y1 = pointsPixel[i].yconst a = (x2 - x1) ? (y2 - y1) / (x2 - x1) : 0const b = (x1 - x2) ? (y2 * x1 - y1 * x2) / (x1 - x2) : 0coefficient.push({ a, b, x: x1 })}return coefficient // 每条边都是一元一次方程，存放一元一次方程的的a,b, y = a * x + b
}
/***  以45度角度的线为填充线，则它的公式是 y = x + b, 所以他的范围取决于 b = y - x, *  将多边形的路径以b排序分别获得填充的最大的值和最小的值*/
scanLine(pointsPixel) {const angel = this.angelif (angel === 45) {return pointsPixel.map(it => it.y - it.x).sort((a, b) => a - b)}if (angel === 180) {return pointsPixel.map(it => it.y).sort((a, b) => a - b)}if (angel === -45) {return pointsPixel.map(it => it.y + it.x).sort((a, b) => a - b)}
}
/** 根据两条线的系数算出所有相交的点 */
equation(a, b, i, xs) {let x = 0let y = 0const angel = this.angelif (angel === 45) {x = (b - i) / (1 - a)y = x + i}if (angel === 180) {x = a ? (i - b) / a : 0y = i}if (angel === -45) {x = (1 + a) ? (i - b) / (1 + a) : 0if (a === 0 && b === 0) {x = xs}y = i - x}return { x, y }
}
/** 找出相交的点 */
findPoints(pointsPixel, points) {const interval = this.intervalconst sortPixel = this.scanLine(pointsPixel)const min = Math.floor(sortPixel[0])const max = Math.ceil(sortPixel[sortPixel.length - 1])const coefficient = this.calc_side_Function(pointsPixel)const intersection_point = []const ring = points.map(it => {return new AMap.LngLat(it.lng, it.lat)})for (let i = min; i <= max; i += interval) {let arr = coefficient.map(it => {const coordinate = this.equation(it.a, it.b, i, it.x)const pixel = new AMap.Pixel(coordinate.x, coordinate.y)return this.mapInstance.containerToLngLat(pixel)})arr = arr.filter(it => {return AMap.GeometryUtil.isPointOnRing(it, ring) // 这里在去除一下不在边上的点})let filterArr = []for (let i = 0; i < arr.length - 1; i++) {filterArr.push(arr.slice(i, i + 2)) // 这里把所有点分成多个线段}if (filterArr.length !== 0) {filterArr.forEach((it) => {const lnglat0 = new AMap.LngLat(it[0].lng, it[0].lat)const pixel0 = this.mapInstance.lngLatToContainer(lnglat0)const x0 = pixel0.xconst y0 = pixel0.yconst lnglat1 = new AMap.LngLat(it[1].lng, it[1].lat)const pixel1 = this.mapInstance.lngLatToContainer(lnglat1)const x1 = pixel1.xconst y1 = pixel1.yconst centerX1 = (x1 + x0) / 2const centerY1 = (y1 + y0) / 2const centerX2 = (x1 + centerX1) / 2const centerY2 = (y1 + centerY1) / 2const pixelc1 = new AMap.Pixel(centerX1, centerY1)const lnglatc1 = this.mapInstance.containerToLngLat(pixelc1)const pixelc2 = new AMap.Pixel(centerX2, centerY2)const lnglatc2 = this.mapInstance.containerToLngLat(pixelc2)// 判断线段的中心点和线段中心的中心点是否在地块中，不在就去掉if (AMap.GeometryUtil.isPointInRing(lnglatc1, ring) && AMap.GeometryUtil.isPointInRing(lnglatc2, ring)) {intersection_point.push(it) }})}filterArr = []arr = []}this.draw(intersection_point)
}

第三步: 用高德地图的API画出这些即可

/** 构建折线 */
draw(polylinePoints) {polylinePoints.forEach((it, index) => {const polyLineOption = {strokeColor: this.strokeColor,strokeWeight: 2,borderWeight: 0,strokeStyle: this.strokeStyle,path: it,bubble: false,extData: this.polylineName}const polyLine = new AMap.Polyline(polyLineOption)this.map.add(polyLine)})
}

第四步: 调用顺序及其使用

/** 计算向内扩展点坐标 */
this.scanFill.map = this.map // 你创建的高德地图实例
this.scanFill.allPoints = path // 多边形的路径经纬度

JS如何在高德地图多边形覆盖物填充平行折线的算法相关推荐

高德地图多边形覆盖物等间距缩小或者放大算法
需求: 高德地图多边形覆盖物等间距缩小,效果如下原理可参考:https://blog.csdn.net/weixin_38169413/article/details/101161891 实现第一 ...
高德地图多边形覆盖物添加、获取、删除
最近在做有关地图的项目汇总一下方便以后使用不喜勿喷上图是覆盖物绘制完成之后的编辑状态引入高德地图js <script src="https://webapi.amap.com ...
android 高德地图删除多边形,高德地图多边形覆盖物添加、获取、删除
最近在做有关地图的项目汇总一下方便以后使用上图是覆盖物绘制完成之后的编辑状态引入高德地图js P.s. plugin后跟的是地图插件 1.覆盖物绘制 map.plugin(["AMa ...
JS 如何调用高德地图
最近配合后台做管理系统,需要前端用原生html页面嵌入到后台,于是乎...记录下原生JS怎么使用高德地图吧一.获取高德地图的key 获取地址:高德开放平台https://lbs.amap.com/ ...
js添加多marker 高德地图_覆盖物-参考手册-地图 JS API | 高德地图API
覆盖物覆盖物是指叠加在地图底图之上的一些常见要素,包括 Marker类点标记. 构造函数说明 AMap.Marker( 构造一个点标记对象,通过MarkerOptions设置点标记对象的属性 M ...
Android高德地图绘制区域,Android高德地图多边形的绘制与编辑
最近项目中用到了一个高德地图画地块的功能,差了一下api,发现只有js有相关的方法,所以仿照js的交互方式做了一个android版的多边形绘制与编辑. 先不说,上一张效果图完成效果图 1.通过观察, ...
vue使用高德地图画电子围栏_Vue.js 中使用高德地图定位及渲染地图
看了github上面有集成的高德地图组件,但由于项目所要用到的不多,所以决定跟着文档写一写.运行环境是vue-cli webpack 引入高德地图一般用使用vue-cli webpack最简单粗暴的 ...
html 高德地图坐标,点标记-调起高德地图-示例中心-JS API 示例 | 高德地图API
点标记 html,body,#container{ height:100%; } 手机扫码打开示例 var map = new AMap.Map("container", { zo ...
vue 高德地图矢量覆盖物绘制多边形线面绘制 1.0
效果图如下: <template><div class="container"><div id="container">&l ...

JS如何在高德地图多边形覆盖物填充平行折线的算法

需求：在多边形覆盖物中填充折线

实现

JS如何在高德地图多边形覆盖物填充平行折线的算法相关推荐

最新文章

热门文章