|
|
import VectorLayer from "ol/layer/Vector";
|
import VectorSource from "ol/source/Vector";
|
import Feature from "ol/Feature";
|
import Point from "ol/geom/Point";
|
import LineString from "ol/geom/LineString";
|
import {fromExtent } from "ol/geom/Polygon";
|
import { Polygon} from "ol/geom";
|
import { fromLonLat } from "ol/proj";
|
import { Circle, Fill, Icon, Stroke, Style, Text } from 'ol/style.js';
|
|
const mapOL = {
|
removeLayerData(res){
|
var layers = window.map.getAllLayers();
|
for(var i=0;i<layers.length;i++){
|
if(res.id === layers[i].values_.id){
|
window.map.removeLayer(layers[i])
|
}
|
}
|
},
|
addLayerData(res) {
|
var type = res.style.type;
|
if (!type) return
|
this.removeLayerData(res)
|
switch (type) {
|
case 'label':
|
this.addLabellayer(res);
|
break;
|
case 'billboard':
|
this.addBillboardlayer(res);
|
break;
|
case 'polyline':
|
this.addPolylinelayer(res);
|
break;
|
case 'rectangle':
|
this.addRectanglelayer(res);
|
break;
|
case 'polygon':
|
this.addPolygonlayer(res);
|
break;
|
}
|
},
|
CesiumTo84(x, y, z) {
|
var ellipsoid = Viewer.scene.globe.ellipsoid;
|
|
var cartographic = ellipsoid.cartesianToCartographic({ x: x, y: y, z: z });
|
var lat = Cesium.Math.toDegrees(cartographic.latitude);
|
var lng = Cesium.Math.toDegrees(cartographic.longitude);
|
var alt = cartographic.height;
|
return [lng, lat, alt ]
|
},
|
addLabellayer(res) {
|
var style = res.style;
|
var val = this.CesiumTo84(style.position.x, style.position.y, style.position.z)
|
const labelFeature = new Feature({
|
geometry: new Point([val[0], val[1]]),
|
});
|
const labelStyle = new Style({
|
text: new Text({
|
text: style.text,
|
font: style.font,
|
fill: new Fill({
|
color: style.fillColor,
|
}),
|
stroke: new Stroke({
|
color: style.outlineColor,
|
width: style.outlineWidth,
|
}),
|
}),
|
});
|
labelFeature.setStyle([labelStyle])
|
const vectorSource = new VectorSource({
|
features: [labelFeature],
|
});
|
var vectorLayer = new VectorLayer({
|
id: res.id,
|
source: vectorSource,
|
});
|
window.map.addLayer(vectorLayer)
|
},
|
addBillboardlayer(res) {
|
var style = res.style;
|
var val = this.CesiumTo84(style.position.x, style.position.y, style.position.z)
|
const imgFeature = new Feature({
|
geometry: new Point([val[0], val[1]]),
|
});
|
const imgStyle = new Style({
|
image: new Icon({
|
scale: style.scale,
|
src: style.image,
|
}),
|
});
|
imgFeature.setStyle([imgStyle])
|
const vectorSource = new VectorSource({
|
features: [imgFeature],
|
});
|
var vectorLayer = new VectorLayer({
|
id: res.id,
|
source: vectorSource,
|
});
|
window.map.addLayer(vectorLayer)
|
},
|
addPolylinelayer(res) {
|
var style = res.style;
|
var positon = style.positions;
|
var geom = [];
|
for (var i in positon) {
|
var lonlat = positon[i];
|
var val = this.CesiumTo84(lonlat.x, lonlat.y, lonlat.z);
|
geom.push([val[0], val[1]])
|
}
|
const lineFeature = new Feature({
|
geometry: new LineString(geom),
|
name: "Line"
|
});
|
const lineStyle = new Style({
|
|
stroke: new Stroke({
|
color: style.color,
|
width: style.outlineWidth == 0 ? 2 : style.outlineWidth,
|
}),
|
|
});
|
lineFeature.setStyle([lineStyle])
|
const vectorSource = new VectorSource({
|
features: [lineFeature],
|
});
|
var vectorLayer = new VectorLayer({
|
id: res.id,
|
source: vectorSource,
|
});
|
window.map.addLayer(vectorLayer)
|
},
|
addRectanglelayer(res) {
|
var style = res.style;
|
|
var east = Cesium.Math.toDegrees(
|
style.coordinates.east
|
);
|
var north = Cesium.Math.toDegrees(
|
style.coordinates.north
|
);
|
var west = Cesium.Math.toDegrees(
|
style.coordinates.west
|
);
|
var south = Cesium.Math.toDegrees(
|
style.coordinates.south
|
);
|
|
var rectFeature = new Feature({
|
geometry: new fromExtent([east, south, west, north])
|
});
|
const rectStyle = new Style({
|
//填充色
|
fill: new Fill({
|
color: style.color,
|
}),
|
//边线颜色
|
stroke: new Stroke({
|
color: style.outlineColor,
|
width: 1
|
}),
|
});
|
rectFeature.setStyle(rectStyle)
|
const vectorSource = new VectorSource({
|
features: [rectFeature],
|
});
|
var vectorLayer = new VectorLayer({
|
id: res.id,
|
source: vectorSource,
|
});
|
window.map.addLayer(vectorLayer)
|
},
|
addPolygonlayer(res) {
|
var style = res.style;
|
console.log(style)
|
var positon= style.positions;
|
var geom = [];
|
for (var i in positon) {
|
var lonlat = positon[i];
|
var val = this.CesiumTo84(lonlat.x, lonlat.y, lonlat.z);
|
geom.push([val[0], val[1]])
|
}
|
if(geom[0]!= geom[geom.length-1]){
|
geom.push(geom[0])
|
}
|
var std =[];
|
std.push(geom)
|
var rectFeature = new Feature({
|
geometry: new Polygon(std)
|
});
|
|
const rectStyle = new Style({
|
//填充色
|
fill: new Fill({
|
color: style.color,
|
}),
|
//边线颜色
|
stroke: new Stroke({
|
color: style.outlineColor,
|
width: 1
|
}),
|
});
|
rectFeature.setStyle(rectStyle)
|
const vectorSource = new VectorSource({
|
features: [rectFeature],
|
});
|
var vectorLayer = new VectorLayer({
|
id: res.id,
|
source: vectorSource,
|
});
|
window.map.addLayer(vectorLayer)
|
|
},
|
}
|
export default mapOL;
|
