safesite/safesite/templates/jianceditu.html

<div id="map1" class="map" style="width:100%;height:auto;outline: #4A74A8 solid 0.15em;">
</div>
<div id='mapshowinput1'></div>
<div id="popup1" class="ol-popup">
    <a href="#" id="popup-closer1" class="ol-popup-closer"></a>
    <div id="popup-content1"></div>
</div>
<style>
    .ol-popup {
        position: absolute;
        background-color: white;
        -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
        filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
        padding: 15px;
        border-radius: 10px;
        border: 1px solid #cccccc;
        bottom: 12px;
        left: -50px;
        min-width: 280px;
    }

    .ol-popup:after,
    .ol-popup:before {
        top: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .ol-popup:after {
        border-top-color: white;
        border-width: 10px;
        left: 48px;
        margin-left: -10px;
    }

    .ol-popup:before {
        border-top-color: #cccccc;
        border-width: 11px;
        left: 48px;
        margin-left: -11px;
    }

    .ol-popup-closer {
        text-decoration: none;
        position: absolute;
        top: 2px;
        right: 8px;
    }

    .ol-popup-closer:after {
        content: "✖";
    }
</style>
<script>
    var map, source, vector;// global so we can remove it later
    var container = document.getElementById("popup1");
    var content = document.getElementById("popup-content1");
    var popupCloser = document.getElementById("popup-closer1");
    var overlay = new ol.Overlay({
        //设置弹出框的容器
        element: container,
        //是否自动平移，即假如标记在屏幕边缘，弹出时自动平移地图使弹出框完全可见
        autoPan: true
    });
    $.get('api/map?a=default', function (res) {
        $('#map1').empty()
        map = initMap(res.pic)
        mapupdate()
    })

    function initMap(url) {
        var extent = [0, 0, 1920, 1080];
        var projection = new ol.proj.Projection({
            code: 'xkcd-image',
            units: 'pixels',
            extent: extent
        });
        map = new ol.Map({
            layers: [
                new ol.layer.Image({
                    source: new ol.source.ImageStatic({
                        url: url,
                        projection: projection,
                        imageExtent: extent
                    })
                })
            ],
            target: 'map1',
            view: new ol.View({
                projection: projection,
                center: ol.extent.getCenter(extent),
                zoom: 2.3,
                maxZoom: 8
            }),
            controls: ol.control.defaults().extend([new ol.control.FullScreen()])
        });
        source = new ol.source.Vector({ wrapX: false });
        vector = new ol.layer.Vector({
            source: source
        });
        map.addLayer(vector);//加载图层
        map.on('pointermove', function (e) {

            //在点击时获取像素区域
            var pixel = map.getEventPixel(e.originalEvent);
            var feature = map.forEachFeatureAtPixel(pixel, function (feature, layer) {
                //在视口中遍历所有具有像素颜色的图层，如果图层存在，则返回
                return feature;
            });
              
                if (feature) {
                    var data = feature.getProperties()
                    console.log(data)
                    //设置弹出框内容，可以HTML自定义
                    var html = "";
                if (data.type == 'pk') {
                    html = "<p>排口名称：" + data.name + "</p>" + "<p>排口编号：" + data.number + "</p>"
                }
                  
                    content.innerHTML = html;
                   
                    //设置overlay的显示位置
                    overlay.setPosition(e.coordinate);
                    //显示overlay
                    map.addOverlay(overlay);
                }
                else {
                    closepopup()
                }
            });
          //  map.on('click', function (e) {
              //  var coordinate = e.coordinate;
              //  var feature = map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
            //        return feature;
           //     });
            //    if (feature) {
            //        var data = feature.getProperties()
            //        opendetail(data.id)
            //    }
        //    });
            popupCloser.onclick = function () {
                closepopup()
                return false;
            };
            return map
        }
        function closepopup() {
            overlay.setPosition(undefined);
            popupCloser.blur();
        }
       var createPointStyle = function (feature) {
            var data = feature.getProperties()
            if (data.type == 'pk') {
                src = '/static/safesite/mystatic/images/icon1.png'
                
            } 
           
            return new ol.style.Style({
                /**{olx.style.IconOptions}类型*/
                image: new ol.style.Icon(
                    ({
                       
                        anchorOrigin: 'top-right',
                        anchorXUnits: 'fraction',
                        anchorYUnits: 'pixels',
                        offsetOrigin: 'top-right',
                        // offset:[0,10],
                        //图标缩放比例
                        // scale:0.5,
                        //透明度
                        opacity: 0.75,
                        //图标的url
                        src: src
                    })
                ),
                text: new ol.style.Text({
                    textAlign: 'center',            //位置
                    textBaseline: 'middle',         //基准线
                    font: 'normal 14px 微软雅黑',    //文字样式
                    //text: feature.get('name'),      //文本内容
                })

            });
        }
        function setPoint(i) {
           console.log("setpoint:"+i.location)
           
        var pointFeature = new ol.Feature({
            geometry: new ol.geom.Point(i.location),
                 id: i.id,
                name: i.name,
                type: i.type,
                location: i.location,
                number: i.number
        });
        pointFeature.setStyle(createPointStyle(pointFeature));
            
            source.addFeature(pointFeature)
        }



       
    
    </script>