https://github.com/alex2wong/jqmap2
Map plugins and demo, Cloud layer, Scene Animation ,Map Label engines -->
https://github.com/alex2wong/jqmap2
flight labels mapbox-gl-js multiplayer openlayers websockets
Last synced: about 2 months ago
JSON representation
Map plugins and demo, Cloud layer, Scene Animation ,Map Label engines -->
- Host: GitHub
- URL: https://github.com/alex2wong/jqmap2
- Owner: alex2wong
- Created: 2015-10-15T06:03:20.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2019-06-10T15:10:50.000Z (almost 6 years ago)
- Last Synced: 2025-03-18T20:40:40.036Z (about 2 months ago)
- Topics: flight, labels, mapbox-gl-js, multiplayer, openlayers, websockets
- Language: JavaScript
- Homepage: http://alex2wong.github.io/Jqmap2/label.html
- Size: 51 MB
- Stars: 24
- Watchers: 5
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Jqmap2
**Note:** Mapbox related plugins have been moved to new repo: [mapbox-plugins](https://github.com/alex2wong/mapbox-plugins)
Jqmap2 contains sets of **web app** based on Mapbox GL JS and socket.io
Currently Mapbox GL JS is applied to build A totally new flightgame, with pitch, bearing in viewport and webgl render.
Game ScreenShot:
Roads Style and Rectangle label background
[Rectangle label background based on Canvas](http://alex2wong.github.io/Jqmap2/labelbg.html) Thanks@Yang
[Mapbox storylayer example with async/await](http://alex2wong.github.io/Jqmap2/examples/storylayer/)
[Mapbox cloud example](http://alex2wong.github.io/Jqmap2/examples/cloudlayer/)
### ↓Openlayer label without overlap
if interested **how it works**, visit [WIKI](https://github.com/alex2wong/Jqmap2/wiki/Openlayer-%E5%AE%9E%E7%8E%B0%E5%B8%A6%E7%A2%B0%E6%92%9E%E6%A3%80%E6%B5%8B%E7%9A%84%E6%A0%87%E6%B3%A8) for more information.
### **Demos** for you:
Label Example , Openlayer label Engine, Update 2017/5/17. Simple config, easy use.
```
// new LabelEngine.
var labelEngine = new LabelEngine({
labelFields: ['city', 'NAME'],
distStrat: true,
});
// refresh timer each moveend.
map.on('moveend', function(evt) {
if (labelEngine) {
labelEngine.log();
labelEngine.init();
}
});
// config layer styleFunction as usual
function cityStyleFunction(feature, resolution) {
return new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: "#ffc107"
}),
radius: 4
}),
// config layer label option
text: labelEngine.createTextStyle(feature, resolution, {
maxRes: 25000,
field: "city",
lang: "en",
}),
});
}
```
Proxy Example , Get resource by Nodejs Proxy, input busline name in DEMO to get the line coordinates.
Blur Example , blur partial canvas context, based on js lib [blurify](https://github.com/alex2wong/blurify).
Mobile web map , the JqueryMobile and Openlayer2 webApp.
Flight Game , press WSAD for move, Space to fire, Enjoy it!
First view flight , press WSAD for move
## Todo List:
- add websocket to support multiplayer (completed!)
- optimize touch events to promote mobile performance (completed!)
- display other player's fire action and sync Robot Status to all client, not emit to client speratedly anymore.
- optimize calculation in fire animation. promote game influence.(completed!)
- add mini map to navigate enemy drone(completed).
- add chatPopup to map, clear to show who talks.(completed).
- **!important**: refactor code structure based on es6. (inprogress..)
- **!important**: add AI-robot module to current robot flight which can follow and fire at player. (completed)