SuperMap iClient 9D for OpenLayers 快速入门

原创 2018年01月02日 16:04:31

作者: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:'&nbsp;'
                })
        ]),
        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="#" 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/

版权声明:本文为博主原创文章,欢迎转载,SuperMap技术问答社区 http://ask.supermap.com

OpenLayers 瓦片数据源(ol.source.Tile)解析

本文讨论内容是瓦片数据源(ol.source.Tile),主要从官方API文档入手,结合个人理解和案例进行展开。 首先看一下OpenLayers的地图图层数据源的层次结构,对ol.source.Sou...
  • u014452141
  • u014452141
  • 2017年05月16日 15:39
  • 772

OpenLayers 3 之 地图图层数据来源(ol.source)详解

source 是 Layer 的重要组成部分,表示图层的来源,也就是服务地址。除了在构造函数中制定外,可以使用 layer.setSource(source) 稍后指定。一、包含的类型 ol.sour...
  • qingyafan
  • qingyafan
  • 2015年05月24日 10:27
  • 9795

Openlayers入门经典例子

openlayers入门经典例子
  • linlzk
  • linlzk
  • 2013年12月11日 15:18
  • 49639

SuperMap iClient for JavaScript常见问题解答集锦(一)

作者:朝阳 SuperMap iClient for JavaScript常见问题解答集锦(一)
  • supermapsupport
  • supermapsupport
  • 2016年08月16日 16:46
  • 1785

关于OpenLayers的地图可视化

题记 关于可视化,不同的人有不同的理解,特别是在地理信息与大数据相结合的今天,可视化也越来越被大家提及,当然,本博所述的可视化并不是纯大数据的可视化,但是希望通过此次关于OpenLayers可视化效果...
  • chinagissoft
  • chinagissoft
  • 2016年09月18日 09:28
  • 1262

02-SuperMap iClient for JavaScript_快速入门.pdf

  • 2017年11月21日 10:36
  • 606KB
  • 下载

SuperMap iClient3D for WebGL产品包更新--201702

SuperMap iClient3D for WebGL将于每月更新一次产品包,目前已更新至2017年02月版本。 下载SuperMap iClient3D for WebGL最新产品包请点击:下载...
  • supermapsupport
  • supermapsupport
  • 2017年02月09日 15:06
  • 774

SuperMap iClient 7C(2015) for 3D那些你不知道的事儿

一、前期准备 软件版本 由于是一个B/S结构的项目,客户端采用SuperMap iClient 7C(2015) for 3D。当前SuperMap iClient 7C(2015) ...
  • u010763324
  • u010763324
  • 2017年01月09日 11:17
  • 564

SuperMap iClient for 3D 标签专题图

  • 2017年12月14日 09:19
  • 3.56MB
  • 下载

SuperMap iClient for 3D 加载天地图服务

  • 2017年12月13日 17:13
  • 365KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:SuperMap iClient 9D for OpenLayers 快速入门
举报原因:
原因补充:

(最多只允许输入30个字)