<title data-i18n="resources.title_graphiclayerCanvas"></title>
<script type="text/javascript" include="randomcolor" src="../js/include-web.js"></script>
<script type="text/javascript" src="../../dist/include-openlayers.js"></script>
<style>
.ol-popup {
position: absolute;
background-color: white;
-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
min-width: 50px;
}
.ol-popup:after, .ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
</style>
<script type="text/javascript">
var url = (window.isLocal ? document.location.host : "http://support.supermap.com.cn:8090") + "/iserver/services/map-china400/rest/maps/ChinaDark";
var map;
var colorCount = 10;
var colors = getRandomColors(colorCount);
new ol.supermap.MapService(url).getMapInfo(function (serviceResult) {
var mapJSONObj = serviceResult.result;
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var overlay = new ol.Overlay(({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250
}
}));
map = new ol.Map({
target: 'map',
controls: ol.control.defaults({attributionOptions: {collapsed: false}})
.extend([new ol.supermap.control.Logo()]),
view: new ol.View({
center: ol.proj.transform([-73.9286, 40.75], 'EPSG:4326', 'EPSG:3857'),
zoom: 12,
projection: 'EPSG:3857'
}),
overlays: [overlay],
renderer: ['canvas']
});
var options = ol.source.TileSuperMapRest.optionsFromMapJSON(url, mapJSONObj);
var layer = new ol.layer.Tile({
source: new ol.source.TileSuperMapRest(options)
});
map.addLayer(layer);
});
var randomCircleStyles = [];
for (var i = 0; i < colorCount; i++) {
randomCircleStyles.push(new ol.style.RegularShape({
radius: Math.floor(Math.random() * 10 + 1),
fill: new ol.style.Fill({
color: colors[i]
}),
stroke: new ol.style.Stroke({
color: colors[i]
}),
points: 3,
}));
}
function show(){
$.get('../data/nyc_taxi.json', function (nycData) {
var count = nycData.features.length; //矢量点的个数
var graphics = new Array(count);
for (var i = 0; i < count; ++i) {
var coordinates = nycData.features[i].geometry.coordinates;
if (coordinates[0] === coordinates[1]) {
continue;
}
coordinates = ol.proj.transform(coordinates, 'EPSG:4326', 'EPSG:3857');
graphics[i] = new ol.Graphic(new ol.geom.Point(coordinates));
graphics[i].setStyle(randomCircleStyles[Math.floor(Math.random() * colorCount)]);
}
map.once('postrender', function () {
var graphicLayer = new ol.layer.Image({
source: new ol.source.Graphic({
graphics: graphics,
map: map,
onClick: function (graphic) {
if (graphic) {
var coords = graphic.getGeometry().getCoordinates();
content.innerHTML = resources.text_coordinate + ":[" + coords[0] + "," + coords[1] + "]";
overlay.setPosition(graphic.getGeometry().getCoordinates());
return;
}
overlay.setPosition(undefined);
}
})
});
graphicLayer.setProperties({id: "graphicLayer"});
map.addLayer(graphicLayer);
})
});
}
function getRandomColors(count) {
return randomColor({
luminosity: 'bright',
hue: 'random',
alpha: 0.5,
format: 'rgba',
count: count
});
}
show();
setInterval(function () {
graphicLayer.getSource().graphics_ = null;
map.removeLayer("graphicLayer");
graphicLayer = null;
show();
}, 60 * 1000);