How to implement dotted lines in uniapp's map component

With the development of society and the advancement of science and technology, more and more application scenarios in our lives begin to require the support of maps. For some developers, in the process of realizing product requirements, the implementation of various functions in the map is particularly critical. The topic we are going to introduce today is about the method of implementing dotted lines in the map component in uniapp.

1. Pre-knowledge

Before understanding the method of realizing dotted lines, we need to first understand the basic knowledge related to canvas:

1. Create canvas: by creating Canvas, we can mount it on the page. The specific implementation code is as follows:

<canvas style="width: 100%; height: 100vh;" canvas-id="canvas" />

2. Get the canvas context: After getting the canvas context, we can perform various drawing operations, such as painting Line, drawing, filling, etc., the specific implementation code is as follows:

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')

3. Drawing dotted lines: The drawing of dotted lines is achieved by drawing discontinuous points on the canvas, the specific implementation code As follows:

ctx.setLineDash([5, 15])
ctx.lineWidth = 2
ctx.strokeStyle = '#000'
ctx.beginPath()
ctx.moveTo(startPoint.x, startPoint.y)
ctx.lineTo(endPoint.x, endPoint.y)
ctx.stroke()

2. Method of realizing dotted line

In uniapp, we can use the officially provided map component to realize the development of map function. So for the need to implement dotted lines in the map, we need to implement it in conjunction with the API in the map. It is mainly divided into the following three steps:

1. Get the geographical coordinate points

To draw a dotted line on the map, you need to obtain the geographical coordinate points (lng, lat) for drawing. In uniapp, we can obtain the longitude and latitude coordinates of the point on the current map through the corresponding event of the map component (such as tap event). The specific implementation code is as follows:

// 监听地图点击事件
onTap(event) {
  const { latitude, longitude } = event.detail
  // 绘制虚线
  // ...
}

One thing to note is that the obtained coordinate point It is the coordinate point after the WGS84 coordinate system has been converted into the GCJ02 or Mars coordinate system, so special attention needs to be paid in actual use.

2. Get the pixel coordinates of the coordinate point on the map

After obtaining the geographical coordinate point, we need to convert it into the pixel coordinate on the map. In uniapp, we can obtain the map attribute information by calling the getMapConfig() method provided by the map component, and then calculate it based on the coordinate points. The specific implementation code is as follows:

// 获取地图信息
const mapConfig = this.$refs['uniMap'].getMapConfig()

// 将地理坐标点转换为像素坐标
const pixelPoint = mapConfig.projection.fromLatLngToPoint(
  new qq.maps.LatLng(latitude, longitude)
)

Things to note One thing is that the obtained pixel coordinates are based on the upper left corner of the map as the origin, with the positive x-axis direction to the right and the positive y-axis direction downward.

3. Draw a dotted line on the map

After obtaining the pixel coordinates, we can call the relevant API of canvas to draw a dotted line. In uniapp, we can obtain the canvas object inside the map component through this.$refs['uniMap'] and perform corresponding operations on it. The specific implementation code is as follows:

// 获取 canvas 对象
const ctx = this.$refs['uniMap'].getContext('2d')

// 绘制虚线
ctx.setLineDash([5, 15])
ctx.lineWidth = 2
ctx.strokeStyle = '#000'
ctx.beginPath()
ctx.moveTo(startPixelPoint.x, startPixelPoint.y)
ctx.lineTo(endPixelPoint.x, endPixelPoint.y)
ctx.stroke()

One thing to note is that calling the canvas API to draw a dotted line needs to be done in the callback function of the corresponding event, otherwise there will be a time difference and the drawing will not be successful.

3. Summary

To sum up, through the above method, we can realize the drawing of dotted lines in the map component in uniapp. It should be noted that in actual projects, we also need to optimize and adjust accordingly according to specific circumstances and business needs to achieve better results.

The above is the detailed content of How to implement dotted lines in uniapp's map component. For more information, please follow other related articles on the PHP Chinese website!