ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

openlayer实现2d地图展示

2021-07-05 17:59:27  阅读：179  来源： 互联网

标签：map layer ol openlayer 展示 feature 2d var new


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

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有