天地图叠加海图（图片偏移问题）Vue3 ol proj4

依赖

npm install olnpm i proj4

<template><div style="height: 100%;width: 100%;"></div>
</template><script setup>import "ol/ol.css";import Image from "ol/layer/Image";import ImageWMS from "ol/source/ImageWMS";import TileLayer from "ol/layer/Tile";import XYZ from "ol/source/XYZ";import {createXYZ} from "ol/tilegrid";import {Map,View} from "ol";import {transform} from "ol/proj";import {get as getProjection,transformExtent} from "ol/proj";import {register} from "ol/proj/proj4";import proj4 from "proj4";const {proxy} = getCurrentInstance();const map = ref(null);const zoom = 13;const center = [116.397428, 39.90923];const tiandituUrl = "http://t0.tianditu.gov.cn/";const hangdaotuUrl = "http://36.156.155.131:8090/";// 解决海图图片偏移问题proj4.defs('EPSG:3395','+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs');register(proj4);// 解决海图图片偏移问题/*** 初始化地图*/const initMap = () => {map.value = new Map({target: proxy.$el,layers: [new TileLayer({source: new XYZ({tileSize: 256 * 1,url: `${tiandituUrl}DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=317e52a409b6b382957e09003ee7e235`, // 天地图}),}),new TileLayer({opacity: 0.5,source: new XYZ({tileSize: 256 * 4,url: 'http://m12.shipxy.com/tile.c?l=Na&m=o&y={y}&x={x}&z={z}', // 海图projection: 'EPSG:3395',tileGrid: createXYZ({extent: [-20037508.342789244,-20037508.342789244,20037508.342789244,20037508.342789244]})}),}),new TileLayer({source: new XYZ({tileSize: 256 * 1,url: `${tiandituUrl}DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=317e52a409b6b382957e09003ee7e235`, // 天地图标注}),}),],view: new View({// 指定地图投影模式projection: "EPSG:4326",// 定义地图显示的坐标center: [Number(center[0]),Number(center[1]),],// 限制地图中心范围，但无法限制缩小范围// extent: [110, 26, 114, 30],// 定义地图显示层级为16zoom: zoom,// 限制缩放级别，可以和extent同用限制范围maxZoom: 19,// 最小级别，越大则面积越大minZoom: 4,}),});//地图拖动事件map.value.on("moveend", function(evt) {});map.value.on("change", function(evt) {if (source.getState() === "ready") {// 获取数据集// features = source.getFeatures(); console.log(source.getFeatures())}});map.value.on("pointermove", function(evt) { console.log(evt)var pixel = this.getEventPixel(evt.originalEvent);var feature = this.forEachFeatureAtPixel(pixel, function(feature) {return feature;});if (feature == undefined) {this.getTargetElement().style.cursor = "auto";} else {//  // console.log(feature);if (feature.id_ && feature.id_.indexOf("3800") == 0) {this.getTargetElement().style.cursor = "pointer";}}});map.value.on("singleclick", function(evt) {// console.log("singleclick");var pixel = this.getEventPixel(evt.originalEvent);var feature = this.forEachFeatureAtPixel(pixel, function(feature) {return feature;});if (feature == undefined) {} else {// console.log(feature);}});// console.log(map.value);proxy.$emit("ready", map.value);};const moveTo = (center = center, zoom) => {// map.value.getView().setCenter(center);if (typeof zoom == "number") {map.value.getView().setZoom(zoom);}// console.log(center);map.value.getView().animate({center: center,duration: 300,});};nextTick(() => {initMap();});defineExpose({moveTo,map,});
</script>

天地图叠加海图（图片偏移问题）Vue3 ol proj4相关推荐

Openlayers笔记之图片偏移的完整解决方案
本文介绍 Openlayers 如何实现图片偏移标注的功能,同时提供在图片缩放比例变化时纠正偏移的解决方法. 1.创建矢量图层 // 创建矢量源 window.vectorSource = new w ...
html2canvas图片位移_html2canvas html截图插件图片放大清晰度处理方案，支撑恣意放大倍数，处理原插件图片偏移题目...
html2canvas html截图插件图片放大清晰度处理方案,支撑恣意放大倍数,处理原插件图片偏移题目 Author:youzebin (2016.12.6) 插件下载地点:https://gith ...
CSS 图片偏移技术以及坐标问题
CSS中通过图片偏移技术可以实现将众多小图标放入一个图片中 ,网页加载时只需要加载一个图片即可实现得到众多小图标的功能.这是前端设计时候对图片的一种优化方式. 图片偏移技术只是一个属性而已,即:bac ...
html页面整体偏移了怎么办,html2canvas生成的图片偏移不完整的解决方法
情景一: 问题背景:生成的图片在一个弹窗里面,如果页面没有滚动条就是正常的,但是一旦出现滚动条并且页面发生滚动时html2canvas绘制成的图片就会偏移出对应滚动高度的白边,如下: 解决办法: 楼主 ...
登录图片验证（vue3）
登录图片验证(vue3) 我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客: html布局 ,分为上下两个区域 ...
MATLAB画WRF模式的domain叠加海图和地形
MATLAB画WRF模式的domain叠加海图和地形
Qt 视频上叠加透明图片
Qt 视频上叠加透明图片最近公司需要一个上位机软件,主要是全屏显示视频,在视频上面叠加透明图片. 调试了很多种方法,效果都不如意,主要是因为Qt 窗口背景不能被覆盖,透明背景,又不能播放视频. 我调 ...
html图片滚动红点_html2canvas生成的图片偏移问题
this.$nextTick(() => { // 使用$nextTick,解决数据还没有渲染到html就先转为图片,此时的图片会是空内容的问题// var canvas2 = document ...
devexpress内置图片的位置_向微思WGIS中叠加位图图片
很多时候,很多数据内容是以位图图片的形式存在的,位图图片也是我们最容易获取到的数据形式之一. 那如何将位图图片加载到WGIS中,并正确显示在相应的位置上呢? 要实现以上操作,我们将使用"添加 ...

天地图叠加海图（图片偏移问题）Vue3 ol proj4

天地图叠加海图（图片偏移问题）Vue3 ol proj4相关推荐

最新文章

热门文章