125 lines
5.4 KiB
HTML
125 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title></title>
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
|
|
<link href="/jscss/style.css" rel="stylesheet" type="text/css" />
|
|
<script type="text/javascript" charset="utf-8" src="/jscss/theme.js"></script>
|
|
<style>
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="container" style="height: 40em;"></div>
|
|
<div class="div_edit" style="position: fixed; bottom: 1em; right: 1em; display: flex; display: none;z-index:1001;">
|
|
<code>选中后，可拖动白色顶点，也可双击删除顶点</code>
|
|
<button class="lang btn" onclick="delpoly()">选中删除</button>
|
|
<button class="lang btn" onclick="selpoly()">选定区域</button>
|
|
</div>
|
|
<script type="text/javascript" src="/jscss/jquery-1.12.4.min.js"></script>
|
|
<script type="text/javascript" src="/jscss/ciy.js"></script>
|
|
<script type="text/javascript" src="/jscss/gcoord.js"></script>
|
|
<script type="text/javascript" src="https://map.qq.com/api/gljs?libraries=tools&v=1.exp&key=TCEBZ-PACWI-OQCGA-5ST3L-CYEDS-OJFW4" charset="utf-8"></script>
|
|
<script type="text/javascript">
|
|
//polygon格式为 lat lng,lat lng...
|
|
var map;
|
|
var editor;
|
|
$(document).ready(function () {
|
|
var urls = ciyfn.urlparam();
|
|
var mapcenter = ciyfn.getstorage('_mappolygon');
|
|
if (!mapcenter)
|
|
mapcenter = { lng: 121.5, lat: 31.2, zoom: 12 };
|
|
map = new TMap.Map("container", {
|
|
showControl: false,
|
|
zoom: mapcenter.zoom,
|
|
center: new TMap.LatLng(mapcenter.lat, mapcenter.lng),
|
|
baseMap: { type: 'satellite' }
|
|
});
|
|
//urls.polygon = '40.771733 107.436660,40.770676 107.439385,40.770308 107.439625,40.768666 107.436046,40.770760 107.434476';
|
|
//urls.polygon = '';
|
|
var polys = urls.polygon.split(',');
|
|
var paths = [];
|
|
var llb = new TMap.LatLngBounds();
|
|
for (var i in polys) {
|
|
var ll = polys[i].split(' ');
|
|
if (ll.length != 2)
|
|
continue;
|
|
var gcloc = gcoord.transform([ll[1], ll[0]], gcoord.WGS84, gcoord.GCJ02);
|
|
var llx = new TMap.LatLng(gcloc[1], gcloc[0]);
|
|
llb.extend(llx);
|
|
paths.push(llx);
|
|
}
|
|
editor = new TMap.tools.GeometryEditor({
|
|
map: map,
|
|
overlayList: [],
|
|
actionMode: paths.length > 0 ? TMap.tools.constants.EDITOR_ACTION.INTERACT : TMap.tools.constants.EDITOR_ACTION.DRAW,//INTERACT DRAW
|
|
selectable: !!urls.edit,
|
|
snappable: true
|
|
});
|
|
editor.addOverlay({
|
|
overlay: new TMap.MultiPolygon({
|
|
map: map, styles: {
|
|
highlight2: new TMap.PolygonStyle({ color: "rgba(255,255,255,0.2)" })
|
|
}, geometries: []
|
|
}), id: "polygon3"
|
|
});
|
|
editor.setActiveOverlay("polygon3");
|
|
if (paths.length > 0) {
|
|
map.fitBounds(llb, { padding: { top: 40, bottom: 40, left: 20, right: 20 } });
|
|
var ao = editor.getActiveOverlay();
|
|
ao.overlay.add({
|
|
id: 3, styleId: "highlight2", paths: paths
|
|
});
|
|
}
|
|
editor.on('draw_complete', function (evtResult) {
|
|
editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT);
|
|
var oy = editor.getActiveOverlay();
|
|
var geos = oy.overlay.getGeometries();
|
|
if(geos.length > 0){
|
|
geos[0].styleId = "highlight2";
|
|
oy.overlay.updateGeometries(geos[0]);
|
|
}
|
|
});
|
|
editor.on('delete_complete', function (evtResult) {
|
|
editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.DRAW);
|
|
});
|
|
|
|
|
|
map.on('panend', function () {
|
|
var mapCenter = map.getCenter();
|
|
ciyfn.setstorage('_mappolygon', { lat: mapCenter.getLat(), lng: mapCenter.getLng(), zoom: tofloat(map.getZoom()) });
|
|
});
|
|
if (urls.edit) {
|
|
$('.div_edit').show();
|
|
}
|
|
});
|
|
function selpoly() {
|
|
var oy = editor.getActiveOverlay();
|
|
var paths;
|
|
if (oy.overlay.geometries.length == 0) {
|
|
var selt = editor.getSelectedList();
|
|
if (selt.length == 0)
|
|
return ciyfn.toast('请绘制图形');
|
|
paths = selt[0].paths;
|
|
} else {
|
|
paths = oy.overlay.geometries[0].paths;
|
|
}
|
|
if(paths.length == 0)
|
|
return ciyfn.toast('请绘制图形。');
|
|
var val = [];
|
|
for(var i=0;i<paths.length;i++){
|
|
var gcloc = gcoord.transform([paths[i].lng, paths[i].lat], gcoord.GCJ02, gcoord.WGS84);
|
|
val.push(gcloc[1].toFixed(6) + ' ' + gcloc[0].toFixed(6));
|
|
}
|
|
ciyfn.sendsignal(window.top,'alert_done', {btn: '地图返回', inputs: val.join(',')});
|
|
}
|
|
function delpoly() {
|
|
editor.delete();
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |