.map { width: 100%; height: 100%; float: left; } .ol-overviewmap { bottom: 2.5em; } .map:-moz-full-screen { height: 100%; } .map:-webkit-full-screen { height: 100%; } .map:fullscreen { height: 100%; } /* position the rotate control lower than usual */ .ol-rotate { top: 3em; } .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; bottom: 72px; } .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: 5px; } .ol-popup-closer:after { content: "✖"; } .layer-switcher { width:140px; top: 10px; right: 50px; font-size:14px; color: #fff; text-indent:7px; } .layer-switcher .shown{ display: block; } .layer-switcher .selected { display:block; line-height:22px; width:100%; height:22px; overflow:hidden; border:0px; color: #fff; background-color:rgba(0,60,136,.5); } .layer-switcher .arrow{ position:absolute; right:8px;top:10px;display:block; height:0;width:0; border-top:7px solid #fff; border-right:4px solid transparent; border-left:4px solid transparent; } .layer-switcher .selected:hover { text-decoration:none; background-color:rgba(0,60,136,.7); } .layer-switcher ul { padding: 0px; margin:0px; overflow: hidden; display:none; background-color:rgba(0,60,136,.5); z-index:99999; } .layer-switcher ul li { display:block;height:22px; overflow:hidden;line-height:22px; width:100%; cursor:pointer; } .layer-switcher .hover { background:#1E91FF; } #layersControl { background-color: rgb(255, 255, 255); border: 1px solid #888888; position: absolute; z-index: 999; right: 0px; top: 38px; display: none; } #layersControlTitle { font: bold 12px sans-serif; background-color: #3bb5ff; color: #ffffff; height: 30px; line-height: 30px; } #layercontent { height: 250px; width: 180px; } #layerbox { background: #fff; z-index: 112; border-radius: 1px; box-shadow: 1px 2px 1px rgba(0, 0, 0, .15); font-size: 12px; line-height: 1.5; color: #565656; word-wrap: break-word; font-family: Arial, sans-serif; } #layerbox_item { font-size: 12px; line-height: 1.5; color: #565656; word-wrap: break-word; } #layerbox_item .item, #layerbox_item .item span, #measureTool .item span { display: inline-block; vertical-align: middle; } #layerbox_item .item { height: 16px; padding: 0 6px; border-right: 1px #e5e5e5 solid; cursor: pointer; } #layerbox_item { padding: 7px 0 12px; background: #fff; } #layerbox_item .item .icon { width: 16px; height: 16px; margin-right: 5px; } /*动态点扩散效果*/ #css_animation{ height:50px; width:50px; border-radius: 25px; background: rgba(0, 255, 255, 0.9); transform: scale(0); animation: myfirst 3s; animation-iteration-count: infinite; } @keyframes myfirst{ to{ transform: scale(2); background: rgba(0, 0, 0, 0); } }