0
0

vue3+openlayers 点击点自定义弹窗，不同类型不同样式，点击面跳转，点的聚类

  1. <template>
  2.   <div class="selectLocation">
  3.     <div
  4.       class="project_map"
  5.       id="project_map"
  6.       ref="container"
  7.       style="width: 100%; height: 100%; z-index: 1"
  8.     ></div>
  9.     <div class="layerControl">
  10.       <el-radio-group v-model="radio">
  11.         <el-radio
  12.           size="large"
  13.           v-for="(item, index) in MapList.groundList"
  14.           :label="index"
  15.           @change="fly"
  16.         >
  17.           {{ item.name }}{{ index }}
  18.         </el-radio>
  19.       </el-radio-group>
  20.     </div>
  21.     <div
  22.       id="popup"
  23.       class="ol-popup"
  24.       style="background-color: bisque"
  25.       v-if="popshow"
  26.     >
  27.       <div class="pophead" style="width: 100%; height: 20px">
  28.         <div
  29.           id="popup-title"
  30.           style="
  31.             font: bold 15px sans-serif;
  32.             align: left;
  33.             position: absolute;
  34.             top: 5px;
  35.             left: 8px;
  36.             color: #000000;
  37.             height: 100px;
  38.             border-radius: 10px;
  39.             display: flex;
  40.             justify-content: space-between;
  41.           "
  42.         >
  43.           <div>信息</div>
  44.           <div id="popup-closer">关闭</div>
  45.         </div>
  47.         <a id="popup-closer" class="ol-popup-closer" style="color: #8e908c"></a>
  48.       </div>
  50.       <div
  51.         id="popup-content"
  52.         style="padding: 10px; width: 500px; height: 100px"
  53.       ></div>
  54.     </div>
  55.   </div>
  56. </template>

