Table of contents
Tips: If you think it is cumbersome, just look at the colored text!
1. Problems
1. Use mapBox to draw points, lines, and surfaces on the map. When drawing a polygon, I found that using zh (a company that provides a map engine) directly, the method of drawing a polygon cannot set the border color and border width. It's outrageous. Why can't they achieve something that can be achieved with simple CSS? Moreover, fengMap is achievable.
Two, the solution
1.mapbox-gl-draw: Download link https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js
2. Method 1 : After drawing the polygon, draw a closed line segment outside the polygon. So I wrote the following code:
1) The code is as follows:
//线覆盖物基础参数
export const LineCoverConfig = {
id: 'line',
type: 'line',
source: 'lineSource',
paint: {
'line-color': '#28e990',
'line-width': 9,
}
}
//多边形覆盖物样式
export const PolygonStyle = {
color: '#ff5c2e',
opacity: 0.5,
height: 1,
}
//2)外边线样式(无法优化)
export const PolygonLineStyle = {
id: 'polygonLine',
type: 'line',
source: 'polygonLineSource',
paint: {
'line-color': '#ff5c2e',
'line-width': 2
}
}
//根据坐标点添加线覆盖物 config:线覆盖物配置项
addMark_line(pointArr, config, dataInfo) {
const that = Locpard.instance;
if (that && that.map) {
let linePoint = []
let option = Object.assign({}, LineCoverConfig, config);
console.log("addMark_line", option, option.source, config)
if (Array.isArray(pointArr)) {
pointArr.forEach((element) => {
linePoint.push([element.y, element.x])
})
option.floor = pointArr[0]?.floor;
}
// that.map.drawLine( dataInfo.id, linePoint, option);
this.drawLine(linePoint, option, dataInfo)
const lineMarker = {
id: option.id,
source: option.source,
type: 'layerLine'
}
return lineMarker;
}
}
// 根据点集绘制 线段
drawLine(pointArr, option, dataInfo) {
const that = Locpard.instance;
if (that) {
that.map.map.addSource(option.source, {
type: 'geojson',
data: {
type: 'Feature',
properties: {
data: dataInfo
},
geometry: {
type: 'LineString',
coordinates: pointArr,
}
}
})
that.map.map.addLayer(option)
}
}
// 添加多边形
addMark_polygon(option, dataInfo) {
const that = Locpard.instance;
if (that && that.map) {
let pointArr = option.points.map((element) => {
return [element.y, element.x]
})
let config = Object.assign({}, PolygonStyle, { ...option, floor: option.level })
console.log("points", pointArr)
let markerId = dataInfo.id.toString()
//使用 zh 提供的api
that.map.drawPolygon(markerId, pointArr, config)
//手动 添加外边框
that.addMark_line(option.points, { ...PolygonLineStyle, id: markerId, source: markerId }, dataInfo)
return {
id: markerId,
source: markerId,
type: "polygon"
}
}
}2) The effect is as follows:
3. Method 2 : I always feel that there is a problem with method 1. Isn’t it better to render at one time ? Why do I have to render two layers, so I went to mapBox to find the API for drawing polygons, and encapsulated a method for drawing polygons myself .
1) The code is as follows:
//多边形覆盖物样式
export const PolygonStyle_2={
id:'polygon',
type:'fill',
source:'polygonSource',
layout:{},
paint:{
'fill-color':'#ff5c2e',
'fill-opacity':0.5,
'fill-outline-color':'#ff5c2e',
}
}
// can't set border-width
addMark_polygon(option, dataInfo) {
const that = Locpard.instance;
if (that && that.map) {
let pointArr = option.points.map((element) => {
return [element.y, element.x]
})
option=Object.assign({},PolygonStyle_2,option)
//that.map是 zh 封装的地图对象; that.map.map是 mapBox封装的地图对象
that.map.map.addSource(option.source,{
type:'geojson',
data:{
type:'Feature',
geometry:{
type:'Polygon',
coordinates:[pointArr]
}
}
})
that.map.map.addLayer(option)
return {
id:dataInfo.id.toString(),
soureId:option.source,
type: "polygon"
}
}
}
2) The effect is as follows: Although you can use fill-outline-color to add a border, you can see the border if you look carefully, but you cannot set the width of the border.
Tried fill-outline-width, and reported an error, there is no such property. I searched gitHub and said: There is no property to set the border width, because WebGL does not support it (it will affect the rendering speed)
3. Summary
1. So if your requirement is to set the border color and border width , you can only draw two layers: a filled polygon, and a line coverage layer outside (that is, method 1: the that.map .drawPolygon(markerId, pointArr, config)==The method provided by the third-party manufacturer can be replaced by the method in method 2)
2. If you just add the border color, both method 1 and method 2 are fine .
3. I don’t understand. Isn’t fengMap implemented with WebGL? Why can it directly set the border width? If anyone knows, please comment.
/*
Hope it helps you!
If there is any mistake, welcome to correct me, thank you very much!
*/