其他分享
首页 > 其他分享> > openlayer实现2d地图展示

openlayer实现2d地图展示

作者:互联网

需引入三个包 包在底部链接 需要自取

<!--js 地图引入-->
<link rel="stylesheet" th:href="@{/js/ol.css}" />
<script type="text/javascript" th:src="@{/js/ol.js}"></script>
<script type="text/javascript" th:src="@{/js/proj4.js}"></script>

弹出层样式如下 因为我想做的是双击点 然后展示点的信息

 /*地图弹出层样式*/
    .ol-popup {
      position: absolute;
      border: 1px #37ACCD solid;
      background: linear-gradient(rgba(0, 118, 255, 0.5) 0%, rgba(21, 67, 191, 0.5) 0%, #1543bf 100%);
      padding: 15px;
      border-radius: 10px;

      bottom: 12px;
      left: -50px;
      display: none;
    }
    .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;
      cursor: pointer;
    }
    .ol-popup-content {
      width: 300px;
      color: white;
    }
    /*.ol-popup-closer:after {*/
    /*  content: "x";*/
    /*  color: black;*/
    /*}*/

重点来了 地图就是弄个地图容器 然后初始化地图 就可以了

 <!-- 地图容器和样式  -->
  <div class="map_wrap" id="map" style="position: relative;width: 100%;height: 100%;">
    <!-- 二维地图自助服务区弹出层 -->
    <div id="serviceAreaPopup" class="ol-popup">
      <span id="serviceAreaPopupCloser" class="ol-popup-closer"></span>
      <div id="serviceAreaPopupContent" class="ol-popup-content"></div>
    </div>

  </div>

下面的是地图相关的初始化js

// 接入地图相关的代码
var map = null; // 地图
var pointLayer = null; // 落点图层
var longitude = null; // 经度
var latitude = null; // 纬度
var zoom; // 地图缩放级别
var container = document.getElementById("serviceAreaPopup"); // 地图弹出层

// 设置自助服务区popup的位置
var overlay = new ol.Overlay({
  element: container, // 绑定Overlay对象和DOM对象
  /* autoPan: true, // 定义弹出窗口在边缘点击时候可能不完整 设置自动平移效果
  autoPanAnimation: {
      duration: 100 // 自动平移效果的动画时间
  } */
});

var showImage = null;




var deptAreaId = "440306"; // 宝安区区号
var areaId; // 宝安区区号

longitude = "113.9";
latitude = "22.7";
zoom = 3.6;
initMap(longitude, latitude, zoom);

// 设置地图边界线颜色高亮
setMapLine();

下面是初始化地图的方法 可以直接使用 每个地点的经纬度 需要你们大数据部门自行提供 或者和第三方提供数据的中心合作 如果公司够大 也可以自行编写 说白了就是弄一下经纬度 百度地图啥的都有 自行不嫌麻烦 可以自己弄个地图的经纬度 覆盖全国的都可以

