openlayer 简单插入坐标

最新推荐文章于 2023-04-17 11:03:40 发布

小兰博客

最新推荐文章于 2023-04-17 11:03:40 发布

阅读量545

点赞数 1

本文链接：https://blog.csdn.net/nanluncheng/article/details/89742902

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/ol.js"></script>
  <script src="js/jquery.1.12.4.min.js"></script>
  <script src="js/normal.js"></script>
  <link rel="stylesheet" href="css/ol.css">
</head>
<!--<div id="anchor"><img src="/img/timg.jpg" height="50" width="70" alt="我的家"/></div>-->
<div id="map" style="width: 100%"></div>
<script>
  var coor=[];
  var name=[];
  var Base = {path : '/'};
  /*var anchor = new ol.Overlay({
    element: document.getElementById('anchor'),
  });*/
 /* anchor.setPosition([114.697853, 37.778763]);*/
  /*map.addOverlay(anchor);
  * 创建*/
 /* map.on('click', function(event){
    anchor.setPosition([event.coordinate[0], event.coordinate[1]]);

  });*/
  var map = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source:new ol.source.XYZ({
          url: 'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i380072576!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0!5m1!1e0'
        })
      })
    ],
    target: 'map',//指定id
    view: new ol.View({
      projection: 'EPSG:4326',//
      center: [114.49951171875,38.0950927734375],//坐标的位置
      zoom: 10//层级
    })
  });

  function afterFunc(result) {
    var obj=$.dealJSONObj(result);
    var pointLayer = new ol.layer.Vector({  // 1  需要 确定哪一种 图层类型  ol.layer.xxx
      source: new ol.source.Vector()        // 2  图层需要 数据             ol.source.xxx
    });
    $.each(obj.data,function (i,n) {
      name=[n.uAddr];
      coor=[n.uLongitude,n.uLatitude];      // 3  在地图上放 图片   需要坐标
      var newFeature = new ol.Feature({     // 4  要素  对象    根据坐标点  确定位置  默认 显示一个  小圆圈
        geometry:new ol.geom.Point(coor)
      });
      newFeature.setStyle(new ol.style.Style({
        image: new ol.style.Icon({
            src: "img/timg.jpg",
            scale: 0.05,
            auchor: [0.5,0.5]
        }),


        text: new ol.style.Text({
          text: name,
          offsetX: 16,//偏移
          offsetY: 25,//偏移
          fill: new ol.style.Fill({
              color: "red"
          })/*,
            backgroundFill: new ol.style.Fill({
                color: ""
            })*/

        })
      }));
      pointLayer.getSource().addFeature(newFeature);
      });


    map.addLayer(pointLayer);
  }

  $(function() {
    $.get("http://localhost:8080/tstulist").always(afterFunc);
  });

</script>
</body>
</html>

小兰博客

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
openlayer 简单插入坐标

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/ol.js"></script> <script src="js/jquery.1...
复制链接

扫一扫