fuyuhang
/
Project_yhfu
mirror da http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title data-i18n="resources.title_splinesData"></title>
    <style type="text/css">
        body {
            margin: 0;
            overflow: hidden;
            background: #fff;
            width: 100%;
            height: 100%
        }

        #map {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        #toolbar {
            position: absolute;
            top: 50px;
            right: 10px;
            text-align: center;
            z-index: 100;
            border-radius: 4px;
        }
    </style>
</head>
<body>
<div id="toolbar" class="panel panel-primary">
    <div class='panel-heading'>
        <h5 class='panel-title text-center' data-i18n="resources.text_splinesData"></h5></div>
    <div class='panel-body content'>
        <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_createPoint" onclick="createPoint()"/>
        <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_createBLine" onclick="createBLine()"/>
        <input type="button" class="btn btn-default" data-i18n="[value]resources.text_input_value_clear" onclick="clearAllFeatures()"/>
    </div>
</div>
<div id="map"></div>
<script type="text/javascript" include="bootstrap,widgets.alert" src="../js/include-web.js"></script>
<script type="text/javascript" exclude="iclient-classic" src="../../dist/classic/include-classic.js"></script>
<script>
    var featuresOrigin = [];
    var map, local, layer, pointLayer, drawPoint, lineLayer, markerLayer, vector, select;
    var pointArray = [];
    var styleDraw = {
        strokeColor: "#304DBE",
        strokeWidth: 2,
        pointerEvents: "visiblePainted",
        fillColor: "#304DBE",
        fillOpacity: 0.8,
        pointRadius: 6
    };
    style = {
        strokeColor: "#304DBE",
        strokeWidth: 2,
        pointerEvents: "visiblePainted",
        fillColor: "#304DBE",
        fillOpacity: 0.8
    };

    var style_green = {
        strokeColor: "#FFF",
        strokeOpacity: 1,
        strokeWidth: 2,
        pointRadius: 6,
        pointerEvents: "visiblePainted",
        fillColor: '#545BF4'
    };

    var style_green1 = {
        strokeColor: "#FFF",
        strokeOpacity: 1,
        strokeWidth: 2,
        pointRadius: 6,
        pointerEvents: "visiblePainted",
        fillColor: '#50E7F8'
    };

    var style_green2 = {
        strokeColor: "#FFF",
        strokeOpacity: 1,
        strokeWidth: 2,
        pointRadius: 6,
        pointerEvents: "visiblePainted",
        fillColor: '#0C9CFE'
    };
    var style1 = {
        fillColor: '#F00',
        fillOpacity: 0.6,
        strokeWidth: 0
    };

    var style2 = {
        fillColor: '#0F0',
        fillOpacity: 0.6,
        strokeWidth: 0
    };

    var style3 = {
        fillColor: '#00F',
        fillOpacity: 0.6,
        strokeWidth: 0
    };
    var host = window.isLocal ? window.server : "https://iserver.supermap.io",
        url = host + "/iserver/services/map-china400/rest/maps/China";
    init();

    function init() {
        //新建点矢量图层
        pointLayer = new SuperMap.Layer.Vector("pointLayer");
        //对点图层应用样式styleDraw（前面有定义）
        pointLayer.style = styleDraw;
        drawPoint = new SuperMap.Control.DrawFeature(pointLayer, SuperMap.Handler.Point);
        drawPoint.events.on({"featureadded": drawCompleted});
        //新建线矢量图层
        lineLayer = new SuperMap.Layer.Vector("lineLayer");
        //对线图层应用样式styleDraw（前面有定义）
        lineLayer.style = styleDraw;


        //定义layer图层，TiledDynamicRESTLayer：分块动态 REST 图层
        layer = new SuperMap.Layer.TiledDynamicRESTLayer("China", url, {
            transparent: true,
            cacheEnabled: true
        }, {maxResolution: "auto", useCanvas: false});
        //为图层初始化完毕添加addLayer()事件
        layer.events.on({"layerInitialized": addLayer});
        map = new SuperMap.Map("map", {
            controls: [
                new SuperMap.Control.OverviewMap(),
                new SuperMap.Control.ScaleLine(),
                new SuperMap.Control.Zoom(),
                new SuperMap.Control.Navigation({
                    dragPanOptions: {
                        enableKinetic: true
                    }
                }), drawPoint
            ]
        });
        map.addControl(new SuperMap.Control.LayerSwitcher(), new SuperMap.Pixel(42, 80));
    }

    function addLayer() {
        map.addLayers([layer, pointLayer, lineLayer]);
        map.setCenter(new SuperMap.LonLat(11733502.481499, 4614406.969325), 4);
    }

    //绘制点
    function createPoint() {
        widgets.alert.clearAlert();
        drawPoint.activate();
    }

    //绘制B样条线
    function createBLine() {
        widgets.alert.clearAlert();
        if (pointArray.length < 2) {
            widgets.alert.showAlert(resources.msg_drawTwoPoint, false, 240);
            return;
        }
        drawPoint.deactivate()
        var geo1 = SuperMap.Geometry.LineString.createBspline(pointArray, 10);
        var vector1 = new SuperMap.Feature.Vector(
            geo1,
            {},
            styleDraw
        );
        lineLayer.addFeatures([vector1]);
    }

    function drawCompleted(drawGeometryArgs) {
        var feature = drawGeometryArgs.feature;
        var geometry = feature.geometry;
        //将每次绘制的点存起来
        pointArray.push(geometry);

        //停止画点面控制
        //drawPoint.deactivate();
    }

    //移除整个图层要素
    function clearAllFeatures() {
        widgets.alert.clearAlert();
        pointArray = [];
        pointLayer.removeAllFeatures();
        lineLayer.removeAllFeatures();
    }

</script>
</body>
</html>