公司网站域名注册费用,美容医院网站建设,网站原创性,太原不错的互联网公司Openlayers 实战 - 地图视野#xff08;View#xff09;- 图层 -#xff08;layer#xff09;- 资源#xff08;source#xff09;显示等级设置。 问题原因核心代码完整代码#xff1a;在线示例 在以往的项目维护中#xff0c;出现一个问题#xff0c;使用最新高清底图… Openlayers 实战 - 地图视野View- 图层 -layer- 资源source显示等级设置。 问题原因核心代码完整代码在线示例 在以往的项目维护中出现一个问题使用最新高清底图发现设置地图最大等级21级之后地图虽然可以渲染 21 级图层但是并没有请求 21 级图层瓦片数据。
思考之后认为是地图等级参数限制经过调试发现问题所在不仅于此后来解决问题这里记录一下。
本文包括问题原因、问题解决核心代码以及在线示例。 问题原因
地图图层想要设置缩放等级需要三个条件
1. 地图视野 View 对象设置 minzoom maxzoom 参数。
2. 图层 layer 对象设置 minzoom maxzoom 参数。
3. 资源 source 设置分辨率 tileGrid-resolutions 参数。 三个条件缺一不可以下分别设置部分对象属性出现的问题
1.只设置地图不设置图层地图可以放大但是不会请求资源由于图层没有资源会显示空白。
PS: 下图额外加载了一个显示 zoom 的图层。 2. 只设置图层不设置地图地图不能继续放大因此也不会加载高等级图层瓦片。 3. 设置地图以及图层不设置资源地图和图层可以放大但是不会请求资源只是图片放大了看起来会模糊。 4. 地图视野、图层、资源同时设置会正常请求相应的数据。 核心代码
这里放上控制地图视野View、图层Layer、资源Source对象缩放等级的代码
其中加载了一个显示瓦片索引的图层用来查看图层瓦片请求情况瓦片索引的图层 // 地图视野等级设置
function viewZoom() {view.setMaxZoom(maxZoom);view.setZoom(defaultMaxZoom 1);
}// 图层等级设置
function layerZoom() {layer.setMaxZoom(maxZoom);
}// 图层资源等级设置
function sourceZoom() {layer.setSource(getOptional(getUrl(),maxZoom))
}// 还原所有缩放等级
function restoreZoom() {view.setMaxZoom(defaultMaxZoom);layer.setMaxZoom(defaultMaxZoom);layer.setSource(getOptional(getUrl(),defaultMaxZoom))view.setZoom(defaultMaxZoom);
} 完整代码 html langen
headmeta charsetutf-8!--注意openlayers 原版的比较慢这里引起自己服务器版--link relstylesheet hrefhttp://openlayers.vip/examples/css/ol.css typetext/cssstyle/* 注意这里必须给高度否则地图初始化之后不显示一般是计算得到高度然后才初始化地图 */.map {height: 400px;width: 100%;float: left;}/style!--注意openlayers 原版的比较慢这里引起自己服务器版--script srchttp://openlayers.vip/examples/resources/ol.js/scripttitleOpenLayers example/title
/head
body
h2View Layer Zoom/h2
!--地图容器需要指定 id --
div idmap classmap/div
script typetext/javascript// 自己的tklet TK 2b7cbf61123cbe4e9ec6267a87e7442f;// 默认地图等级const defaultMaxZoom 14;// 设置新的最大等级const maxZoom 18;// 定位测试等级const moveToZoom 16;// 获取天地图资源地址let getUrl function (type IMG_C) {let url http://t{randomNumber}.tianditu.gov.cn/DataServer?T{type}x{x}y{y}l{z};url url.replace({randomNumber}, Math.round(Math.random() * 7).toString());url url.replace({type}, type);url url tk TK;return url;}// 获取分辨率数组let getResolutionsExpert function (size, maxZoom defaultMaxZoom) {let resolutions new Array(maxZoom);let matrixIds new Array(maxZoom);for (let z 0; z maxZoom 1; z) {//分辨率resolutions[z] size / Math.pow(2, z);//放大等级matrixIds[z] z;}return resolutions;}// 获取图层资源对象let getOptional function (url, maxZoom) {let projection ol.proj.get(EPSG:4326);let projectionExtent projection.getExtent();let size ol.extent.getWidth(projectionExtent) / 256;return new ol.source.XYZ({crossOrigin: anonymous,wrapX: true,//切片xyz获取方法tileUrlFunction: function (tileCoord) {const z tileCoord[0];const x tileCoord[1];let y tileCoord[2];let completeUrl url.replace({z}, z.toString()).replace({y}, y.toString()).replace({x}, x.toString());return completeUrl;},//坐标系projection: projection,tileGrid: new ol.tilegrid.TileGrid({origin: ol.extent.getTopLeft(projectionExtent),tileSize: [256, 256],//分辨率数组 天地图为 1.40625resolutions: getResolutionsExpert(size, maxZoom)}),})}// 初始图层资源对象const source getOptional(getUrl());//影像图function getIMG_CLayer() {let layer new ol.layer.Tile({name: 天地图影像图层,source: source,maxZoom: defaultMaxZoom,minZoom: 1,});return layer;}// 地图视野对象const view new ol.View({projection: EPSG:4326,// 定位center: [116, 39],// 缩放zoom: defaultMaxZoom,maxZoom: defaultMaxZoom,minZoom: 1,});// 图层对象const layer getIMG_CLayer();// 网格图层参数const size 256;const canvas document.createElement(canvas);canvas.width size;canvas.height size;const context canvas.getContext(2d);context.strokeStyle white;context.textAlign center;context.font 40px sans-serif;const lineHeight 15;// 地图对象const map new ol.Map({// 地图容器target: map,// 地图图层比如底图、矢量图等layers: [layer,// 添加网格图层显示等级Znew ol.layer.WebGLTile({source: new ol.source.DataTile({loader: function (z, x, y) {const half size / 2;context.clearRect(0, 0, size, size);context.fillStyle rgba(100, 100, 100, 0.1);context.fillRect(0, 0, size, size);context.fillStyle white;context.fillText(z: ${z}, half, half lineHeight);// context.fillText(x: ${x}, half, half);// context.fillText(y: ${y}, half, half lineHeight);context.strokeRect(0, 0, size, size);const data context.getImageData(0, 0, size, size).data;// converting to Uint8Array for increased browser compatibilityreturn new Uint8Array(data.buffer);},// disable opacity transition to avoid overlapping labels during tile loadingtransition: 0,}),}),],// 地图视野view: view});// 地图视野等级设置function viewZoom() {view.setMaxZoom(maxZoom);view.setZoom(defaultMaxZoom 1);}// 图层等级设置function layerZoom() {layer.setMaxZoom(maxZoom);}// 图层资源等级设置function sourceZoom() {layer.setSource(getOptional(getUrl(),maxZoom))}// 还原所有缩放等级function restoreZoom() {view.setMaxZoom(defaultMaxZoom);layer.setMaxZoom(defaultMaxZoom);layer.setSource(getOptional(getUrl(),defaultMaxZoom))view.setZoom(defaultMaxZoom);}
/scriptbutton idviewZoom onClickviewZoom()设置地图缩放等级不改变 layer 和 source/button
button idlayerZoom onClicklayerZoom()设置图层缩放等级不改变 map 和 source/button
button idsourceZoom onClicksourceZoom()设置资源缩放等级不改变 map 和 layer/button
button idrestoreZoom onClickrestoreZoom()还原所有缩放等级/button
/body
/html 在线示例
在线示例Openlayers 显示等级设置
