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的强大还可以体现在很多地方,后续我们在和大家分享.