// 初始化地图
function initMap(longitude,latitude,zoom) {
  proj4.defs("EPSG:4490", "+proj=longlat +ellps=GRS80 +no_defs");
  ol.proj.proj4.register(proj4);

  var origin = ol.proj.fromLonLat([-180, 90], "EPSG:4490");
  var projection = ol.proj.get("EPSG:4490");
  // 定位中心位置
  // var center = ol.proj.fromLonLat([113.9, 22.7], "EPSG:4490");
  var center = ol.proj.fromLonLat([longitude, latitude], "EPSG:4490");
  var fullExtent = [
    113.43306624442225,
    22.227477185000077,
    114.66247690657787,
    22.955710033000054
  ];
  var cityExtent = [
    113.42581408588889,
    22.274121619760976,
    114.66837903888244,
    22.955241577327237
  ];
  var resolutions = [
    0.0013732910156250004,
    6.866455078125002e-4,
    3.433227539062501e-4,
    1.7166137695312505e-4,
    8.583068847656253e-5,
    4.2915344238281264e-5,
    2.1457672119140632e-5,
    1.0728836059570316e-5,
    5.364418029785158e-6,
    2.682209014892579e-6,
    1.3411045074462895e-6
  ];
  var worldExtent = [
    113.42581408588889,
    22.274121619760976,
    114.66837903888244,
    22.955241577327237
  ];
  projection.setWorldExtent(worldExtent);
  var extent = [
    113.42581408588889,
    22.274121619760976,
    114.66837903888244,
    22.955241577327237
  ];
  projection.setExtent(extent);
  layers = [
    new ol.layer.Tile({
      source: new ol.source.XYZ({
        tileGrid: new ol.tilegrid.TileGrid({
          tileSize: 256,
          origin: origin,
          extent: cityExtent,
          resolutions: resolutions
        }),
        projection: projection,
        url: "http://10.99.85.187:80/arcgis/rest/services/BAKSJ/DTVEC_SS_ZQ_BA_BJT/MapServer/tile/{z}/{y}/{x}"
      })
    }),
    new ol.layer.Tile({
      source: new ol.source.XYZ({
        tileGrid: new ol.tilegrid.TileGrid({
          tileSize: 256,
          origin: origin,
          extent: fullExtent,
          resolutions: resolutions
        }),
        projection: projection,
        url: "http://10.99.85.187:80/arcgis/rest/services/BAKSJ/DTVEC_SS_ZQ_BA_2/MapServer/tile/{z}/{y}/{x}"
      })
    }),
  ];
  view = new ol.View({
    center: center,
    // 缩放级别    4
    // zoom: 3.6,
    zoom: zoom,
    projection: projection,
    //minZoom: 3
  });
  map = new ol.Map({
    target: 'map',
    layers: layers,
    view: view,
    controls: ol.control.defaults({
      zoom: false
    }).extend([]),
    interactions: ol.interaction.defaults().extend([ // 配置地图按shift旋转
      new ol.interaction.DragRotateAndZoom()
    ]),
  });
}

描边的方法如下 就是人家提供一个经纬度数组 你们根据经纬度数组进行加颜色而已 这就是描边 也很简单的

// 设置地图边界线颜色高亮
function setMapLine() {
  $.ajax({
    url: "http://10.99.85.73:8080/bigScreenPre/getToken/jqToken",
    type: 'GET',
    dataType: 'json',
    data: {},
    success: function (data) {
      $.ajax({
        url: "http://10.99.85.73:2019/ksj_base/common_api/getAreaBase",
        type: 'POST',
        dataType: 'json',
        data: {
          paramCodeList: 'KJ5001',
          areacode: '440306',
          token: data.data.token
        },
        success: function (data) {
          if (data.success && data.data) {
            var featureData = {
              features: [],
              type: "FeatureCollection"
            };
            data.data.chirdAreaInfo.forEach(function (areaData) {
              featureData.features.push({
                'type': 'Feature',
                'properties': {},
                'geometry': {
                  'type': areaData._source.areainfo.type,
                  'coordinates': areaData._source.areainfo.coordinates
                }
              });
            });
            // 设置图层
            var areaLayer = new ol.layer.Vector({
              source: new ol.source.Vector({
                features: []
              }),
              zIndex:100,
            });
            // 添加图层
            map.addLayer(areaLayer);
            var featuresArr = [];
            // 循环添加feature
            for (var i = 0; i < featureData.features.length; i++) {
              var areaFeature = new ol.Feature({
                geometry: new ol.geom.Polygon(
                        featureData.features[i].geometry.coordinates
                ).transform("EPSG:4326", "EPSG:4490")
              });
              areaFeature.setStyle(
                      new ol.style.Style({
                        stroke: new ol.style.Stroke({
                          width: 3.5,
                          color: [18, 245, 255, 1]
                        })
                      })
              );
              featuresArr.push(areaFeature);
            }
            areaLayer.getSource().addFeatures(featuresArr);
          } else {
            console.error('获取数据失败!');
          }
        }
      });
    }
  });
}

下面是打点 就是你们自己的业务点 要在地图上显示的 传入一个经纬度数组 就可以了 直接就可以打点了

