antv-l7/packages/l7/demo/image.html

89 lines
5.4 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>L7 IE</title>
<style>
html,
body {
overflow: hidden;
margin: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
cursor:pointer;
}
</style>
<link
href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css"
rel="stylesheet"
/>
</head>
<body>
<div id="map"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.8.3/polyfill.min.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js"></script>
<script src="../dist/l7-dev.js"></script>
<script>
console.log(L7);
const scene = new L7.Scene({
id: "map",
map: new L7.Mapbox({
style: "dark", // 样式URL
center: [108.6167, 19.1000],
pitch: 0,
zoom: 6
})
});
const data = {"list":[{"w":19.1000,"t":24.6000,"s":"海南","l":11,"m":"东方","j":108.6167,"h":"59838"},{"w":20.0000,"t":23.8000,"s":"海南","l":11,"m":"海口","j":110.2500,"h":"59758"},{"w":22.2750,"t":23.6000,"s":"广东","l":12,"m":"珠海","j":113.5669,"h":"59488"},{"w":20.3372,"t":23.4000,"s":"广东","l":12,"m":"徐闻","j":110.1794,"h":"59754"},{"w":19.2089,"t":23.2000,"s":"海南","l":12,"m":"琼海","j":110.4819,"h":"59855"},{"w":21.7358,"t":23.2000,"s":"广东","l":11,"m":"上川岛","j":112.7731,"h":"59673"},{"w":23.3853,"t":23.0000,"s":"广东","l":11,"m":"汕头","j":116.6792,"h":"59316"},{"w":22.5417,"t":23.0000,"s":"广东","l":12,"m":"深圳","j":114.0033,"h":"59493"},{"w":19.5167,"t":22.9000,"s":"海南","l":12,"m":"儋州","j":109.5833,"h":"59845"},{"w":21.1547,"t":22.7000,"s":"广东","l":12,"m":"湛江","j":110.3022,"h":"59658"},{"w":21.4500,"t":22.7000,"s":"广西","l":12,"m":"北海","j":109.1333,"h":"59644"},{"w":22.5000,"t":22.6000,"s":"广东","l":12,"m":"中山","j":113.4000,"h":"59485"},{"w":21.8453,"t":22.6000,"s":"广东","l":12,"m":"阳江","j":111.9783,"h":"59663"},{"w":22.3469,"t":22.6000,"s":"广东","l":12,"m":"信宜","j":110.9250,"h":"59456"},{"w":22.8000,"t":22.5000,"s":"广东","l":12,"m":"汕尾","j":115.3667,"h":"59501"},{"w":23.4275,"t":22.3000,"s":"广东","l":12,"m":"南澳","j":117.0292,"h":"59324"},{"w":22.7100,"t":22.3000,"s":"广东","l":12,"m":"罗定","j":111.6000,"h":"59462"},{"w":19.0333,"t":22.3000,"s":"海南","l":12,"m":"琼中","j":109.8333,"h":"59849"},{"w":21.5458,"t":22.2000,"s":"广东","l":11,"m":"电白","j":110.9886,"h":"59664"},{"w":22.9661,"t":21.9000,"s":"广东","l":12,"m":"东莞","j":113.7389,"h":"59289"},{"w":22.2472,"t":21.8000,"s":"广东","l":12,"m":"台山","j":112.7858,"h":"59478"},{"w":22.9836,"t":21.6000,"s":"广东","l":12,"m":"惠来","j":116.3014,"h":"59317"},{"w":22.9906,"t":21.0000,"s":"广东","l":12,"m":"高要","j":112.4786,"h":"59278"},{"w":23.9000,"t":20.8000,"s":"广西","l":12,"m":"百色","j":106.6000,"h":"59211"},{"w":23.0711,"t":20.4000,"s":"广东","l":12,"m":"惠阳","j":114.3744,"h":"59298"},{"w":23.4497,"t":20.4000,"s":"广东","l":12,"m":"揭西","j":115.8492,"h":"59306"},{"w":23.3353,"t":20.4000,"s":"广东","l":11,"m":"增城","j":113.8275,"h":"59294"},{"w":23.4167,"t":19.9000,"s":"广西","l":12,"m":"那坡","j":105.8333,"h":"59209"},{"w":24.9000,"t":19.7000,"s":"福建","l":11,"m":"崇武","j":118.9167,"h":"59133"},{"w":24.4833,"t":19.7000,"s":"福建","l":12,"m":"厦门","j":118.0667,"h":"59134"},{"w":23.7936,"t":19.6000,"s":"广东","l":12,"m":"河源","j":114.7297,"h":"59293"},{"w":23.7106,"t":19.4000,"s":"广东","l":12,"m":"清远","j":113.0850,"h":"59280"},{"w":23.1000,"t":19.4000,"s":"广西","l":12,"m":"靖西","j":106.4500,"h":"59218"},{"w":23.6000,"t":19.4000,"s":"广西","l":13,"m":"田东","j":107.1167,"h":"59224"},{"w":25.5167,"t":19.2000,"s":"福建","l":12,"m":"平潭","j":119.7833,"h":"58944"},{"w":25.0500,"t":19.2000,"s":"福建","l":12,"m":"龙岩","j":117.0167,"h":"58927"},{"w":23.2100,"t":19.0000,"s":"广东","l":12,"m":"广州","j":113.4822,"h":"59287"},{"w":21.9833,"t":18.9000,"s":"广西","l":12,"m":"钦州","j":108.6000,"h":"59632"}]}
scene.on('loaded',function(){
scene.addImage(
'00',
// 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg'
'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*bq1cS7ADjR4AAAAAAAAAAAAAARQnAQ'
);
scene.addImage(
'01',
// 'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg'
'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*bq1cS7ADjR4AAAAAAAAAAAAAARQnAQ'
);
scene.addImage(
'02',
// 'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg'
'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*bq1cS7ADjR4AAAAAAAAAAAAAARQnAQ'
);
const pointLayer = new L7.PointLayer({})
.source(data.list, {
parser: {
type: "json",
x: "j",
y: "w"
}
})
.shape('m', [ '00', '01', '02' ])
.size(20)
.active(true)
.style({
opacity: 1.0
});
scene.addLayer(pointLayer);
pointLayer.on('inited',function(){
console.log('加载完成');
})
scene.render();
})
</script>
</body>
</html>