OpenLayersを動的測定距離や面積、および測定線のスタイルをカスタマイズ

その他 2020-01-15 11:10:08 訪問数: null

グローバル操作変数

/ * *
 * @descriptionラベルポップアップボックス
 * / 
HTMLポップアップ = nullを。
/ * *
 * @description一時的な層のクラスのデータソース
 * / 
VectorSource = nullを。
/ * *
 * @description描画ツール
 * / 
ドロー = nullを。

    measureTooltipElementをしましょう。
    measureTooltipましょう = HtmlPopup。
    drawingFeatureましょう = nullを。

 

 

動的な測定距離

 // 动态测量距离
    この .dynamicLengthMeasure = 関数（_MAP、_measureLengthStyle、_measureTooltipStyle、_measureEndCallback）{
        measureTooltipElement =のdocument.createElement（ "DIV" ）;
         // 一時停止を描画するための
        IFを（！=ドローはnull ）{
            _map.removeInteraction（描画）。
            ドロー = nullを。
        }
        もし（_measureLengthStyle）{
            ドロー = 新しい新しいol.interaction.Draw（{
                 // ペイント層データソース
                出典：VectorSource、
                 / * * @type} {ol.geom.GeometryTypeジオメトリタイプ* / 
                タイプ：「ラインストリング」、
                 // 形状が変更されたときに呼び出されます機能
                // geometryFunction：geometryFunction、 
                FreeHandの：偽、
                スタイル：_measureLengthStyle
            }）;
        } 他{
            ドロー = 新しい新しいol.interaction.Draw（{
                 // ペイント層データソース
                出典：VectorSource、
                 / * * @type} {ol.geom.GeometryTypeジオメトリタイプ* / 
                タイプ：「ラインストリング」、
                 // 形状が変更されたときに呼び出されます機能
                // geometryFunction：geometryFunction、 
                FreeHandの：偽、
            }）;
        }

        _map.addInteraction（描画）。
        Draw.on（ 'drawstart'、関数（E）{
             場合（_measureLengthStyle）{
                e.feature.setStyle（_measureLengthStyle）。
            }
            measureTooltip = createMeasureTooltip（measureTooltip、_measureTooltipStyle、_MAP）。
            drawingFeature = e.feature。
            tooltipCoordましょう = e.coordinate。
            drawingFeature.getGeometry（）。（上の '変更'、関数（EVT）{
                GEOMましょう = evt.target。
                出力せ = geom.getLengthを（）;
                もし（出力> 100 ）{
                    出力 =（恐らくMath.round（出力/ 1000 * 100）/ 100）+ 'キロ' ;
                } 他{
                    出力 =（恐らくMath.round（出力×100）/ 100）+ 'M' 。
                }
                tooltipCoord = geom.getLastCoordinate（）。
                measureTooltipElement.innerHTML = 出力。
                measureTooltip.setPosition（tooltipCoord）。
            }）;
        }）;
        Draw.on（ 'drawend'、関数（E）{
            _map.removeInteraction（描画）。
            ドロー = nullを。
            もし（_measureLengthStyle）{
                e.feature.setStyle（_measureLengthStyle）。
            }
            measureTooltip = createMeasureTooltip（measureTooltip、_measureTooltipStyle、_MAP）。
            drawingFeature = e.feature。
            出力せ = 。e.feature.getGeometry（）のgetLength（）;
            もし（出力> 100 ）{
                出力 =（恐らくMath.round（出力/ 1000 * 100）/ 100）+ 'キロ' ;
            } 他{
                出力 =（恐らくMath.round（出力×100）/ 100）+ 'M' 。
            }
            聞かせてtooltipCoord = e.feature.getGeometry（）getLastCoordinate（）;
            measureTooltipElement.innerHTML = 出力。
            measureTooltip.setPosition（tooltipCoord）。

            もし（_measureEndCallback）{
                measureEndCallbackkObjせ = {};
                measureEndCallbackkObj.feature = e.feature。
                measureEndCallbackkObj.length = 出力。
                _measureEndCallback（measureEndCallbackkObj）。
            }
        }）;
        関数createMeasureTooltip（measureTooltip、_param、_MAP）{
             場合（_param == NULL || _param == {未定義）
                _param = {};
            }
            measureTooltipElement.className = _param.className || 'OL-オーバーレイ容器OL-選択' ;
            measureTooltipElement.id = 'measureLength_DIV' ;
            measureTooltip = 新しいol.Overlay（{
                要素：measureTooltipElement、
                ID： 'measureLength_DIV' 、
                オフセット：_param.offset || [0、-15 ]、
                ポジショニング：_param.positioning ||「ボトムセンター」    // 示す位置を
            }）。
            _map.addOverlay（measureTooltip）。
            リターンmeasureTooltip;
        }
    }。

 

 

 

 

ダイナミックな測定エリア

