Web gis之openlayers的开发入门心得

Gis是地理信息系统(Geographic Information System),它是在计算机软/硬件的支持下,以采集\存储\管理\检索\分析和描述空间物体的定位分布及与之相关的属性数据.

而web gis又是如何?web gis是指网络地理信息系统.它是基本网络平台,客户端应用软件采用网络协议运行在网络上的地理信息系统.Web gis市场需求旺盛,更多的人开始关注web gis应用.Openlayers是一个专为web gis客户端开发提供的js类库,用于访问以标准格式发布的地图数据,实现访问空间数据的方法都符合行业标准,支持各种公开的和私有的数据标准和资源.

在实战项目中,Nvisual地图模式就是以openlayers 6版本进行二次开发,它丰富的API\控件及事件机制可以快速开发出一款简单的地图应用.

我们以上述地图为例讲解.

1.生成一个地图实例,我们只需要如下代码:

const map = new Map({

   target: ‘map’,

   view: new View({

      center: [0,0],

      zoom: 3

    })

})

这样在页面上,ID为map的dom元素会加载openlayers生成的地图,但是因为我没有加载图层,暂时看不到任何地理信息.

2.我们以添加一个高德地图为例

map.addLayer(

  new TileLayer({

source: new XYZ({ url: ‘http://wprd0{1-4}.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}&lang=zh_cn’ })

  })

)

这样页面上就可以看到一张地图的样子.

3.接下来,我们添加可以交互的控件,缩放控件.

注意:我们在初始化时并没有指定控件,所以在后续的添加中,实现略有不同.

map.getInteractions().forEach(interaction => {

  if (interaction instanceof MouseWheelZoom) {

  interaction.setActive(isActive);

  }

})

这样我们就以动态的方式添加上了可缩放控件,如图:

4.那么我们如果要实现自定义的缩放按钮呢?如图:

我们将会用到openlayers提供的方法setZoom,代码如下:

当前的zoom = 3;

放大map.getView().setZoom(++zoom)

缩小map.getView().setZoom(--zoom)

5.我们处理了人机交互的部分,接下来也是最后一个,我们要根据地图图层的渲染情况来处理数据.

介绍三个常用的方法:

1.地图渲染开始前:map.on('movestart', () => {})

2.地图渲染结束后:map.on('moveend', () => {})

3.其中一个地图图层渲染后:map.on('postrender', () => { });

以上就是我们示图中所应用到的代码举例说明,实际上,在Nvisual的地图模式开发中,我们还应用到了自定义控件,集束等功能并且结合了HT类库协同开发,使用场景也比示例中复杂的多,所以openlayers的强大还可以体现在很多地方,后续我们在和大家分享.