// 批量根据经纬度坐标打点
function addPoints(coordinates) {
  var featuresArr = [];
  // 设置图层
  pointLayer = new ol.layer.Vector({
    source: new ol.source.Vector(),
    zIndex:199,
  });
  // 添加图层
  map.addLayer(pointLayer);
  // 循环添加feature
  for (var i = 0; i < coordinates.length; i++) {
    // 创建feature,一个feature就是一个点坐标信息
    var feature = new ol.Feature({
      geometry: new ol.geom.Point(
              // 经纬度设置
              ol.proj.fromLonLat([coordinates[i].longitude, coordinates[i].lATITUDE],"EPSG:4490")
      )
    });
    // 区划id设置
    feature.set("areaid",coordinates[i].areaid);
    // 位置名称设置
    feature.set("name",coordinates[i].name);
    // 区域类型设置
    feature.set("layer",coordinates[i].layer);
    // 区划父id设置
    /* if (coordinates[i].parentid != null && coordinates[i].parentid != undefined && coordinates[i].parentid != "") {
        feature.set("parentid",coordinates[i].parentid);
    } */

    // 设置锚点样式
    feature.setStyle(getStyleIcon(feature.get("name"), feature.get("layer")));
    featuresArr.push(feature);
  }
  // 批量添加feature
  pointLayer.getSource().addFeatures(featuresArr);
}

下面的就是设置点的图形以及位置啥的 layer 不用纠结 就是点的类型 是根据自己业务来的 例如a类点打红色 b类点打绿色等等

// 锚点图标设置
function getStyleIcon(name, layer) {
  return new ol.style.Style({
    image: new ol.style.Icon({
      src: "/images/icon_zdqk"+ --layer +".png",
      // 图标位置
      // anchor: [1, 1]
      anchor: [0.5, 0.5], // 设置图标偏移
      // 图标大小
      //scale: 1.6,
      scale: 1,
      opacity: 1,    //透明度
    }),
    //文本样式
    text: new ol.style.Text({
      textAlign: 'center',     //对齐方式
      textBaseline: 'middle',    //文本基线
      font: '12px',     //字体样式
      // text: name,    //文本内容
      //offsetY: -45,    // Y轴偏置
      //scale: 1.6,
      offsetY: -33,
      scale: 1.6,
      fill: new ol.style.Fill({        //填充样式
        color: '#ffffff'
      }),
      backgroundFill: new ol.style.Fill({      // 填充背景
        color: [0, 0, 0, 0.4],
      }),
      padding: [0, 0, -3, 3],
    }),
    // 设置层级
    zIndex: 199,
  });
}

下面的就是根据点上的属性进行删除 点上有个layer属性 你就根据这个属性删除对应类型的点 区域 街道 社区 园区 网格等 也是这个套路

// 清除指定类型落点
function removeRegionDataByLayer(layer) {
  pointLayer.getSource().getFeatures().forEach(function(feature){
    if(feature.get("layer") == layer){
      pointLayer.getSource().removeFeature(feature);
    }
  });
}

清空所有点的js

// 清空所有点
function removeRegionData() {
  pointLayer.getSource().getFeatures().forEach(function(feature){
      pointLayer.getSource().removeFeature(feature);

  });
}

弹框监听 就是整个大地图就是一个map 你只要点上去 就会进入的一个监听方法

  // 为map添加鼠标移动事件监听,当指向标注时改变鼠标光标状态为手型
  map.on('pointermove', function (e) {
    var pixel = map.getEventPixel(e.originalEvent);
    var hit = map.hasFeatureAtPixel(pixel);
    map.getTargetElement().style.cursor = hit ? 'pointer' : '';
  });

下面是我自己业务的弹框 你们根据自己的进行修改

map.on("click", function(evt) {
   debugger;
  var feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) { return feature; });

  if(feature == undefined){
    // 清空popup的内容容器
    $("#serviceAreaPopupContent").html("");
    $("#serviceAreaPopup").hide();
    return;
  }
  var layer=feature.get("layer");

