openlayers 지도 표시점

3958 단어




    
    
    <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();
        })

        var map;
        var layer;

        // 
        function InitMap() {
            // 
            layer = new ol.layer.Vector({
                source: new ol.source.Vector(),
                    overlaps: false,
                    wrapX: false
                }),
                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;
                    }
                }
            });

            map = new ol.Map({
                layers: [layer],
                target: 'map',
                view: new ol.View({
                    center: ol.proj.fromLonLat([120.277, 36.330]),
                    minZoom: 1,
                    zoom: 16
                })
            });
        }

        /* **********************************************************************************/


        function createLabelStyle(feature) {
            // 
            return new ol.style.Style({
                // ICON 
                fill: new ol.style.Fill({
                    // 
                    color: 'rgba(37,241,239,0.2)'
                }),
                // , 
                image: new ol.style.Circle({
                    // 
                    radius: 7,
                    // 
                    fill: new ol.style.Fill({
                        // 
                        color: '#e81818'
                    })
                }),
                // 
                zIndex: 20
            });
        };

        function AddPolygon() {

            var coordinate = ol.proj.fromLonLat([120.277, 36.330]);

            var newFeature = new ol.Feature({
                geometry: new ol.geom.Point(coordinate)
            });

            // 
            newFeature.setStyle(createLabelStyle(newFeature));

            // 
            //layer.getSource().clear();

            // 
            layer.getSource().addFeature(newFeature);
        }



    </script>



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

좋은 웹페이지 즐겨찾기