第一步:下载对应的openlayers.
import { Circle as CircleFeature } from "ol/geom";
import Feature from "ol/Feature";
var FenceSource = null;
FenceSource = new Vector({
wrapX: false,
});
FenceLayer.value = new VectorLayer({
source: FenceSource,
zIndex: 1,
style: function (feature) {
return FenceStyle(feature, "255, 0, 0");
},
});
function FenceStyle(f, r) {
let fillColor, frameColor;
if (f.get("fillColor") == undefined || f.get("fillColor") == "null") {
fillColor = "rgba(" + r + ",0.1)";
} else {
fillColor = f.get("fillColor");
}
if (f.get("frameColor") == undefined || f.get("frameColor") == "null") {
frameColor = "rgb(" + r + ")";
} else {
frameColor = f.get("frameColor");
}
return [
new Style({
fill: new Fill({
color: fillColor,
}),
stroke: new Stroke({
lineDash: [1, 2, 3, 4, 5, 6],
color: frameColor,
width: 2,
}),
}),
];
}
initCircleFence(row) {
let leaveFence = {
geometry: {
coordinates: [],
type: "Polygon",
},
id: row.fenceInfo.idx,
mark: row.fenceInfo.mark,
properties: {
fencetype: row.fenceInfo.fenceType,
id: row.fenceInfo.idx,
layerId: row.fenceInfo.layerId,
name: row.fenceInfo.fenceName,
fillColor: "rgba(128,128,128,0.1)",
frameColor: "rgba(128,128,128,1)",
type: "Fence",
},
type: "Feature",
};
const geometryData = leaveFence;
const circleFeature = new Feature({
geometry: new CircleFeature(
_TransPixel(geometryData.geometry.coordinates[0][0]),
this.drp * geometryData.geometry.coordinates[0][1]
),
});
circleFeature.setId(geometryData.id);
circleFeature.properties = geometryData.properties;
circleFeature.coorRadiu = geometryData.geometry.coordinates[0][1];
circleFeature.dotOrigin = geometryData.geometry.coordinates[0][0];
circleFeature.set("name", geometryData.properties.name);
circleFeature.set("fillColor", geometryData.properties.fillColor);
circleFeature.set("frameColor", geometryData.properties.frameColor);
FenceSource.addFeature(circleFeature);
},
最后的实现效果: