动态标绘演示系统1.0(for OpenLayers3)

实现OpenLayers3(http://openlayers.org)版本的动态标绘API。目前1.0版本,仅支持简单符号绘制。

在线体验地址:http://gispace.duapp.com/plot4ol3

示例代码下载: 点击进入下载页

示例代码如下:

var map, plotDraw, drawOverlay, drawStyle; function init(){ // 初始化地图,底图使用openstreetmap在线地图 map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ //source: new ol.source.MapQuest({layer: 'sat'}) source: new ol.source.Stamen({ layer: 'watercolor' }) }) ], view: new ol.View({ center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'), zoom: 4 }) }); // 初始化标绘绘制工具,添加绘制结束事件响应 plotDraw = new gispace.tool.PlotDraw(map); plotDraw.on(gispace.event.PlotDrawEvent.DRAW_END, onDrawEnd, false, this); // 设置标绘符号显示的默认样式 var stroke = new ol.style.Stroke({color: '#FF0000', width: 2}); var fill = new ol.style.Fill({color: 'rgba(0,255,0,0.4)'}); drawStyle = new ol.style.Style({fill:fill, stroke:stroke}); // 绘制好的标绘符号,添加到FeatureOverlay显示。 drawOverlay = new ol.FeatureOverlay(); drawOverlay.setStyle(drawStyle); drawOverlay.setMap(map); } // 绘制结束后,添加到FeatureOverlay显示。 function onDrawEnd(event){ var feature = event.feature; drawOverlay.addFeature(feature); } // 指定标绘类型,开始绘制。 function activate(type){ plotDraw.activate(type); };

你可能感兴趣的:(动态标绘,态势标绘)