openlayer实现2d地图展示

2023-12-04 12:48:52

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

<!--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

码农公寓

相关文章