zoukankan      html  css  js  c++  java
  • 动态标绘演示系统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',  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);
    };
  • 相关阅读:
    如何实现一个串行promise
    单机,分布式和集群的区别
    ERP & CRM
    CDN working principle diagram
    公众平台服务号、订阅号、企业号的相关说明
    DMZ的原理与应用
    ICP备案接入商
    DMZ主机
    浅析localstorage、sessionstorage
    Repeater+AspNetPager+Ajax留言板
  • 原文地址:https://www.cnblogs.com/liguangsunls/p/6715027.html
Copyright © 2011-2022 走看看