|
@@ -7,10 +7,9 @@
|
|
<script th:src="@{/visualization/superMap/examples/js/include-web.js}"></script>
|
|
<script th:src="@{/visualization/superMap/examples/js/include-web.js}"></script>
|
|
</head>
|
|
</head>
|
|
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
|
|
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
|
|
-
|
|
|
|
-
|
|
|
|
<button onclick="addMark()">打点</button>
|
|
<button onclick="addMark()">打点</button>
|
|
-<button onclick="offMark()">关闭</button>
|
|
|
|
|
|
+<button onclick="offMark()">打点完成</button>
|
|
|
|
+<label id="distanceLength"></label>
|
|
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
|
|
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
|
|
<script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
|
|
<script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
|
|
<script type="text/javascript">
|
|
<script type="text/javascript">
|
|
@@ -26,24 +25,62 @@
|
|
});
|
|
});
|
|
L.supermap.tiledMapLayer(url).addTo(map);
|
|
L.supermap.tiledMapLayer(url).addTo(map);
|
|
resultLayer = L.featureGroup().addTo(map);
|
|
resultLayer = L.featureGroup().addTo(map);
|
|
- measureDistance();
|
|
|
|
-
|
|
|
|
|
|
+ //measureDistance();
|
|
|
|
+ var pointsArray = new Array();
|
|
|
|
|
|
function addMark() {
|
|
function addMark() {
|
|
map.on("click",addMarkSuccess)
|
|
map.on("click",addMarkSuccess)
|
|
}
|
|
}
|
|
|
|
+
|
|
function offMark() {
|
|
function offMark() {
|
|
|
|
+ if(pointsArray.length > 1){
|
|
|
|
+ var distanceLength = 0;
|
|
|
|
+ for (var i = 0; i < pointsArray.length - 1; i++) {
|
|
|
|
+ var polyLine = L.polyline([ pointsArray[i], pointsArray[i + 1] ], {color: "red"});
|
|
|
|
+ // resultLayer.addLayer(polyLine);
|
|
|
|
+ var distanceMeasureParam = new SuperMap.MeasureParameters(polyLine);
|
|
|
|
+ L.supermap.measureService(url).measureDistance(distanceMeasureParam, function (serviceResult) {
|
|
|
|
+ distanceLength += serviceResult.result.distance;
|
|
|
|
+ $("#distanceLength").html(distanceLength + distanceLength + resources.msg_m);
|
|
|
|
+ // alert(i)
|
|
|
|
+ // alert(pointsArray.length)
|
|
|
|
+ // if(i === pointsArray.length - 2){//最后一个点上显示总长度
|
|
|
|
+ // alert(distanceLength)
|
|
|
|
+ // var content = resources.text_distance + ":" + distanceLength + resources.msg_m;
|
|
|
|
+ // markerFinal.bindPopup(content).openPopup(markerFinal.getLatLng());
|
|
|
|
+ // }
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ pointsArray = new Array();
|
|
map.off("click");
|
|
map.off("click");
|
|
}
|
|
}
|
|
function addMarkSuccess(e) {
|
|
function addMarkSuccess(e) {
|
|
|
|
+ pointsArray.push([e.latlng.lat,e.latlng.lng]);
|
|
|
|
+ if(pointsArray.length > 1){
|
|
|
|
+ var polyLine = L.polyline([ pointsArray[pointsArray.length-2],[e.latlng.lat,e.latlng.lng] ], {color: "red"});
|
|
|
|
+ resultLayer.addLayer(polyLine);
|
|
|
|
+ var distanceMeasureParam = new SuperMap.MeasureParameters(polyLine);
|
|
|
|
+ L.supermap.measureService(url).measureDistance(distanceMeasureParam, function (serviceResult) {
|
|
|
|
+ var marker = L.marker([e.latlng.lat,e.latlng.lng]);
|
|
|
|
+ resultLayer.addLayer(marker);
|
|
|
|
+ var content = resources.text_distance + ":" + serviceResult.result.distance + resources.msg_m;
|
|
|
|
+ marker.bindPopup(content).openPopup(marker.getLatLng());
|
|
|
|
+ });
|
|
|
|
+ }else {
|
|
|
|
+ var marker = L.marker([e.latlng.lat,e.latlng.lng]);
|
|
|
|
+ resultLayer.addLayer(marker);
|
|
|
|
+ }
|
|
|
|
+
|
|
console.log(e.latlng.lat,e.latlng.lng)
|
|
console.log(e.latlng.lat,e.latlng.lng)
|
|
- var marker = L.marker([e.latlng.lat,e.latlng.lng]);
|
|
|
|
- resultLayer.addLayer(marker);
|
|
|
|
|
|
+ //markerFinal = marker;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- function measureDistance() {
|
|
|
|
|
|
+ function measureDistance(lon,lat) {
|
|
var polyLine = L.polyline([ [43.15,124.78], [43.15,124.79] ], {color: "red"});
|
|
var polyLine = L.polyline([ [43.15,124.78], [43.15,124.79] ], {color: "red"});
|
|
var marker1 = L.marker([43.15,124.78]);
|
|
var marker1 = L.marker([43.15,124.78]);
|
|
var marker2 = L.marker([43.15,124.79]);
|
|
var marker2 = L.marker([43.15,124.79]);
|