script

  1. <script setup>
  2. import { onMounted, ref } from "vue";
  3. import Map from "ol/Map";
  4. import View from "ol/View";
  5. import TileLayer from "ol/layer/Tile";
  6. import XYZ from "ol/source/XYZ";
  7. import Feature from "ol/Feature";
  8. import VectorSource from "ol/source/Vector";
  9. import VectorLayer from "ol/layer/Vector";
  10. import Point from "ol/geom/Point";
  11. import Overlay from "ol/Overlay.js";
  12. import { Circle, Geometry, LineString, Polygon } from "ol/geom";
  13. import {
  14.   Icon,
  15.   Style,
  16.   Stroke,
  17.   Circle as CircleStyle,
  18.   Fill,
  19.   Text,
  20. } from "ol/style";
  21. import { useRvo } from "@/hook/useRvo";
  22. import { useStore } from "vuex";
  23. import API from "@/network/api";
  24. import { Cluster, OSM } from "ol/source.js";
  25. import { altKeyOnly, click, pointerMove } from "ol/events/condition";
  26. import { boundingExtent } from "ol/extent";
  28. let choseLocation = ref("");
  29. let choseCoordinates = ref("");
  30. const radio = ref("");
  31. //地图容器
  32. let map;
  33. //矢量地图
  34. let baseMapLayer;
  35. //中文标记
  36. let annotateMapLayer;
  37. //加载资源类
  38. let vectorSource;
  39. //加载的资源图层
  40. let polygonsource;
  41. let polygonterLayer;
  42. let vectorLayer;
  43. let chosePositionSource;
  44. let chosePositionLayer;
  45. const store = useStore();
  46. //弹窗
  47. let popshow = ref("false");
  48. let container = document.getElementById("popup");
  49. let content = document.getElementById("popup-content");
  50. const fly = (e) => {
  51.   let features = [];
  52.   for (let item in polygonsource.featuresRtree_.items_) {
  53.     features.push(polygonsource.featuresRtree_.items_[item]);
  54.   }
  55.   let a = features[e];
  56.   Views.setCenter([(a.minX + a.maxX) / 2, (a.minY + a.maxY) / 2]);
  57.   Views.setZoom(18);
  58. };
  59. let overlay1 = new Overlay({
  60.   //设置弹出框的容器
  61.   element: container,
  62.   //是否自动平移，即假如标记在屏幕边缘，弹出时自动平移地图使弹出框完全可见
  63.   autoPan: true,
  64.   autoPanAnimation: {
  65.     duration: 250,
  66.     //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度.
  67.   },
  68. });
  69. const emit = defineEmits(["choseLocation"]);
  70. // 提交位置信息
  71. const confirmLocation = () => {
  72.   emit(
  73.     "choseLocation",
  74.     choseLocation.value,
  75.     projectArea,
  76.     choseCoordinates.value
  77.   );
  78. };
  79. let clusters = ref("");
  80. let MapList = ref("");
  81. const Views = new View({
  82.   projection: "EPSG:4326", //使用这个坐标系
  83.   center: [114.280485, 30.280073],
  84.   zoom: 5,
  85.   maxZoom: 23,
  86.   minZoom: 1,
  87.   // //1.设置缩放级别为整数
  88.   // constrainResolution: false,
  89.   // //2.关闭无级缩放地图
  90.   // smoothResolutionConstraint: false,
  91. });
  92. onMounted(async () => {
  93.   //获取访问者IP
  94.   overlay1.setPosition(undefined);
  96.   let IP = localStorage.getItem("Ip");
  97.   map = new Map({
  98.     target: "project_map",
  99.     view: Views,
  100.   });
  101.   //     // 天地图  标注
  102.   let url = "http://t{0-5}.tianditu.com/DataServer?x={x}&y={y}&l={z}";
  103.   url = `${url}&T=vec_c&tk={{自己的token}}`
  104.   const source = new XYZ({
  105.     url: url,
  106.     projection: "EPSG:4326",
  107.   });
  108.   baseMapLayer = new TileLayer({
  109.     source: source,
  110.   });
  111.   url = "http://t{0-5}.tianditu.com/DataServer?x={x}&y={y}&l={z}";
  112.   url = `${url}&T=cva_c&tk={{自己的token}}`;
  113.   const sourceCVA = new XYZ({
  114.     url: url,
  115.     projection: "EPSG:4326",
  116.   });
  118.   annotateMapLayer = new TileLayer({
  119.     source: sourceCVA,
  120.   });
  121.   //添加底图
  122.   map.addLayer(baseMapLayer);
  123.   let idRvo = useRvo().idRvo;
  124.   map.addLayer(annotateMapLayer);
  125.   // 请求数据
  126.   const getmaplist = async () => {
  127.     MapList.value = res.data;
  128.     createPoint(MapList.value);
  129.     createPolygon(MapList.value);
  130.   };
  131.   getmaplist();
  132.   // 加 聚合点
  133.   const createPoint = (list) => {
  134.     const features = new Array(list.holeList.length);
  135.     //遍历点，EPSG4326
  136.     for (let i = 0; i < list.holeList.length; ++i) {
  137.       let lan = list.holeList[i].geom
  138.         .slice(6, list.holeList[i].geom.length - 1)
  139.         .split(/\s+/)[0];
  140.       let lon = list.holeList[i].geom
  141.         .slice(6, list.holeList[i].geom.length - 1)
  142.         .split(/\s+/)[1];
  143.       let lanNum = Number(lan);
  144.       let lonNum = Number(lon);
  145.       const coordinates = [lanNum, lonNum];
  146.       features[i] = new Feature({
  147.         geometry: new Point(coordinates),
  148.         zkCode: list.holeList[i].zkCode,
  149.         warning: list.holeList[i].ewDrillholeInfos ? false : true,
  150.       });
  152.       features[i].setProperties(list.holeList[i].ewDrillholeInfos);
  153.     }
  154.     // 添加feature到source//添加点
  155.     const pointsource = new VectorSource({
  156.       features: features,
  157.     });
  158.     // 添加feature到source//添加到cluster
  159.     const clusterSource = new Cluster({
  160.       distance: 20,
  161.       minDistance: 5,
  162.       source: pointsource,
  163.     });
  164.     ///添加到适量层
  165.     const pointerLayer = new VectorLayer({
  166.       source: pointsource,
  167.     });
  168.     ///添加到clusters层
  169.     clusters = new VectorLayer({
  170.       source: clusterSource,
  171.       style: stylefunction,
  172.     });
  174.     //添加点到map
  175.     // map.addLayer(pointerLayer);
  176.     //添加点到clusters
  177.     map.addLayer(clusters);
  178.     // 设置图层高度
  179.     pointerLayer.setZIndex(100);
  180.   };
  181.   // 加面
  182.   const createPolygon = (list) => {
  183.     const features = new Array(list.groundList.length);
  185.     for (let i = 0; i < list.groundList.length; ++i) {
  186.       let onePolygon = [];
  187.       let polygoninfo = list.groundList[i]?.geo
  188.         .slice(9, list.groundList[i].geo.length - 2)
  189.         .split(",");
  190.       for (let index = 0; index < polygoninfo.length; index++) {
  191.         let lon = Number(polygoninfo[index].split(/\s+/)[0]);
  192.         let lan = Number(polygoninfo[index].split(/\s+/)[1]);
  193.         let point = [lon, lan];
  194.         onePolygon.push(point);
  195.       }
  196.       let finalArr = [];
  197.       finalArr.push(onePolygon);
  199.       features[i] = new Feature({
  200.         geometry: new Polygon(finalArr),
  201.       });
  202.     }
  203.     polygonsource = new VectorSource({
  204.       features: features,
  205.     });
  206.     polygonterLayer = new VectorLayer({
  207.       source: polygonsource,
  208.       // style: polugonstyles,
  209.     });
  210.     map.addLayer(polygonterLayer);
  211.     polygonterLayer.setZIndex(200);
  212.   };
  213.   //设置点样式
  214.   const stylefunction = (feature) => {
  215.     const styleCache = {};
  216.     const size = feature.get("features").length;
  217.     let style = styleCache[size];
  218.     if (!style) {
  219.       if (size == 1) {
  220.         if (feature.values_.features[0].values_.warning) {
  221.           style = new Style({
  222.             image: new Icon({
  223.               src: "src/assets/image/gisIco/icon_hover.png",
  224.               scale: map.getView().getZoom() / 14,
  225.             }),
  226.             text: new Text({
  227.               //对齐方式
  228.               textAlign: "center",
  229.               //文本基线
  230.               textBaseline: "middle",
  231.               //字体样式
  232.               font: "normal 10px 微软雅黑",
  233.               //文本内容
  234.               text: feature.values_.features[0].values_.zkCode,
  235.               //填充样式
  236.               fill: new Fill({
  237.                 color: "#aa3300",
  238.               }),
  239.               offsetY: (20 * map.getView().getZoom()) / 7,
  240.               //笔触
  241.               stroke: new Stroke({
  242.                 color: "#ffcc33",
  243.                 width: 2,
  244.               }),
  245.               scale: map.getView().getZoom() / 7,
  246.             }),
  247.           });
  248.         } else {
  249.           style = new Style({
  250.             image: new Icon({
  251.               src: "src/assets/image/gisIco/icon.png",
  252.               scale: map.getView().getZoom() / 14,
  253.             }),
  254.             text: new Text({
  255.               //对齐方式
  256.               textAlign: "center",
  257.               //文本基线
  258.               textBaseline: "middle",
  259.               //字体样式
  260.               font: "normal 10px 微软雅黑",
  261.               //文本内容
  262.               text: feature.values_.features[0].values_.zkCode,
  263.               //填充样式
  264.               fill: new Fill({
  265.                 color: "#aa3300",
  266.               }),
  267.               offsetY: (20 * map.getView().getZoom()) / 7,
  268.               //笔触
  269.               stroke: new Stroke({
  270.                 color: "#ffcc33",
  271.                 width: 2,
  272.               }),
  273.               scale: map.getView().getZoom() / 7,
  274.             }),
  275.           });
  276.         }
  277.       } else {
  278.         style = new Style({
  279.           image: new CircleStyle({
  280.             radius: 10,
  281.             stroke: new Stroke({
  282.               color: "#fff",
  283.             }),
  284.             fill: new Fill({
  285.               color: "#3399CC",
  286.             }),
  287.           }),
  288.           text: new Text({
  289.             text: size.toString(),
  290.             fill: new Fill({
  291.               color: "#fff",
  292.             }),
  293.           }),
  294.         });
  295.         styleCache[size] = style;
  296.       }
  297.     }
  298.     return style;
  299.   };
  301.   map.on("click", (e) => {
  302.     //cluster要到外部申明
  303.     clusters.getFeatures(e.pixel).then((clickedFeatures) => {
  304.       if (clickedFeatures.length) {
  305.         const features = clickedFeatures[0].get("features");
  306.         if (features.length > 1) {
  307.           const extent = boundingExtent(
  308.             features.map((r) => r.getGeometry().getCoordinates())
  309.           );
  310.           map
  311.             .getView()
  312.             .fit(extent, { duration: 1000, padding: [50, 50, 50, 50] });
  313.         } else {
  314.           let attr = features[0].values_[0];
  315.           let keyID = features[0].values_.zkCode;
  316.           let coodinate = e.coordinate;
  317.           let container = document.getElementById("popup");
  318.           let content = document.getElementById("popup-content");
  319.           let popupCloser = document.getElementById("popup-closer");
  320.           let overlay1 = new Overlay({
  321.             //设置弹出框的容器
  322.             element: container,
  323.             //是否自动平移，即假如标记在屏幕边缘，弹出时自动平移地图使弹出框完全可见
  324.             autoPan: true,
  325.             autoPanAnimation: {
  326.               duration: 250,
  327.               //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度.
  328.             },
  329.           });
  330.           if (features[0].values_[0]) {
  331.             content.innerHTML =
  332.               "<ul>" +
  333.               "<li>设备id: " +
  334.               keyID +
  335.               "</li>" +
  336.               "<li>设备描述:" +
  337.               attr.info +
  338.               "</li>" +
  339.               "<li>设备类型: " +
  340.               attr.type +
  341.               "</li>" +
  342.               "</ul>";
  343.           } else {
  344.             content.innerHTML =
  345.               "<ul>" + "<li>" + "警告" + "</li>" + "</ul>";
  346.           }
  348.           overlay1.setPosition(coodinate);
  349.           map.addOverlay(overlay1);
  350.           //关闭隐藏
  351.           popupCloser.addEventListener("click", function () {
  352.             overlay1.setPosition(undefined);
  353.           });
  354.         }
  355.       }
  356.     });
  357.   });
  358. });
  359. </script>
  1. <style scoped lang="scss">
  2. .selectLocation {
  3.   width: 100%;
  4.   height: 100%;
  5.   position: relative;
  6.   // float: right;
  7. }
  8. .layerControl {
  9.   overflow: auto;
  10.   width: 200px;
  11.   height: 300px;
  12.   background-color: rgb(255, 249, 249);
  13.   z-index: 100;
  14.   position: absolute;
  15.   top: 10px;
  16.   left: 50px;
  17. }
  18. .popup {
  19.   // width: 200px;
  20.   // height: 100px;
  21. }
  22. #popup-closer {
  23.   border-radius: 5px;
  24.   text-align: center;
  25.   width: 40px;
  26.   margin: 5px;
  27.   left: 380px;
  28.   height: 20px;
  29.   background-color: rgb(230, 114, 20);
  30. }
  31. .ol-popup {
  32.   position: absolute;
  33.   background-color: #eeeeee;
  34.   -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  35.   filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  36.   padding: 15px;
  37.   border-radius: 10px;
  38.   border: 1px solid #cccccc;
  39.   bottom: 12px;
  40.   left: 50px;
  41.   min-width: 280px;
  42. }
  43. .ol-popup:after,
  44. .ol-popup:before {
  45.   top: 100%;
  46.   border: solid transparent;
  47.   content: " ";
  48.   height: 0;
  49.   width: 0;
  50.   position: absolute;
  51.   pointer-events: none;
  52. }
  53. </style>

效果图

标签： javascript 前端 vue.js
本文转载自: https://blog.csdn.net/weixin_46527645/article/details/129026526
版权归原作者 三好学生69号 所有， 如有侵权，请联系我们删除。
登录后发布评论

“vue3+openlayers 点击点自定义弹窗，不同类型不同样式，点击面跳转，点的聚类”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。