赞
踩
npm install ol
<template> <div class="" style="width: 95%; height: 95%"> <div style="width: 100%; height: 100%" id="map" ref="rootmap"></div> <div id="popup" class="ol-popup"> <a href="#" id="popup-closer" class="ol-popup-closer"></a> <div id="popup-content"></div> </div> </div> </template> <script> import "ol/ol.css"; import { Map, View } from "ol"; import { Tile as TileLayer } from "ol/layer"; import { WMTS } from "ol/source"; import WMTSTileGrid from "ol/tilegrid/WMTS"; import { Projection } from "ol/proj"; import { mapGetters } from "vuex"; import FullScreen from "ol/control/FullScreen"; import ScaleLine from "ol/control/ScaleLine"; import ZoomSlider from "ol/control/ZoomSlider"; import MousePosition from "ol/control/MousePosition"; import { defaults } from "ol/control"; // 图上图标相关 import OlFeature from "ol/Feature"; import OlGeomPoint from "ol/geom/Point"; import OlLayerVector from "ol/layer/Vector"; import OlSourceVector from "ol/source/Vector"; import OlStyleStyle from "ol/style/Style"; import OlStyleIcon from "ol/style/Icon"; import Overlay from "ol/Overlay"; // 用来添加相关文字描述的 // import Text from 'ol/style/Text' // import Fill from 'ol/style/Fill' const baseUrl = "http://map.teacha.top/geoserver/gwc/service/wmts"; const gridsetName = "EPSG:4326"; const gridNames = [ "EPSG:4326:4", "EPSG:4326:5", "EPSG:4326:6", "EPSG:4326:7", "EPSG:4326:8", "EPSG:4326:9", "EPSG:4326:10", "EPSG:4326:11", "EPSG:4326:12", "EPSG:4326:13", "EPSG:4326:14", "EPSG:4326:15", "EPSG:4326:16", "EPSG:4326:17", "EPSG:4326:18", "EPSG:4326:19", ]; //切片名 const style = ""; const format = "image/png"; const layerName = "xtmap:6-1"; const resolutions = [ 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 6.866455078125e-4, 3.433227539062e-4, 1.716613769531e-4, 8.58306884766e-5, 4.29153442383e-5, 2.14576721191e-5, 1.07288360596e-5, 5.3644180298e-6, 2.6822090149e-6, 1.3411045074e-6, ]; //分辨率 const baseParams = [ "VERSION", "LAYER", "STYLE", "TILEMATRIX", "TILEMATRIXSET", "SERVICE", "FORMAT", ]; //const map = [] export default { name: "lq-map", data() { return { map: [], layers: [], // 存放标注点。 dataList: [ { popuId: 22202, correctionTypeStr: "XXXXXXX", areaName: "XXXX", name: "XX", lon: "108.99316336631775", id: 103, personNumber: null, residenceAddress: "XXXXXXXXXX", lat: "28.44491170883179", sexStr: "XXX", } ], // 数据 }; }, computed: { ...mapGetters(["userInfo"]), }, methods: { constructSource(projection) { var url = baseUrl + "?"; var params = { VERSION: "1.0.0", LAYER: layerName, STYLE: style, TILEMATRIX: gridNames, TILEMATRIXSET: gridsetName, SERVICE: "WMS", FORMAT: format, }; for (var param in params) { if (baseParams.indexOf(param.toUpperCase()) < 0) { url = url + param + "=" + params[param] + "&"; } } url = url.slice(0, -1); var source = new WMTS({ url: url, layer: params["LAYER"], matrixSet: params["TILEMATRIXSET"], format: params["FORMAT"], projection: projection, tileGrid: new WMTSTileGrid({ tileSize: [256, 256], extent: [-180.0, -90.0, 180.0, 90.0], origin: [-180.0, 90.0], resolutions: resolutions, matrixIds: params["TILEMATRIX"], }), style: params["STYLE"], wrapX: true, }); return source; }, initMap() { var view; var projection = new Projection({ code: "EPSG:4326", //SRS标识符代码,例如EPSG:4326。 units: "degrees", // worldExtent:[108.991275931,28.43280519,109.003845419,28.447106813],// 地图最大最小经纬度 global: false, // 该预测是否对整个地球有效。 axisOrientation: "neu", // 获取此投影的轴方向。示例值包括:enu-默认的东,北,高程。neu-向北,向东,向上-对于“纬度/经度”地理坐标或朝南的横向墨卡托很有用。wnu-西,北,上-一些行星坐标系具有“西正”坐标系 }); view = new View({ center: [108.9959979057312, 28.442698717117313], zoom: 18, minZoom: 14, maxZoom: 20, projection: projection, // 展示地图- extent: [108.991275931, 28.43280519, 109.003845419, 28.447106813], }); this.map = new Map({ target: "map", layers: [ new TileLayer({ source: this.constructSource(projection), }), ], view: view, controls: defaults({ attribution: false, //右下角的地图信息控件 rotate: true, //指北针控件 zoom: true, //缩放按钮控件 }).extend([ new FullScreen(), //全屏 new ScaleLine(), //比例尺控件 new ZoomSlider(), //缩放滚动条控件 new MousePosition(), //鼠标拖动显示经纬度 ]), }); this.popup(); this.addMaker(); }, //添加标注点 addMaker() { // 清除上一次标注点 this.layers.forEach((e) => { this.map.removeLayer(e); }); //$("#patrol_number").text(this.dataList.length); this.dataList.forEach((obj) => { var vectorSource = new OlSourceVector({}); //创建图标特性 var iconFeature = new OlFeature({ geometry: new OlGeomPoint([obj.lon, obj.lat], "XY"), name: "my Icon", }); iconFeature.set("userId", obj.id); iconFeature.set("popuId", obj.popuId); iconFeature.set("username", obj.name); iconFeature.set("addTime", obj.residenceAddress); iconFeature.set("areaName", obj.areaName); iconFeature.set("sexStr", obj.sexStr); iconFeature.set("correctionTypeStr", obj.correctionTypeStr); iconFeature.set("personNumber", obj.personNumber); //将图标特性添加进矢量中 vectorSource.addFeature(iconFeature); //创建图标样式 var iconStyle = new OlStyleStyle({ image: new OlStyleIcon({ // opacity: 0.75, // scale:0.5, src: "/img/marker.png", }), }); //创建矢量层 var vectorLayer = new OlLayerVector({ source: vectorSource, style: iconStyle, }); this.layers.push(vectorLayer); //添加进map层 this.map.addLayer(vectorLayer); }); }, popup() { //定位 var container = document.getElementById("popup"); var content = document.getElementById("popup-content"); var popupCloser = document.getElementById("popup-closer"); var overlay = new Overlay({ //设置弹出框的容器 element: container, //是否自动平移,即假如标记在屏幕边缘,弹出时自动平移地图使弹出框完全可见 autoPan: true, }); this.map.on("click", (e) => { //coodinate存放了点击时的坐标信息 var coodinate = e.coordinate; //在点击时获取像素区域 var pixel = this.map.getEventPixel(e.originalEvent); this.map.forEachFeatureAtPixel(pixel, (feature) => { //设置弹出框内容,可以HTML自定义 var userId = feature.get("userId"); var username = feature.get("username"); var addTime = feature.get("addTime"); var areaName = feature.get("areaName"); var sexStr = feature.get("sexStr"); var correctionTypeStr = feature.get("correctionTypeStr"); //设置弹出框内容,可以HTML自定义 var html = ""; html += "<div><b>编号:</b>" + userId + "</div>"; html += '<div><b>姓名:</b><a οnclick="showFamilyInfo(' + feature.get("popuId") + ')">' + username + "</a></div>"; html += "<div><b>性别:</b>" + sexStr + "</div>"; html += "<div><b>矫正类别:</b>" + correctionTypeStr + "</div>"; html += "<div><b>行政区域:</b>" + areaName + "</div>"; html += "<div><b>地址:</b>" + addTime + "</div>"; content.innerHTML = html; //设置overlay的显示位置 overlay.setPosition(coodinate); //显示overlay this.map.addOverlay(overlay); }); // 弹窗关闭按钮 if (popupCloser) { popupCloser.addEventListener("click", () => { overlay.setPosition(undefined); }); } }); }, }, mounted() { this.initMap(); }, }; </script> <style> .el-font-size { font-size: 14px; } .ol-mouse-position { color: red; top: 13px; right: 60px; } .form-control { padding: 3px 12px !important; } .col-sm-8 label { padding-top: 7px; } p { margin: 0; } .active { background-color: #f5f5f5; } .ant-list * { outline: none; } .ant-avatar > img { width: 100%; height: 100%; display: block; border-radius: 5px; } .ant-list-item-meta-title > a { color: rgba(0, 0, 0, 0.65); -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .form-control { padding: 15px 12px !important; } input, select { border: 1px solid #e7eaec !important; } label { max-width: none; } .ol-popup { filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)); position: absolute; background-color: #ffffff; -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)); padding: 10px; border-radius: 7px; bottom: 12px; left: -50px; min-width: 300px; } .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: #eeeeee; 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; } .ol-popup-closer:after { content: "✖"; font-size: 11px; } </style>
<template> <div class="" style="width:95%;height: 95%"> <div style="width:100%;height: 100%" id="map" ref="rootmap"></div> </div> </template> <script> import "ol/ol.css"; import { Map, View } from "ol"; import {Tile as TileLayer} from 'ol/layer'; import {WMTS} from 'ol/source'; import WMTSTileGrid from 'ol/tilegrid/WMTS' import {Projection} from 'ol/proj'; import {mapGetters} from "vuex"; import FullScreen from 'ol/control/FullScreen'; import ScaleLine from 'ol/control/ScaleLine'; import ZoomSlider from 'ol/control/ZoomSlider'; import MousePosition from 'ol/control/MousePosition'; import { defaults } from "ol/control"; // 图上图标相关 import OlFeature from 'ol/Feature' import OlGeomPoint from 'ol/geom/Point' import OlLayerVector from 'ol/layer/Vector' import OlSourceVector from 'ol/source/Vector' import OlStyleStyle from 'ol/style/Style' import OlStyleIcon from 'ol/style/Icon' // 用来添加相关文字描述的 // import Text from 'ol/style/Text' // import Fill from 'ol/style/Fill' const baseUrl = 'http://map.teacha.top/geoserver/gwc/service/wmts' const gridsetName = 'EPSG:4326' const gridNames = ['EPSG:4326:4','EPSG:4326:5','EPSG:4326:6','EPSG:4326:7','EPSG:4326:8', 'EPSG:4326:9', 'EPSG:4326:10', 'EPSG:4326:11', 'EPSG:4326:12', 'EPSG:4326:13', 'EPSG:4326:14', 'EPSG:4326:15', 'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18', 'EPSG:4326:19'] //切片名 const style = '' const format = 'image/png' const layerName = 'xtmap:6-1' const resolutions = [0.0439453125,0.02197265625, 0.010986328125, 0.0054931640625,0.00274658203125,0.001373291015625, 6.866455078125E-4,3.433227539062E-4,1.716613769531E-4,8.58306884766E-5, 4.29153442383E-5,2.14576721191E-5,1.07288360596E-5,5.3644180298E-6, 2.6822090149E-6,1.3411045074E-6] //分辨率 const baseParams = ['VERSION','LAYER','STYLE','TILEMATRIX','TILEMATRIXSET','SERVICE','FORMAT'] //const map = [] export default { name: "lq-map", data() { return { map: [], layers : []// 存放标注点。 }; }, computed: { ...mapGetters(["userInfo"]), }, methods: { constructSource(projection) { var url = baseUrl+'?' var params = { 'VERSION': '1.0.0', 'LAYER': layerName, 'STYLE': style, 'TILEMATRIX': gridNames, 'TILEMATRIXSET': gridsetName, 'SERVICE': 'WMS', 'FORMAT': format } for (var param in params) { if (baseParams.indexOf(param.toUpperCase()) < 0) { url = url + param + '=' + params[param] + '&'; } } url = url.slice(0, -1); var source = new WMTS({ url: url, layer: params['LAYER'], matrixSet: params['TILEMATRIXSET'], format: params['FORMAT'], projection: projection, tileGrid: new WMTSTileGrid({ tileSize: [256,256], extent: [-180.0,-90.0,180.0,90.0], origin: [-180.0, 90.0], resolutions: resolutions, matrixIds: params['TILEMATRIX'] }), style: params['STYLE'], wrapX: true }); return source; }, initMap() { var view; var projection = new Projection({ code: 'EPSG:4326', //SRS标识符代码,例如EPSG:4326。 units: 'degrees', // worldExtent:[108.991275931,28.43280519,109.003845419,28.447106813],// 地图最大最小经纬度 global: false, // 该预测是否对整个地球有效。 axisOrientation: 'neu' // 获取此投影的轴方向。示例值包括:enu-默认的东,北,高程。neu-向北,向东,向上-对于“纬度/经度”地理坐标或朝南的横向墨卡托很有用。wnu-西,北,上-一些行星坐标系具有“西正”坐标系 }); view = new View({ center: [108.9959979057312, 28.442698717117313], zoom: 18, minZoom: 14, maxZoom: 20, projection: projection,// 展示地图- extent: [108.991275931, 28.43280519, 109.003845419, 28.447106813], }); this.map = new Map({ target: "map", layers: [ new TileLayer({ source: this.constructSource(projection) }) ], view: view, controls: defaults({ attribution: false,//右下角的地图信息控件 rotate: true,//指北针控件 zoom: true, //缩放按钮控件 }).extend([ new FullScreen(),//全屏 new ScaleLine(),//比例尺控件 new ZoomSlider(),//缩放滚动条控件 new MousePosition()//鼠标拖动显示经纬度 ]), }); this.popup(); }, popup(){//定位 this.map.on('click',(e)=>{ // 清除上一次标注点 this.layers.forEach(e => { this.map.removeLayer(e); }) var coodinate = e.coordinate; // 清除上一次标注点 var vectorSource = new OlSourceVector({}); //创建图标特性 var iconFeature = new OlFeature({ geometry: new OlGeomPoint([coodinate[0],coodinate[1]], "XY"), name: "my Icon" }); //将图标特性添加进矢量中 vectorSource.addFeature(iconFeature); //创建图标样式 var iconStyle = new OlStyleStyle({ image: new OlStyleIcon({ opacity: 0.75, src: "/img/marker.png" }), }); //创建矢量层 var vectorLayer = new OlLayerVector({ source: vectorSource, style: iconStyle }); this.layers.push(vectorLayer); //添加进map层 this.map.addLayer(vectorLayer); this.$emit("onLonLat",coodinate[0],coodinate[1]);//获取到的经纬度。 }); } }, mounted() { this.initMap() } }; </script> <style> .el-font-size { font-size: 14px; } .ol-mouse-position{ color: red; top: 13px; right: 60px; } </style>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。