【openlayers 4 示例】

最新推荐文章于 2022-01-29 09:44:08 发布

dragoonnet

最新推荐文章于 2022-01-29 09:44:08 发布

阅读量141

点赞数

分类专栏： nodejs 文章标签： javascript js

本文链接：https://blog.csdn.net/dragoonnet/article/details/121546799

版权

nodejs 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <title>zxk示例</title>
        <link rel="stylesheet" href="ol.css" type="text/css">
        <script src='https://cdn.jsdelivr.net/npm/openlayers@4.6.5/dist/ol-debug.js'></script>
        <script src='https://cdn.jsdelivr.net/npm/ol-extent@2.0.1/dist/ol-extent.js'></script>
        <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/ol-extent@2.0.1/dist/ol-extent.css'>
        <style>
            .ole-js-popup-content {
                width: 200px;
            }
        </style>
    </head>
    <body>
        <div id="map" class="map"></div>
        <script>

            //让图标可以移动
            function makeMarkerMove(feature) {
                var modify = new ol.interaction.Modify({
                    features: new ol.Collection([feature])
                });
                feature.on('change', function() {
                    //移动事件。
                    console.log('Feature Moved To:' + this.getGeometry().getCoordinates());
                }, feature);

                map.addInteraction(modify);
            }

            //创建图标
            function createMarker(map, name, x, y, icon, txt) {

                //创建空的矢量容器
                var vectorSource = new ol.source.Vector({});

                var iconFeature = new ol.Feature({
                    geometry: new ol.geom.Point([x, y],"XY"),
                    name: name,
                });
                //将图标特性添加进矢量中
                vectorSource.addFeature(iconFeature);

                //创建图标样式
                var iconStyle = [new ol.style.Style({
                    image: new ol.style.Icon({
                        opacity: 0.75,
                        src: icon,
                        //"https://openlayers.org/en/latest/examples/data/icon.png"
                    }),

                }), new ol.style.Style({
                    text: new ol.style.Text({
                        text: txt,
                        //"hahahahaha",
                        offsetX: 25,
                        //offsetY: -25,
                        font: '18px roboto,sans-serif',
                        textAlign: 'left',
                        stroke: new ol.style.Stroke({
                            color: '#fff',
                            lineCap: 'butt',
                            width: 4
                        }),
                        fill: new ol.style.Fill({
                            color: '#000'
                        })
                    })
                })];

                //创建图标层
                var vectorLayer = new ol.layer.Vector({
                    source: vectorSource,
                    style: iconStyle
                });

                map.addLayer(vectorLayer);
                return iconFeature;
            }
            ;//地图尺寸
            var extent = [0, 0, 1024, 968];
            var projection = new ol.proj.Projection({
                code: 'xkcd-image',
                units: 'pixels',
                extent: extent
            });

            //创建地图	
            var map = new ol.Map({
                layers: [new ol.layer.Image({
                    //设置地图图片
                    source: new ol.source.ImageStatic({
                        url: 'http://picapi.zhituad.com/photo/388/88/11FED.jpg',
                        projection: projection,
                        imageExtent: extent
                    })
                })],
                target: 'map',
                //设置缩放比例和等级。
                view: new ol.View({
                    projection: projection,
                    center: ol.extent.getCenter(extent),
                    zoom: 1,
                    maxZoom: 10
                }),
                controls: ol.control.defaults({
                    attribution: false,

                })

            });

            console.log("地图中心", map.getView().getCenter())

            var marker1 = createMarker(map, "卧室空调A", 450, 500, "https://openlayers.org/en/latest/examples/data/icon.png", "卧室空调");
            var marker2 = createMarker(map, "客厅空调B", 400, 400, "https://openlayers.org/en/latest/examples/data/icon.png", "客厅空调");

            //让图标可以拖动
            makeMarkerMove(marker1);
            //markMarkerMove(marker2);

            var popover = null;
            map.on('click', function(evt) {
                console.log("当前经纬度", evt.coordinate);
                var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature) {
                    return feature;
                });

                if (feature && feature.getProperties().name) {
                    //获取marker的坐标。
                    var coordinates = feature.getGeometry().getCoordinates();
                    window.f = feature;
                    //获取marker的所有属性。
                    var attr = feature.getProperties().name;

                    //如果没有弹出层html，则创建。
                    if (!popover) {
                        popover = new ole.Popover({
                            // showCloser: false,
                            //showMarkFeature: true,
                            // showMinimize: true,
                            //autoPan: true,
                            offset: [0, -50],
                        });
                        map.addOverlay(popover);
                    }

                    //设置弹出html
                    var content = '<ul>' + '<li>name:' + attr + '</li>' + '</ul>';
                    popover.show(coordinates, content);
                } else {
                    if (popover)
                        popover.hide();
                }
            });
        </script>
    </body>
</html>