console
var map = new maptalks.Map('map', {
center: [-0.131049, 51.498568],
zoom: 14,
fog: true,
baseLayer: new maptalks.TileLayer('base', {
urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
subdomains: ['a', 'b', 'c', 'd'],
attribution: '© <a href="http://osm.org">OpenStreetMap</a> contributors, © <a href="https://carto.com/">CARTO</a>',
cssFilter: 'sepia(100%) invert(90%)'
})
});
var polygon = new maptalks.Polygon([
[
[-0.131049, 51.498568],
[-0.107049, 51.498568],
[-0.107049, 51.493568],
[-0.131049, 51.493568],
[-0.131049, 51.498568]
]
], {
visible : true,
editable : true,
cursor : 'pointer',
draggable : false,
dragShadow : false,
drawOnAxis : null,
symbol: {
'lineColor' : '#fff',
'lineWidth' : 2,
'polygonFill' : 'rgb(240, 0, 0)',
'polygonOpacity' : 0.6,
}
});
const sceneConfig = {
}
const layer = new maptalks.PointLayer('vector');
const layer1 = new maptalks.VectorLayer('Polygon');
new maptalks.Marker([-0.113049, 51.49856]).addTo(layer);
polygon.addTo(layer1);
const groupLayer = new maptalks.GroupGLLayer('group', [layer, layer1], { sceneConfig }).addTo(map);
marker.setInfoWindow({
'title': 'Marker\'s InfoWindow',
'content': 'Click on marker to open.'
});
marker.openInfoWindow();
<link rel="stylesheet" href="https://unpkg.com/maptalks@1.0.0-rc.33/dist/maptalks.css">
<script src="https://unpkg.com/maptalks@1.0.0-rc.33/dist/maptalks.min.js"></script>
<script src="https://unpkg.com/@maptalks/gl-layers@0.34.1/dist/maptalks-gl-layers.js"></script>
<div id="map" class="container"></div>
html,body{margin:0px;height:100%;width:100%}
.container{width:100%;height:100%}