|
@@ -2,61 +2,110 @@
|
|
|
<!--<html lang="en" xmlns:th="http://www.thymeleaf.org">-->
|
|
|
<html xmlns:th="http://www.w3.org/1999/xhtml">
|
|
|
<head>
|
|
|
+ <meta http-equiv="Access-Control-Allow-Origin" content="*" />
|
|
|
<meta charset="UTF-8">
|
|
|
<title data-i18n="resources.title_measureDistance"></title>
|
|
|
+ <link th:href="@{/visualization/superMap/dist/leaflet/iclient-leaflet.css}" rel="stylesheet">
|
|
|
+
|
|
|
<script th:src="@{/visualization/superMap/examples/js/include-web.js}"></script>
|
|
|
- <script type="text/javascript" th:src="@{/dist/ol/include-ol.js}"></script>
|
|
|
<style>
|
|
|
- .leaflet-bottom{
|
|
|
+ .leaflet-bottom {
|
|
|
display: none;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
-<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%; position: absolute;top: 0;">
|
|
|
-<div id="map" style="width: 100%;height:100%"></div>
|
|
|
+<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
|
|
|
+<label id="size"></label>
|
|
|
+<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
|
|
|
+
|
|
|
+
|
|
|
+<script include="leaflet.draw" th:src="@{/visualization/superMap/dist/leaflet/include-leaflet.js}"></script>
|
|
|
+
|
|
|
<script type="text/javascript">
|
|
|
- var map, interaction, vectorLayer, feature,
|
|
|
- url = "http://218.27.1.157:8090/iserver/services/map-SiPingLinYe4326/rest/maps/1%E6%9E%97%E5%9C%BA%E5%BD%B1%E5%83%8F";
|
|
|
- map = new ol.Map({
|
|
|
- target: 'map',
|
|
|
- controls: ol.control.defaults({attributionOptions: {collapsed: false}})
|
|
|
- .extend([new ol.supermap.control.Logo()]),
|
|
|
- view: new ol.View({
|
|
|
- //center: [43.15, 124.78],
|
|
|
- center: [43.10, 124.60],
|
|
|
- zoom: 10.5,
|
|
|
- projection: 'EPSG:4326',
|
|
|
- multiWorld: true
|
|
|
- })
|
|
|
- });
|
|
|
- var layer = new ol.layer.Tile({
|
|
|
- source: new ol.source.TileSuperMapRest({
|
|
|
- url: url
|
|
|
- }),
|
|
|
- projection: 'EPSG:4326'
|
|
|
+ var host = "https://218.27.1.154:8090";
|
|
|
+ var map, resultLayer,
|
|
|
+ url = "https://218.27.1.154:8090/iserver/services/map-SiPingLinYe4326/rest/maps/1%E6%9E%97%E5%9C%BA%E5%BD%B1%E5%83%8F";
|
|
|
+ map = L.map('map', {
|
|
|
+ crs: L.CRS.EPSG4326,
|
|
|
+ center: [43.10, 124.60],
|
|
|
+ maxZoom: 15,
|
|
|
+ zoom: 10.5
|
|
|
});
|
|
|
- map.addLayer(layer);
|
|
|
- var source = new ol.source.Vector({wrapX: false});
|
|
|
- vectorLayer = new ol.layer.Vector({
|
|
|
- source: source
|
|
|
- });
|
|
|
- map.addLayer(vectorLayer);
|
|
|
- interaction = new ol.interaction.Draw({
|
|
|
- source: source,
|
|
|
- type: "Polygon",
|
|
|
- });
|
|
|
- interaction.on('drawstart', function (evt) {
|
|
|
- feature = evt.feature;
|
|
|
- });
|
|
|
- interaction.on('drawend', function () {
|
|
|
- var areaMeasureParam = new SuperMap.MeasureParameters(feature.getGeometry());
|
|
|
- new ol.supermap.MeasureService(url).measureArea(areaMeasureParam, function (serviceResult) {
|
|
|
- //widgets.alert.showAlert(serviceResult.result.area + resources.msg_sqm, true);
|
|
|
- alert("面积:" + serviceResult.result.area + resources.msg_sqm);
|
|
|
- });
|
|
|
+ L.supermap.tiledMapLayer(url).addTo(map);
|
|
|
+ resultLayer = L.featureGroup().addTo(map);
|
|
|
+
|
|
|
+ var options = {
|
|
|
+ position: 'topleft',
|
|
|
+ draw: {
|
|
|
+ polyline: {},
|
|
|
+ polygon: {},
|
|
|
+ circle: {},
|
|
|
+ rectangle: {},
|
|
|
+ marker: {},
|
|
|
+ remove: {}
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ var pointsArray = new Array();
|
|
|
+
|
|
|
+ var drawControl = new L.Control.Draw(options);
|
|
|
+ map.addControl(drawControl);
|
|
|
+ map.on(L.Draw.Event.CREATED, function (e) {
|
|
|
+ var type = e.layerType,
|
|
|
+ layer = e.layer;
|
|
|
+ switch (type) {
|
|
|
+ case 'rectangle':
|
|
|
+ case 'polygon':
|
|
|
+ measureArea(layer._latlngs);
|
|
|
+
|
|
|
+ break;
|
|
|
+ }
|
|
|
+
|
|
|
});
|
|
|
|
|
|
- map.addInteraction(interaction);
|
|
|
+ function measureArea(arr) {
|
|
|
+ console.log("arr==",arr)
|
|
|
+ var polygon = L.polygon([arr]).addTo(map);
|
|
|
+ console.log("polygon=",polygon)
|
|
|
+ var geometry = L.Util.transform(polygon, L.CRS.EPSG4326, L.CRS.EPSG3857);
|
|
|
+ var size = computeSignedArea(arr[0])
|
|
|
+ console.log(size)
|
|
|
+ $("#size").html("面积:"+size)
|
|
|
+ // var areaMeasureParam = new L.supermap.MeasureParameters(polygon);
|
|
|
+ // new L.supermap
|
|
|
+ // .MeasureService(url)
|
|
|
+ // .measureArea(areaMeasureParam, function (serviceResult) {
|
|
|
+ // var content = resources.text_area + serviceResult.result.area + resources.msg_sqm;
|
|
|
+ // polygon.bindPopup(content).openPopup(polygon.getCenter());
|
|
|
+ // });
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ function computeSignedArea(path) {
|
|
|
+ var radius = 6371009
|
|
|
+ var len = path.length;
|
|
|
+ if (len < 3) return 0;
|
|
|
+ var total = 0;
|
|
|
+ var prev = path[len - 1];
|
|
|
+ var prevTanLat = Math.tan(((Math.PI / 2 - prev.lat / 180 * Math.PI) / 2));
|
|
|
+ var prevLng = (prev.lng) / 180 * Math.PI;
|
|
|
+ for (var i in path) {
|
|
|
+ var tanLat = Math.tan((Math.PI / 2 -
|
|
|
+ (path[i].lat) / 180 * Math.PI) / 2);
|
|
|
+ var lng = (path[i].lng) / 180 * Math.PI;
|
|
|
+ total += polarTriangleArea(tanLat, lng, prevTanLat, prevLng);
|
|
|
+ prevTanLat = tanLat;
|
|
|
+ prevLng = lng;
|
|
|
+ }
|
|
|
+ return Math.abs(total * (radius * radius));
|
|
|
+ }
|
|
|
+
|
|
|
+ function polarTriangleArea(tan1, lng1, tan2, lng2) {
|
|
|
+ var deltaLng = lng1 - lng2;
|
|
|
+ var t = tan1 * tan2;
|
|
|
+ return 2 * Math.atan2(t * Math.sin(deltaLng), 1 + t * Math.cos(deltaLng));
|
|
|
+ }
|
|
|
+
|
|
|
|
|
|
</script>
|
|
|
</body>
|