欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

openlayers實(shí)現(xiàn)地圖彈窗

 更新時間:2020年09月25日 08:05:44   作者:wwj007  
這篇文章主要為大家詳細(xì)介紹了openlayers實(shí)現(xiàn)地圖彈窗,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了openlayers實(shí)現(xiàn)地圖彈窗的具體代碼,供大家參考,具體內(nèi)容如下

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <link rel="stylesheet"  />
 <script type="text/javascript" src="https://openlayers.org/en/v5.3.0/build/ol.js"></script>
 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 <title>Ol3 popup</title>
 <style type="text/css">
 body, #map {
 border: 0px;
 margin: 0px;
 padding: 0px;
 padding: 0px;
 padding: 0px;
 width: 100%;
 height: 100%;
 font-size: 13px;
 }
 
 .ol-popup {
 display: none;
 position: absolute;
 background-color: white;
 -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
 -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));
 border: 1px solid #cccccc;
 bottom: 12px;
 left: -50px;
 width: 200px;
 }
 .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;
 }
 .popup-title{
 font-weight: bold;
 border-bottom:1px solid #cccccc;
 padding: 5px 8px;
 }
 .popup-content{
 padding: 5px 8px;
 }
 .ol-popup-closer {
 text-decoration: none;
 position: absolute;
 top: 6px;
 right: 6px;
 }
 .ol-popup-closer:after {
 content: "✖";
 }
 </style>

 <script type="text/javascript">
 function init(){
 var format = 'image/png';
 var bounds = [73.4510046356223, 18.1632471876417,
 134.976797646506, 53.5319431522236];
 var vectorSource = new ol.source.TileWMS({
 url: 'http://localhost:8080/geoserver/map/wms?service=WMS&version=1.1.0&request=GetMap&layers=map:capital&styles=&bbox=87.57607938302118,19.97015007757606,126.56705607814561,45.69385655384421&width=768&height=506&srs=EPSG:4326&format=application/openlayers',
   params:{ 
    'LAYERS':'capital',
    'TILED':false 
   }, 
 serverType:'geoserver'
  
 });
 var untiled = new ol.layer.Tile({
 source: vectorSource
 });
 var container = document.getElementById('popup');
 var content = document.getElementById('popup-content');
 var title = document.getElementById('popup-title');
 var closer = document.getElementById('popup-closer');
 closer.onclick = function(){
 container.style.display = 'none';
 closer.blur();
 return false;
 };
 var overlay = new ol.Overlay({
 element: container
 });
 
  var osmsource = new ol.source.OSM()
 //console.log(osmsource.getProjection().getCode()); 
 var map = new ol.Map({
 controls: ol.control.defaults({
 attribution: false
 }),
 target: 'map',
 layers: [new ol.layer.Tile({
 source: osmsource, //將數(shù)據(jù)源坐標(biāo)系統(tǒng)進(jìn)行轉(zhuǎn)換
 projection:ol.proj.getTransform("EPSG:3857", "EPSG:4326")
 }),
 untiled],
 overlays: [overlay],
 view: new ol.View({
 center:[117,42],
 projection:'EPSG:4326',
 zoom:1
 })
 });
 map.addOverlay(overlay);
 map.getView().fit(bounds, map.getSize());
 
 map.on('click', function(evt) {
 var coordinate = evt.coordinate;
 var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
 coordinate, 'EPSG:4326', 'EPSG:4326'));
 overlay.setPosition(coordinate);
 content.innerHTML = '<p>You clicked here:</p><code>' + hdms +
 '</code>';
 container.style.display = 'block';
 title.innerHTML = "提示信息";
 title.style.display = 'block';
 map.getView().setCenter(coordinate);
 });
 }
 </script>
</head>
<body onLoad="init()">
<div id="map">
 <div id="popup" class="ol-popup">
 <a href="#" rel="external nofollow" id="popup-closer" class="ol-popup-closer"></a>
 <div id="popup-title" class="popup-title"></div>
 <div id="popup-content" class="popup-content"></div>
 </div>
</div>
</body>
</html>

效果圖:

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • js獲取form的方法

    js獲取form的方法

    這篇文章主要介紹了js獲取form的方法,實(shí)例分析了javascript操作form表單的技巧,需要的朋友可以參考下
    2015-05-05
  • 網(wǎng)站繁簡切換的JS遇到頁面卡死的解決方法

    網(wǎng)站繁簡切換的JS遇到頁面卡死的解決方法

    最近開發(fā)了繁體版本的網(wǎng)站,在網(wǎng)上找了一段比較流行的繁簡切換的JS實(shí)現(xiàn)了,不過后來卻發(fā)現(xiàn),有些頁面會卡死,針對這個問題,下面有個不錯的解決方法
    2014-03-03
  • JS組件系列之MVVM組件 vue 30分鐘搞定前端增刪改查

    JS組件系列之MVVM組件 vue 30分鐘搞定前端增刪改查

    這篇文章主要介紹了JS組件系列之MVVM組件 vue 30分鐘搞定前端增刪改查,需要的朋友可以參考下
    2017-04-04
  • js全選按鈕的實(shí)現(xiàn)方法

    js全選按鈕的實(shí)現(xiàn)方法

    在我們進(jìn)行項(xiàng)目選擇時,會出現(xiàn)選擇多個項(xiàng)目或者是項(xiàng)目實(shí)現(xiàn)全選,這樣的功能如何實(shí)現(xiàn)吶,本文給出了js實(shí)現(xiàn)checkbox全選的詳細(xì)代碼,希望大家喜歡。
    2015-11-11
  • JS前端圖片最優(yōu)化壓縮方案

    JS前端圖片最優(yōu)化壓縮方案

    這篇文章主要為大家介紹了JS前端圖片最優(yōu)化壓縮方案,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-09-09
  • 詳解微信小程序中的頁面代碼中的模板的封裝

    詳解微信小程序中的頁面代碼中的模板的封裝

    這篇文章主要介紹了詳解微信小程序中的頁面代碼中的模板的封裝的相關(guān)資料,希望通過本文能幫助到大家,需要的朋友可以參考下
    2017-10-10
  • kmock javascript 單元測試代碼

    kmock javascript 單元測試代碼

    javascript其實(shí)是非常需要單元測試的,但是qmock總感覺不好使?或是文檔的新舊有問題,反正我暫時是只需要函數(shù)調(diào)用的次數(shù)判斷,結(jié)果就寫了個kmock
    2011-02-02
  • webpack實(shí)踐之DLLPlugin 和 DLLReferencePlugin的使用教程

    webpack實(shí)踐之DLLPlugin 和 DLLReferencePlugin的使用教程

    這篇文章主要介紹了webpack實(shí)踐之DLLPlugin 和 DLLReferencePlugin的使用教程,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值 ,需要的朋友可以參考下
    2019-06-06
  • javascriptvoid(0)含義以及與

    javascriptvoid(0)含義以及與"#"的區(qū)別講解

    今天小編就為大家分享一篇關(guān)于javascriptvoid(0)含義以及與"#"的區(qū)別講解,小編覺得內(nèi)容挺不錯的,現(xiàn)在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧
    2019-01-01
  • 原生js頁面滾動延遲加載圖片

    原生js頁面滾動延遲加載圖片

    這篇文章主要介紹了原生js頁面滾動延遲加載圖片的相關(guān)資料,現(xiàn)在瀑布流效果大行其道,各種網(wǎng)站都有應(yīng)用,尤其是專業(yè)的圖片類型的網(wǎng)站,感興趣的朋友可以參考下
    2015-12-12

最新評論