dji-nofly
/
QueryDjiDataForCountry.html

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">


    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Shapes and Symbols</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.41/esri/css/esri.css">

    <style>
        #info {
            top: 20px;
            color: #444;
            height: auto;
            font-family: arial;
            right: 20px;
            margin: 5px;
            padding: 10px;
            position: absolute;
            width: 115px;
            z-index: 40;
            border: solid 2px #666;
            border-radius: 4px;
            background-color: #fff;
        }

        html,
        body,
        #mapDiv {
            padding: 0;
            margin: 0;
            height: 100%;
        }

        button {
            display: block;
        }

        .selectDiv {
            position: absolute;
            top: 30px;
            right: 200px;
        }
    </style>

    <script src="https://js.arcgis.com/3.41/"></script>
    <script src="lib/jQuery-2.1.1.min.js"></script>
    <script src="lib/json2.js"></script>
    <script>
        var map, tb, noflyGraphicsLayer;

        require([
            "esri/map", "esri/layers/GraphicsLayer", "esri/layers/OpenStreetMapLayer", "esri/toolbars/draw",
            "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
            "esri/symbols/PictureFillSymbol", "esri/symbols/CartographicLineSymbol",
            "esri/graphic",
            "esri/Color", "dojo/dom", "dojo/on", "esri/geometry/Polygon", "esri/SpatialReference", "esri/geometry/Point", "esri/geometry/Circle", "esri/symbols/SimpleFillSymbol", "dojo/domReady!"
        ], function(
            Map, GraphicsLayer, OpenStreetMapLayer, Draw,
            SimpleMarkerSymbol, SimpleLineSymbol,
            PictureFillSymbol, CartographicLineSymbol,
            Graphic,
            Color, dom, on, Polygon, SpatialReference, Point, Circle, SimpleFillSymbol
        ) {
            map = new Map("mapDiv", {
                basemap: "oceans",
                center: [-25.312, 34.307],
                zoom: 3
            });
            var openStreetMapLayer = new OpenStreetMapLayer();
            map.addLayer(openStreetMapLayer);

            noflyGraphicsLayer = new GraphicsLayer();
            map.addLayer(noflyGraphicsLayer);
            map.on("load", function(e) {
                initToolbar();
                //加载数据
                loadDataToMap("CN");
            });

            // 转为弧度
            function toRadians(d) {
                return d * Math.PI / 180;
            }

            function getDistance(lat1, lon1, lat2, lon2) {
                var R = 6378137; // 地球长半径
                var φ1 = toRadians(lat1);
                var φ2 = toRadians(lat2);
                var Δφ = toRadians(lat2 - lat1);
                var Δλ = toRadians(lon2 - lon1);

                var a = Math.sin(Δφ / 2) * Math.sin(Δφ / 2) +
                    Math.cos(φ1) * Math.cos(φ2) *
                    Math.sin(Δλ / 2) * Math.sin(Δλ / 2);
                var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));

                var d = R * c;

                return d;
            }
            // markerSymbol is used for point and multipoint, see http://raphaeljs.com/icons/#talkq for more examples
            var markerSymbol = new SimpleMarkerSymbol();
            markerSymbol.setPath("M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z");
            markerSymbol.setColor(new Color("#00FFFF"));

            // lineSymbol used for freehand polyline, polyline and line.
            var lineSymbol = new CartographicLineSymbol(
                CartographicLineSymbol.STYLE_SOLID,
                new Color([255, 0, 0]), 10,
                CartographicLineSymbol.CAP_ROUND,
                CartographicLineSymbol.JOIN_MITER, 5
            );

            // fill symbol used for extent, polygon and freehand polygon, use a picture fill symbol
            // the images folder contains additional fill images, other options: sand.png, swamp.png or stiple.png
            var fillSymbol = new PictureFillSymbol(
                "images/mangrove.png",
                new SimpleLineSymbol(
                    SimpleLineSymbol.STYLE_SOLID,
                    new Color('#000'),
                    1
                ),
                42,
                42
            );

            function initToolbar() {
                tb = new Draw(map);
                tb.on("draw-end", addGraphic);

                // event delegation so a click handler is not
                // needed for each individual button
                on(dom.byId("info"), "click", function(evt) {
                    if (evt.target.id === "info") {
                        return;
                    }
                    var tool = evt.target.id.toLowerCase();
                    map.disableMapNavigation();
                    tb.activate(tool);
                });
            }

            function addGraphic(evt) {
                //deactivate the toolbar and clear existing graphics
                tb.deactivate();
                map.enableMapNavigation();

                // figure out which symbol to use
                var symbol;
                if (evt.geometry.type === "point" || evt.geometry.type === "multipoint") {
                    symbol = markerSymbol;
                } else if (evt.geometry.type === "line" || evt.geometry.type === "polyline") {
                    symbol = lineSymbol;
                } else {
                    symbol = fillSymbol;
                }

                map.graphics.add(new Graphic(evt.geometry, symbol));
            }
        });

        function mapTypeChange() {
            var typeName = $("#typeSelect").val();
            loadDataToMap(typeName);
        }


        function loadDataToMap(typeName) {
            // noflyGraphicsLayer.clear();
            require([
                "esri/graphic",
                "esri/symbols/SimpleLineSymbol",
                "esri/Color",
                "esri/symbols/SimpleFillSymbol",
                "esri/geometry/Circle",
                "esri/geometry/Polygon",
                "esri/geometry/Extent",
                "esri/geometry/Point",
                "esri/request",
                "esri/geometry/Geometry"
            ], function(
                Graphic, SimpleLineSymbol, Color, SimpleFillSymbol, Circle, Polygon, Extent, Point, esriRequest, Geometry
            ) {
                var param = {
                    "country": typeName
                }
                $.get("http://127.0.0.1:8081/queryDJIForCountry", param, function(data) {
                    var amaplist = JSON.parse(data);
                    var array = new Array();
                    console.log(amaplist);
                    //遍历 airmap数据
                    for (var j = 0; j < amaplist.length; j++) {

                        var amapdata = amaplist[j];
                        var id = amapdata._id;
                        var radius_val = amapdata.radius;

                        var lng_val = amapdata.lng;
                        var lat_val = amapdata.lat;
                        var redColor = Color.fromHex(amapdata.color);
                        //构建图形渲染
                        var circleSymb = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                            new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
                                redColor
                            ));
                        var circleGeometry = new Circle({
                            center: [lat_val, lng_val],
                            radius: radius_val
                        });
                        //var gra = new Graphic(myPolygon);
                        var graphic = new Graphic(circleGeometry, circleSymb);
                        //添加图形到地图上--主范围添加到地图上
                        map.graphics.add(graphic);

                        var sub_areas = amapdata.sub_areas;

                        if (sub_areas != null) {

                            for (var x = 0; x < sub_areas.length; x++) {
                                var sub_geometry = sub_areas[x];
                                var sub_color = sub_geometry.color;
                                var sub_radius = sub_geometry.radius;
                                var sub_lat = sub_geometry.lat;
                                var sub_lng = sub_geometry.lng;
                                var sub_redColor = Color.fromHex(sub_color);
                                //构建图形渲染
                                var sub_circleSymb = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                                    new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
                                        sub_redColor
                                    ));
                                var sub_circleGeometry = new Circle({
                                    center: [sub_lat, sub_lng],
                                    radius: sub_radius
                                });
                                //var gra = new Graphic(myPolygon);
                                var sub_graphic = new Graphic(sub_circleGeometry, sub_circleSymb);
                                //添加图形到地图上--主范围添加到地图上
                                map.graphics.add(sub_graphic);


                                //开始添加子图形
                                var polygon_points = sub_geometry.polygon_points;
                                //构建图形
                                var myPolygon = {
                                    "geometry": {
                                        "rings": polygon_points,
                                        "spatialReference": {
                                            "wkid": 4326
                                        }
                                    },
                                    "symbol": {
                                        "color": [0.6, 255, 255, 0],
                                        "outline": {
                                            "color": [178, 34, 34],
                                            "width": 1,
                                            "type": "esriSLS",
                                            "style": "esriSLSSolid"
                                        },
                                        "type": "esriSFS",
                                        "style": "esriSFSSolid"
                                    }
                                };
                                var gra = new Graphic(myPolygon);
                                noflyGraphicsLayer.add(gra);

                            }
                        }

                    }
                });
            })
        }
    </script>
</head>

<body>


    <div id="info">
        <div>Select a shape then draw on map to add graphic</div>
        <button id="Point">Point</button>
        <button id="Multipoint">Multipoint</button>
        <button id="Line">Line</button>
        <button id="Polyline">Polyline</button>
        <button id="FreehandPolyline">Freehand Polyline</button>
        <button id="Triangle">Triangle</button>
        <button id="Extent">Rectangle</button>
        <button id="Circle">Circle</button>
        <button id="Ellipse">Ellipse</button>
        <button id="Polygon">Polygon</button>
        <button id="FreehandPolygon">Freehand Polygon</button>
    </div>

    <div id="mapDiv"></div>

    <div class="selectDiv">
        <select onchange="mapTypeChange()" id="typeSelect">
                <option value="CN">中国</option>
                <option value="JP">日本</option>
                <option value="US">美国</option>
                <option value="FI">芬兰</option>

            </select>
    </div>

</body>

</html>