ThinkGeo.com    |     Blog    |     Wiki    |     Support

Blink Feature in client side

Hi,

We have received Blink feature client side code from our management which you have sent.

And we applied same concept/code in our application and we achieved the result. Thanks for it. But one problem is there.

We are actually displaying Flights instead of points. Each flight will have direction. We applied the direction also but we are unable to get it. Please help me on this.

Here is my sample code

var olMap;
var OnMapCreated = function (map) {
olMap = map;
posLayer = new OpenLayers.Layer.Vector();
posLayer.style = {
label: “B”,
fontColor: “red”,
fontSize: “50px”,
fontFamily: “Aircraft_b”,
rotation: “45”
};

olMap.addLayer(posLayer);
blinkPosAircrafts(featuresWkts2);
}
}

//This method we are calling in server n passing data. For example value is - “[“POINT(-11525515.5572741 2873506.51320092)_20.6463623046875_255,255,168,64”]”
function setPosData(featuresWkts) {
featuresWkts2 = featuresWkts;
}

function blinkPosAircrafts(featuresWkts) {
if (featuresWkts != undefined) {
let wktArray = JSON.parse(featuresWkts);
let wktReader = new OpenLayers.Format.WKT();
posLayer.removeAllFeatures();
for (let i = 0; i < wktArray.length; i++) {
let feature = wktReader.read(wktArray[i].split(’’)[0]);
feature.style = posLayer.style;
feature.style.fontColor = rgba2hex(wktArray[i].split(’
’)[2]);
posLayer.features.push(feature);
}
clearInterval(posinterval);
if (posLayer.features.length > 0) {
posinterval = setInterval(() => {
var color;
for (let i = 0; i < posLayer.features.length; i++) {//posLayer.features.length;
let feature = posLayer.features[i];
if (!feature.style) {
feature.style = Object.assign({}, posLayer.style);
}
color = rgba2hex(wktArray[i].split(’_’)[2]);
feature.style.fontColor = feature.style.fontColor === color ? “transparent” : color;
}
posLayer.redraw();
}, 1000);
}
}
}

Thanks,
Ashok

Hi Ashok,

You means you want to set the direction of the aircraft feature in client side?

It looks your code don’t handle it.

If you think rotate image is not easy in JavaScript, I think you can prepare many direction aircraft image, by different value add different image for it.

Wish that’s helpful.

Regards,

Ethan

Hi,

Yes, setting the direction/rotation of Aircraft feature in client side.
Actually by default i am setting it to 45.

posLayer.style = {
label: “B”,
fontColor: “red”,
fontSize: “50px”,
fontFamily: “Aircraft_b”,
rotation: "45"
};

And in run time i am also changing (actually that line has missed in the code sorry)

This is the line… feature.style.rotation = 75;

function blinkPosAircrafts(featuresWkts) {
if (featuresWkts != undefined) {
let wktArray = JSON.parse(featuresWkts);
let wktReader = new OpenLayers.Format.WKT();
posLayer.removeAllFeatures();
for (let i = 0; i < wktArray.length; i++) {
let feature = wktReader.read(wktArray[i].split(’’)[0]);
feature.style = posLayer.style;
feature.style.rotation = 75;
feature.style.fontColor = rgba2hex(wktArray[i].split(’
’)[2]);
posLayer.features.push(feature);
}

But even its not working…

As you said trying with image and image rotation is working… But we are here working with FONT for displaying aircrafts. So we wanted to rotate the FONT. please look for it.

Thanks,
Ashok

Hi Ashok,

Rotate is not the feature supported by our client API, but because it’s client side, I think the feature should be supported by JavaScript.

So I query it on Google, and found a topic should be helpful:

Regards,

Ethan