// 妇儿之家 母婴室 儿童友好空间
  if(layer == 1|| layer == 2 || layer == 3){
    var areaid=feature.get("areaid");
    var name=feature.get("name");
    // 地址
    var address=feature.get("address");
    // 服务电话
    var fwdh=feature.get("fwdh");

    // 图片
    var PICTURE=feature.get("PICTURE");


    // 清空popup的内容容器
    $("#serviceAreaPopupContent").html("");

// 将弹窗添加到 map 地图中
    map.addOverlay(overlay);
    overlay.setPosition(evt.coordinate);
    $("#serviceAreaPopup").show();

    showImage ="http://10.1.48.19:8081/fldp/user/viewPic?fileId=" + PICTURE
    console.log("showImage:"+ showImage);
    var yws111 =  showImage;

    // 设置内容
    var content = "<table class='maptable' width='300px' style='border-collapse:separate; border-spacing:0px 12px;'>"+
            "<tr><td style='text-align: left;'>"+ "名称:"+name + "</td></tr>" +
            "<tr><td style='text-align: left;'>" + "所在地址:" + address + "</td></tr>" +
            "<tr><td style='text-align: left;'>" + "电话:" + fwdh + "</td></tr>" +
            // "<tr><td style='text-align: left;'>" + "图片:" + "<img th:src='@{/images/logo1.png}' style='width: 100px; height: 130px' alt=''/>"+"</td></tr></table>"+
            "<tr><td style='text-align: left;'>" + "图片:" +"</td></tr></table>"+
            "<img src='yws111' height='200px' width='200px' id='picture' />";

    var content1 = "<table class='maptable' width='300px' style='border-collapse:separate; border-spacing:0px 12px;'>"+
            "<tr><td style='text-align: left;'>"+ "名称:"+name + "</td></tr>" +
            "<tr><td style='text-align: left;'>" + "所在地址:" + address + "</td></tr>" +
            "<tr><td style='text-align: left;'>" + "电话:" + fwdh + "</td></tr>" +
            // "<tr><td style='text-align: left;'>" + "图片:" + "<img th:src='@{/images/logo1.png}' style='width: 100px; height: 130px' alt=''/>"+"</td></tr></table>"+
            "<tr><td style='text-align: left;'>" + "图片:" +"</td></tr></table>";



debugger;
    var ImgObj = new Image();
    ImgObj.src = yws111;
    if((ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) && PICTURE != null) {
      $("#serviceAreaPopupContent").html(content);
      $('#picture').attr('src',yws111);
    } else {
      $("#serviceAreaPopupContent").html(content1);
    }






  }else if(layer == 6|| layer == 7){  // 周 月  弹框
      debugger;
    var areaid=feature.get("areaid");
    var name=feature.get("name");
    // 地址
    var address=feature.get("address");
    // 服务电话
    var fwdh=feature.get("fwdh");

    // 时间
    var time=feature.get("time");


    // 清空popup的内容容器
    $("#serviceAreaPopupContent").html("");

// 将弹窗添加到 map 地图中
    map.addOverlay(overlay);
    overlay.setPosition(evt.coordinate);
    $("#serviceAreaPopup").show();
    // 设置内容
    var content = "<table width='300px' style='border-collapse:separate; border-spacing:0px 12px;'>"+
            "<tr><td style='text-align: left;'>"+ "活动名称:"+name + "</td></tr>" +
            "<tr><td style='text-align: left;'>" + "活动时间:" + time + "</td></tr>" +
            "<tr><td style='text-align: left;'>" + "活动地址:" + address + "</td></tr>" +
            "<tr><td style='text-align: left;'>" + "活动电话:" + fwdh+ "</td></tr></table>";
    $("#serviceAreaPopupContent").html(content);
  }




});

为弹窗添加一个响应关闭的函数

  // 为弹窗添加一个响应关闭的函数
  $("#serviceAreaPopupCloser").click(function() {
    overlay.setPosition(undefined);
    $("#serviceAreaPopupCloser").blur();
    return false;
  });

下面是引入的css文件等 需要的自取

https://download.csdn.net/download/weixin_45447370/20032875

标签:map,layer,ol,openlayer,展示,feature,2d,var,new
来源: https://blog.csdn.net/weixin_45447370/article/details/118494323