//动态测量面积
    this.dynamicAreaMeasure = function (_map,_measureAreaStyle,_measureTooltipStyle,_measureEndCallback) {
        // if (measureTooltipElement) {
        //     measureTooltipElement.parentNode.removeChild(measureTooltipElement)
        // }
        measureTooltipElement = document.createElement("div");
        //暂停绘制
        if (Draw != null) {
            _map.removeInteraction(Draw);
            Draw = null;
        }
        if(_measureAreaStyle){
            Draw = new ol.interaction.Draw({
                //绘制层数据源
                source: VectorSource,
                /** @type {ol.geom.GeometryType}几何图形类型 */
                type: 'Polygon',
                //几何信息变更时调用函数
                //geometryFunction: geometryFunction,
                freehand: false,
                style:_measureAreaStyle
            });
        }else{
            Draw = new ol.interaction.Draw({
                //绘制层数据源
                source: VectorSource,
                /** @type {ol.geom.GeometryType}几何图形类型 */
                type: 'Polygon',
                //几何信息变更时调用函数
                //geometryFunction: geometryFunction,
                freehand: false,
            });
        }

        _map.addInteraction(Draw);
        Draw.on('drawstart', function (e) {
            if(_measureAreaStyle){
                e.feature.setStyle(_measureAreaStyle);
            }

            measureTooltip = createMeasureTooltip(measureTooltip,_measureTooltipStyle,_map);

            drawingFeature = e.feature;
            let tooltipCoord = e.coordinate;
            drawingFeature.getGeometry().on('change',function (evt) {
                let geom = evt.target;
                let output = geom.getArea();
                if (output > 10000) {
                    output = (Math.round(output / 1000000 * 100) / 100) + ' km<sup>2</sup>'
                } else {
                    output = (Math.round(output * 100) / 100) + ' m<sup>2</sup>'
                }
                tooltipCoord = geom.getLastCoordinate();
                measureTooltipElement.innerHTML = output;
                measureTooltip.setPosition(tooltipCoord);
            });
        });
        Draw.on('drawend', function (e) {
            _map.removeInteraction(Draw);
            Draw = null;
            if(_measureAreaStyle){
                e.feature.setStyle(_measureAreaStyle);
            }
            // drawingFeature = null;
            // measureTooltipElement = null;
            // measureTooltip = createMeasureTooltip(measureTooltip,_measureTooltipStyle,_map);
            // createMeasureTooltip(measureTooltip,_measureTooltipStyle,_map);
            measureTooltip = createMeasureTooltip(measureTooltip,_measureTooltipStyle,_map);
            drawingFeature = e.feature;
            // let tooltipCoord = e.coordinate;
            // let geom = e.target;
            let output = e.feature.getGeometry().getArea();
            if (output > 10000) {
                output = (Math.round(output / 1000000 * 100) / 100) + ' km<sup>2</sup>'
            } else {
                output = (Math.round(output * 100) / 100) + ' m<sup>2</sup>'
            }
            let tooltipCoord = e.feature.getGeometry().getLastCoordinate();
            measureTooltipElement.innerHTML = output;
            measureTooltip.setPosition(tooltipCoord);

            if(_measureEndCallback){
                let measureEndCallbackkObj = {};
                // measureEndCallbackkObj.attributes={};
                measureEndCallbackkObj.feature=e.feature;
                measureEndCallbackkObj.length = output;
                // measureEndCallbackkObj.attributes.x = (e.feature.getGeometry().getExtent()[0]+e.feature.getGeometry().getExtent()[2])/2;
                // measureEndCallbackkObj.attributes.y = (e.feature.getGeometry().getExtent()[1]+e.feature.getGeometry().getExtent()[3])/2;
                _measureEndCallback(measureEndCallbackkObj);
            }
        });
        function createMeasureTooltip(measureTooltip,_param,_map) {
            // if (measureTooltipElement) {
            //     measureTooltipElement.parentNode.removeChild(measureTooltipElement)
            // }
            // measureTooltipElement = document.createElement("div");
            // if(_param){
            if(_param==null||_param==undefined){
                _param={};
            }
            measureTooltipElement.className = _param.className||'ol-overlay-container ol-selectable';
            measureTooltipElement.id='measureArea_DIV';
            measureTooltip = new ol.Overlay({
                id:'measureArea_DIV',
                element: measureTooltipElement,
                offset: _param.offset||[0, -15],
                positioning: _param.positioning||'bottom-center'
            });
            // }
            _map.addOverlay(measureTooltip);
            return measureTooltip;
        }

おすすめ

転載: www.cnblogs.com/yangzhengier/p/12195534.html
おすすめ
ランキング
1028リストの並べ替え（25分）
pom.xml ファイルがアイデアによって認識されません
単一テーブルのデータのSQLクエリ組み合わせ（C）
gitのinitとgitの初期化-bare違いやソースファイルなしで問題を解決するには、WWWで見ることができません
BULLETエンジンスターター - コンパイル（cmakeのとPreMake）
vue-crossドメインの問題
ThingsBoard フロントエンド プロジェクトの組み込みコンポーネント開発
単元の学習過程での難しい問題とその解決策 -----(1)
MongoDBのデータは、クライアントで表示することができますが、作業はコマンドラインでlinuxでありません
How to check your PYTHONPATH environment variable
アーカイブ
もっと
2024-06-02(0)
2024-06-01(1)
2024-05-31(1)
2024-05-30(0)
2024-05-29(1)
2024-05-28(0)
2024-05-27(1)
2024-05-26(0)
2024-05-25(1)
2024-05-24(11)

コードワールド

© 2018 codetd.com