openlayers 편집 영역





    
    
    <link rel="stylesheet" href="lib/OpenLayers/ol.css" type="text/css"/>

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"/>
    <script src="lib/OpenLayers/ol.js"/>
    <script src="olStyle/Light.js"/>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        .map {
            width: 100%;
            height: 100%;
            background: #f6f6f4;
        }
    </style>



    <div id="map" class="map" data-id="11"/>
    <script type="text/javascript">  

        $(function () {

            InitMap();

            AddPolygon();

            // 
            EditArea();

        })

        var map;

        var layer = new ol.layer.Vector({
            source: new ol.source.Vector(),
            style: new ol.style.Style({
                fill: new ol.style.Fill({
                    color: 'rgba(255, 0, 0, 0.5)'
                }),
                stroke: new ol.style.Stroke({
                    color: 'red',
                    width: 2
                }),
                image: new ol.style.Circle({
                        // 
                        radius: 7,
                        // 
                        fill: new ol.style.Fill({
                            // 
                            color: '#e81818'
                        })
                    })
            })
        });

        // 
        function InitMap() {
            map = new ol.Map({
                layers: [new ol.layer.Vector({
                    source: new ol.source.Vector()
                    }),
                    style: function (feature, resolution) {
                        switch (feature.get('layer')) {
                            case 'poi':
                                poiStyle.getText().setText(feature.get('name'));
                                return poiStyle;
                            case 'boundary': return boundaryStyle;
                            case 'lawn': return lawnStyle;
                            case 'road':
                                roadStyle.getText().setText(feature.get('name'));
                                return (resolution < 2) ? roadStyle : null;
                            case 'building':
                                return buildingStyle(feature, resolution);
                            case 'other':
                                otherStyle.getText().setText(feature.get('name'));
                                return otherStyle;
                            default: return null;
                        }
                    }
                }), layer],
                target: 'map',
                view: new ol.View({
                    center: ol.proj.fromLonLat([120.277, 36.330]),
                    minZoom: 1,
                    zoom: 16
                })
            });
        }
        
        /* **********************************************************************************/
        function AddPolygon() {
            layer.getSource().clear();

            // var points = [[
            //     ol.proj.fromLonLat([120.27681827545163, 36.33236136226455]),
            //     ol.proj.fromLonLat([120.28038024902342, 36.33141061727086]),
            //     ol.proj.fromLonLat([120.27681827545163, 36.33001040806349]),
            //     ol.proj.fromLonLat([120.27681827545163, 36.33236136226455])
            // ]]

            // var plygon = new ol.geom.Polygon(points)
            // // 
            // var feature = new ol.Feature({
            //     geometry: plygon
            // });

            //var points = ol.proj.fromLonLat([120.27611017227173,36.331306898933306]);
            var points = [13389075.33897296,4346304.97458048]

            var plygon = new ol.geom.Circle(points,294)
            var feature = new ol.Feature({
                geometry: plygon
            });

            layer.getSource().addFeature(feature);

        }

        function EditArea() {

            modify = new ol.interaction.Modify({
                source: layer.getSource(),
            });
            //modify.setActive(true);
            modify.on("modifyend", function () {
                //  
                // var features = layer.getSource().getFeatures();

                // var geometry = features[0].getGeometry();

                // var points;
                // var lnglat = [];

                // points = geometry.getCoordinates()[0];

                // for (var i = 0; i < points.length; i++) {
                //     lnglat.push(ol.proj.transform(points[i], 'EPSG:3857', 'EPSG:4326'));
                // }

                // console.log(lnglat);
            })
            map.addInteraction(modify);
        }


    </script>



</code></pre> 
   </div> 
   <p>　　</p> 
  </div> 
  <p> :https://www.cnblogs.com/zhoushangwu/p/9449011.html</p> 
 </div> 
</div>
                            </div>
                        </div>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

openlayers 편집 영역

좋은 웹페이지 즐겨찾기