GeezerVison is showing github.com — iClient-JavaScript/examples/leaflet/12_graphicLayer.html at master · lyinghappy/iClient-JavaScript

Expand file tree

12_graphicLayer.html

Copy path

More file actions

Latest commit

History

87 lines (80 loc) · 3.2 KB

12_graphicLayer.html

Copy path

File metadata and controls

87 lines (80 loc) · 3.2 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

<!--********************************************************************

*********************************************************************-->

<!DOCTYPE html>

<html>

<head>

</head>

var host = window.isLocal ? window.server : "https://iserver.supermap.io";

var map;

map = L.map('map', {

preferCanvas: true,

center: [40.74650, -73.89109999999999],

maxZoom: 18,

zoom: 12

});

var url = host + "/iserver/services/map-china/rest/maps/ChinaDark";

new L.supermap.TiledMapLayer(url).addTo(map);

var colorCount = 10;

var colors = getRandomColors(colorCount);

addGraphicLayer();

function addGraphicLayer() {

widgets.loader.showLoader();

$.get('../data/nyc_taxi_18W.csv', function (nycData) {

var features = Papa.parse(nycData, {skipEmptyLines: true, header: true}).data;

var count = features.length;

var graphics = [];

var circleStyles = [];

//创建圆的样式

for (var i = 0; i < colorCount; i++) {

circleStyles.push(new L.supermap.CircleStyle({

color: colors[i],

opacity: 1,

radius: Math.floor(Math.random() * 3 + 1),

fill: true,

fillColor: colors[i],

fillOpacity: 1

}));

}

//设置每个点的经纬度和传入圆的样式

for (var i = 0; i < count; ++i) {

var coordinates = [Number(features[i].X), Number(features[i].Y)];

if (coordinates[0] === coordinates[1]) {

continue;

}

graphics[i] = new L.supermap.Graphic({

latLng: L.latLng(coordinates[1], coordinates[0]),

style: circleStyles[Math.floor(Math.random() * colorCount)].getStyle()

});

}

//绘制图层

new L.supermap.GraphicLayer(graphics, {

render: "canvas",

onClick: function (graphic) {

L.popup().setLatLng(graphic.getLatLng())

.setContent('<p>' + resources.text_latLng + '：<br>' + graphic.getLatLng().lng + ',<br>' + graphic.getLatLng().lat + '</p>')

.openOn(map);

}

}).addTo(map);

widgets.loader.removeLoader();

})

}

//生成随机颜色

function getRandomColors(count) {

return randomColor({

luminosity: 'bright',

hue: 'random',

alpha: 0.5,

format: 'rgba',

count: count

});

}

</script>

</body>

</html>