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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title data-i18n="resources.title_infoWindow"></title>
    <script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
    <script type="text/javascript" exclude="iclient-classic" include="nanoscroller,infoWindow"
            src="../../dist/classic/include-classic.js"></script>
    <style type="text/css">
        body {
            margin: 0;
            overflow: hidden;
            background: #fff;
            width: 100%;
            height: 100%
        }

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

        /*用户自定义*/
        #pop-content {
            right: 0 !important;
            padding-left: 10px;
            color: #000;
            word-wrap: break-word;
        }

        /*滚动条样式*/
        div.nano-pane {
            margin-right: 10px;
            margin-top: 3px;
        }

        .nano > .nano-pane {
            background-color: transparent;
            width: 1px;
            display: block;
            opacity: 1;
            visibility: visible;
        }

        .nano > .nano-pane > .nano-slider {
            background: #DEDEDE;
            width: 6px;
            transform: translate(0px, 43px);
        }

    </style>
</head>
<body>
<div id="map"></div>
<script>
    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
    var map, layerWorld, marker, markers;
    var vectorLayer, feature;
    var featurePop, markerPop;
    var url = host + "/iserver/services/map-world/rest/maps/World";

    init();

    function init() {

        //map上添加控件
        map = new SuperMap.Map("map", {
            controls: [
                new SuperMap.Control.ScaleLine(),
                new SuperMap.Control.Zoom(),
                new SuperMap.Control.LayerSwitcher(),
                new SuperMap.Control.Navigation({  //添加导航控件到map
                    dragPanOptions: {
                        enableKinetic: true    //拖拽动画
                    }
                })]
        });

        //定义layerWorld图层，获取图层服务地址
        layerWorld = new SuperMap.Layer.TiledDynamicRESTLayer("World", url);
        //为图层初始化完毕添加layerInitialized事件
        layerWorld.events.on({"layerInitialized": addLayer});

        //初始化矢量图层类
        vectorLayer = new SuperMap.Layer.Vector("vectorLayer");
        var selectControl = new SuperMap.Control.SelectFeature(vectorLayer, {
            onSelect: onFeatureSelect
        });
        map.addControl(selectControl);
        selectControl.activate();

        //初始化标记图层类
        markers = new SuperMap.Layer.Markers("Markers");

        //初始化popup类
        markerPop = new SuperMap.InfoWindow(
            "marker"
        );
    }

    //定义addLayer函数，触发 layerInitialized事件会调用此函数
    function addLayer() {
        //map上添加分块动态REST图层和标记图层
        map.addLayers([layerWorld, vectorLayer, markers]);
        map.setCenter(new SuperMap.LonLat(23, 38), 4);
        addFeature();
        addMarker();
    }

    //定义addMarker函数，触发layerInitialized事件会调用此函数
    function addMarker() {
        size = new SuperMap.Size(21, 25);
        offset = new SuperMap.Pixel(-(size.w / 2), -size.h);
        var icon = new SuperMap.Icon('./images/markerbig_select.png', size, offset);
        //初始化标记覆盖物类
        marker = new SuperMap.Marker(new SuperMap.LonLat(23.6530190, 37.9439259), icon);
        //添加覆盖物到标记图层
        markers.addMarker(marker);
        //注册 click 事件,触发 mouseClickHandler()方法
        marker.events.on({
            "click": mouseClickHandler,
            "touchstart": mouseClickHandler     //假如要在移动端的浏览器也实现点击弹框，则在注册touch类事件
        });
    }

    //定义addFeature函数，触发layerInitialized事件会调用此函数
    function addFeature() {
        var point = new SuperMap.Geometry.Point(53, 38);
        feature = new SuperMap.Feature.Vector(point, {
            "SmID": "17",
            "CAPITAL": "普拉亚",
            "CAPITAL_EN": "Praia",
            "COUNTRY": "佛得角",
            "COUNTRY_EN": "Cape Verde",
            "SmGeometrySize": "16",
            "SmX": "-23.5209955",
            "SmY": "14.9229990",
            "USERID": "0"
        });
        vectorLayer.addFeatures(feature);
    }

    //定义mouseClickHandler函数，触发click事件会调用此函数
    function mouseClickHandler() {
        markerPop.titleBox = false;
        markerPop.contentSize = new SuperMap.Size(300, 200);
        markerPop.render();
        //设置弹窗的位置
        markerPop.setLonLat(this.getLonLat(), {x: 0, y: 0});
        //设置弹窗的内容
        markerPop.setContentHTML(null, '<div id="pop-content">' + 'SmID  :  31' + "<br>" +
            resources.text_district + "<br>" +
            resources.text_organization + "<br>" +
            resources.text_serviceType + "<br>" +
            '<p>'+resources.text_note +
            resources.text_featureStyle +
            resources.text_needModify+'</p></div>');
        //添加弹窗到map图层
        map.addPopup(markerPop);
    }

    // Feature 选中事件响应
    function onFeatureSelect(feature) {
        featurePop = new SuperMap.InfoWindow(
            "feature",
            resources.text_featureInfo
        );
        featurePop.hide();
        featurePop.titleBox = true;
        featurePop.contentSize = new SuperMap.Size(300, 200);
        featurePop.render();
        featurePop.show(null, feature);
        var lonLat = new SuperMap.LonLat(feature.geometry.x, feature.geometry.y);
        featurePop.setLonLat(lonLat, {x: 0, y: 0});
        //添加弹窗到map图层
        map.addPopup(featurePop);

        /*使用jquery的滚动条插件 jquery.nanoscroller.min.js
         *此插件依赖于jquery
         *还需引入此插件的css样式，还可以在此样式上进行修改
         * */
        document.getElementById("feature_contentDiv").className = "nano";
        document.getElementById("feature_groupDiv").className = "nano-content";
        $(".nano").nanoScroller();
    }

    // Feature取消选中事件响应
    function onFeatureUnselect() {
        featurePop.destroy();
    }
</script>

</body>
</html>