mirror of
https://github.com/sakitam-fdd/maptalks.plot.git
synced 2025-12-08 20:35:49 +00:00
156 lines
3.5 KiB
HTML
156 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>maptalks-plot</title>
|
|
<link rel="stylesheet" href="../node_modules/maptalks/dist/maptalks.css">
|
|
<style type="text/css">
|
|
html, body {
|
|
margin: 0px;
|
|
height: 100%;
|
|
width: 100%
|
|
}
|
|
|
|
.container {
|
|
width: 100%;
|
|
height: 100%
|
|
}
|
|
</style>
|
|
<body>
|
|
<div id="map" class="container"></div>
|
|
<script src="../node_modules/maptalks/dist/maptalks.js"></script>
|
|
<!--<script src="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.js"></script>-->
|
|
<script src="../dist/maptalks.plot.js"></script>
|
|
<script type="text/javascript">
|
|
var map = new maptalks.Map('map', {
|
|
center: [108.93, 34.27],
|
|
zoom: 5,
|
|
baseLayer: new maptalks.TileLayer('base', {
|
|
urlTemplate: 'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
|
|
})
|
|
});
|
|
|
|
var layer = new maptalks.VectorLayer('vector', {
|
|
enableSimplify : false
|
|
}).addTo(map);
|
|
|
|
var drawTool = new MaptalksPlot.PlotDraw({
|
|
mode: 'Curve'
|
|
}).addTo(map).disable();
|
|
drawTool.on('drawend', function (param) {
|
|
console.log(param.geometry);
|
|
if (param.geometry.getPlotType() === 'PlotPoint') {
|
|
param.geometry.setSymbol({
|
|
'markerFile': './static/images/5.png',
|
|
'markerWidth': 28,
|
|
'markerHeight': 40,
|
|
'markerDx': 0,
|
|
'markerDy': 0,
|
|
'markerOpacity': 1
|
|
})
|
|
}
|
|
layer.addGeometry(param.geometry);
|
|
});
|
|
var itemsLeft = ['Point', 'Polyline', 'Curve',
|
|
'Arc', 'FreeLine',
|
|
'ClosedCurve', 'FreePolygon',
|
|
'GatheringPlace', 'Lune', 'Sector'].map(function (value) {
|
|
return {
|
|
item: value,
|
|
click: function () {
|
|
drawTool.setMode(value).enable();
|
|
}
|
|
};
|
|
});
|
|
var itemsCenter = ['AttackArrow', 'DoubleArrow', 'FineArrow',
|
|
'StraightArrow', 'AssaultDirection', 'SquadCombat', 'TailedAttackArrow', 'TailedSquadCombat'].map(function (value) {
|
|
return {
|
|
item: value,
|
|
click: function () {
|
|
drawTool.setMode(value).enable();
|
|
}
|
|
};
|
|
});
|
|
var itemsRight = ['Polygon',
|
|
'CurveFlag', 'TriangleFlag', 'RectFlag',
|
|
'RectAngle', 'Circle', 'Ellipse'].map(function (value) {
|
|
return {
|
|
item: value,
|
|
click: function () {
|
|
drawTool.setMode(value).enable();
|
|
}
|
|
};
|
|
});
|
|
// left
|
|
new maptalks.control.Toolbar({
|
|
position : 'top-left',
|
|
items: [
|
|
{
|
|
item: 'Shape',
|
|
children: itemsLeft
|
|
},
|
|
{
|
|
item: 'Disable',
|
|
click: function () {
|
|
drawTool.disable();
|
|
}
|
|
},
|
|
{
|
|
item: 'Clear',
|
|
click: function () {
|
|
layer.clear();
|
|
}
|
|
}
|
|
]
|
|
}).addTo(map);
|
|
// center
|
|
new maptalks.control.Toolbar({
|
|
position : {
|
|
'top' : 20,
|
|
'left' : 580
|
|
},
|
|
items: [
|
|
{
|
|
item: 'Shape',
|
|
children: itemsCenter
|
|
},
|
|
{
|
|
item: 'Disable',
|
|
click: function () {
|
|
drawTool.disable();
|
|
}
|
|
},
|
|
{
|
|
item: 'Clear',
|
|
click: function () {
|
|
layer.clear();
|
|
}
|
|
}
|
|
]
|
|
}).addTo(map);
|
|
// right
|
|
new maptalks.control.Toolbar({
|
|
position : 'top-right',
|
|
items: [
|
|
{
|
|
item: 'Shape',
|
|
children: itemsRight
|
|
},
|
|
{
|
|
item: 'Disable',
|
|
click: function () {
|
|
drawTool.disable();
|
|
}
|
|
},
|
|
{
|
|
item: 'Clear',
|
|
click: function () {
|
|
layer.clear();
|
|
}
|
|
}
|
|
]
|
|
}).addTo(map);
|
|
</script>
|
|
</body>
|
|
</html>
|