SuperMap iClient 9D for OpenLayers 快速入門

作者：doremi

随着SuperMap 9D産品的釋出，帶來了全新的SuperMap iClient 9D産品。今天就為大家介紹下其中的一款SuperMap iClient 9D for OpenLayers的入門用法。

####産品介紹

SuperMap iClient 9D for OpenLayers是一套基于OpenLayers的雲GIS網絡用戶端開發平台，支援通路SuperMap iServer/IExpress/iPortal/iManager/Online的地圖、服務和資源，為使用者提供了完整專業的GIS能力，同僚提供了優秀的可視化功能。

####快速入門

第一步：産品下載下傳并解壓

下載下傳SuperMap iClient 9D for OpenLayers源碼或者壓縮包，解壓檔案

下載下傳位址：

GitHub托管位址：https://github.com/SuperMap/iClient9/tree/master/src/openlayers

OSChina托管位址：https://gitee.com/isupermap/iClient9/tree/master/src/openlayers

第二步：引用資源檔案

需要引用ol.js,iclient9-openlayers.js檔案

<script type="text/javascript" src="https://cdn.bootcss.com/openlayers/4.2.0/ol.js"></script>
<script type="text/javascript" src="http://iclient.supermap.io/dist/iclient9-openlayers.js"></script>
           

第三步：添加承載地圖的< div >

<div id="map" style="margin:0 auto;width:100%;height:100%;"></div>
           

第四步：寫入JavaScript代碼建立地圖

var map = new ol.Map({
    target: 'map',
    layers: [new ol.layer.Tile({
            source: new ol.source.TileSuperMapRest({
                    url: "http://localhost:8090/iserver/services/map/rest/maps/World"
            }),
     })]
});
           

運作效果

這樣一個簡單的地圖我們就建立成功了，可以看出所需的代碼量非常的少。接下來給大家介紹一些常用的功能。

####常用控件

在SuperMap iClient 9D for OpenLayers中還有很多非常實用的控件，像鷹眼（OverView），全幅顯示（ZoomToExtent），滑鼠位置（MousePosition），全屏顯示（FullScreen）等。

添加控件有兩種方法，第一種是map初始化的時候，在controls屬性中直接添加；第二種是使用map.addControl()方法進行添加。現在我們就來進行添加

map = new ol.Map({
        target:'map',
        controls:ol.control.defaults({attributionOptions:{collapsed:false}}).extend([
                new ol.supermap.control.Logo(),
                new ol.control.FullScreen(),
                new ol.control.ZoomToExtent({
                    extent:[7494062.9295,119581.2150, 16426799.7795,7995652.6095]
                }),
                new ol.control.MousePosition({
                    coordinateFormat:ol.coordinate.createStringXY(4),
                    projection:'EPSG:3857',
                    className:'custom-mouse-position',
                    target:document.getElementById('mouse-position'),
                    undefinedHTML:' '
                })
        ]),
        view:new ol.View({
            center:[0,0],
            zoom:1,
            projection:'EPSG:3857'
        })
    });
    var overView = new ol.control.OverviewMap();
    map.addControl(overView);
           

運作效果：

左上角“E”圖示是全幅顯示控件，左下角是鷹眼控件，右上角是滑鼠位置控件和全屏顯示控件。

####添加marker，點選互動

第一步，添加自定義marker

建立feature對象和feature的樣式并将樣式賦予feature，再将feature添加到vector圖層中

var iconFeature = new ol.Feature({
        geometry:new ol.geom.Point([0,0]),
        name: 'Null Island',
        population: 4000,
        rainfall: 500
    });
    var iconStyle = new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
            anchor: [0.5, 46],
            anchorXUnits: 'fraction',
            anchorYUnits: 'pixels',
            src: 'https://openlayers.org/en/v4.6.4/examples/data/icon.png'
        }))
    });
    iconFeature.setStyle(iconStyle);
    var vectorSource = new ol.source.Vector({
        features: [iconFeature]
    });
    var vectorLayer = new ol.layer.Vector({
        source: vectorSource
    });
    map.addLayer(vectorLayer);
           

第二步，建立popup

添加popup的DOM對象，定義它的CSS樣式，添加承載popup的overlay圖層

<div id="popup" class="ol-popup">
      <a href="#" target="_blank" rel="external nofollow"  id="popup-closer" class="ol-popup-closer"></a>
      <div id="popup-content"></div>
    </div>
           

var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
var overlay = new ol.Overlay({
        element: container,
        autoPan: true,
        autoPanAnimation: {
          duration: 250
        }
});
map = new ol.Map({
        target:'map',
        view:new ol.View({
            center:[0,0],
            zoom:2,
            projection:'EPSG:4326'
        }),
        overlays:[overlay]
    });
           

第三步，添加選擇控件

添加ol,interaction.Select()控件，并注冊點選事件

var select = new ol.interaction.Select();
    map.addInteraction(select);
    select.on('select',function(e){
        var feature = e.selected[0];
        content.innerHTML = 'I am a custom symbol';
        overlay.setPosition(feature.getGeometry().getCoordinates());
    });
           

運作代碼，我們自定義的marker就成功添加到地圖中了，并且能夠點選互動，彈出氣泡框。

要素繪制

SuperMap iClient 9D for OpenLayers給我們提供了非常友善的要素繪制控件，我們可以在vector圖層上畫出任意我們想要的點線面對象。

調用ol.interaction.Draw()，通過改變不同的type添加到map控件中使能夠在地圖上繪制出不同的幾何對象。包括點（Point），線（LineString）,多邊形（Polygon），圓（Circle）

var typeSelect = document.getElementById('type');
function addInteraction() {
        var value = typeSelect.value;
        if (value !== 'None') {
            draw = new ol.interaction.Draw({
                source: source,
                type: typeSelect.value
            });
            map.addInteraction(draw);
        }
}
typeSelect.onchange = function() {
        map.removeInteraction(draw);
        addInteraction();
      };
addInteraction();
           

以上的話就是SuperMap iClient 9D for OpenLayers的入門介紹，想了解更多的API介紹和炫酷Demo可以通路我們的SuperMap iClient 9D官網http://icltest.supermapol.com/