openlayers 对接
<html>
<head>
<title>切片浏览</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script src="js/OpenLayers.js"></script>
<script src="js/Config.js"></script>
<script src="js/ajax.js"></script>
<style type="text/css">
.olImageLoadError {
background-color: transparent !important;
display:none;
}
</style>
<script type="text/javascript">
var map, layer; //complex object of type OpenLayers.Map
var proj = new OpenLayers.Projection("EPSG:4326");
var mapproj = new OpenLayers.Projection("EPSG:104000");
//Initialise the 'map' object
function init() {
var imageUrl = GetParamValue("strImageUrl", strImageUrl);
var extentbak = new OpenLayers.Bounds(0, -90, 180, 90);
var extent = new OpenLayers.Bounds(
116.67871, 34.47558, 117.97167, 35.35058
);
//extent.transform(proj, mapproj);
// extentbak.transform(proj, mapproj);
var extentbak2 = new OpenLayers.Bounds(13348809.744547672, 3500204.402117868, 13409959.366471555, 3561506.9011374912);
extentbak2.transform(mapproj, proj);
map = new OpenLayers.Map("map", {
maxExtent: extentbak,
// restrictedExtent: extent,
maxResolution: 0.000976566472126202, // corresponds to level 8 in the cache
numZoomLevels: 10,
units: 'degrees',
projection: "EPSG:104000",
tileOrigin: {lat:45,lon:0}
// displayProjection: new OpenLayers.Projection("EPSG:4326")
});
layer = new OpenLayers.Layer.TMS("Name",
imageUrl, {
'type': 'png',
'getURL': getUrl//get_my_url
});
map.tileSize = new OpenLayers.Size(256, 256);
layer.setTileSize(new OpenLayers.Size(256, 256))
var vectorLayer = new OpenLayers.Layer.Vector("vector");
//创建Geometry对象
var point = new OpenLayers.Geometry.Point(119.9143982, 30.4486737);
point.transform(proj, mapproj);
//创建Feature对象
var fea = new OpenLayers.Feature.Vector(point);
//把Feature对象添加到图层
vectorLayer.addFeatures(fea);
var point = new OpenLayers.Geometry.Point(120.4637146, 30.4486737);
point.transform(proj, mapproj);
//创建Feature对象
var fea = new OpenLayers.Feature.Vector(point);
vectorLayer.addFeatures(fea);
var point = new OpenLayers.Geometry.Point(119.9143982, 29.9751599);
point.transform(proj, mapproj);
//创建Feature对象
var fea = new OpenLayers.Feature.Vector(point);
//把Feature对象添加到图层
vectorLayer.addFeatures(fea);
var point = new OpenLayers.Geometry.Point(120.4637146, 29.9751599);
point.transform(proj, mapproj);
//创建Feature对象
var fea = new OpenLayers.Feature.Vector(point);
vectorLayer.addFeatures(fea)
var point = new OpenLayers.Geometry.Point(120.145315, 30.199747);
point.transform(proj, mapproj);
//创建Feature对象
var fea = new OpenLayers.Feature.Vector(point);
vectorLayer.addFeatures(fea)
map.addControl(new OpenLayers.Control.MousePosition());
map.addLayers([layer, vectorLayer])
map.addControl(new OpenLayers.Control.PanZoomBar());
map.events.register("click", null, function (e) {
var ContextLonLat = map.getLonLatFromPixel(new OpenLayers.Pixel(e.x, e.y));
alert(ContextLonLat.lon + " " + ContextLonLat.lat);
// Geo.Map.DrawCtrl.DrawStartEndPoint(ContextLonLat.lon, ContextLonLat.lat, "images/img/ico_start1.png");
});
var lonLat = new OpenLayers.LonLat(119.9143982, 30.4486737);
lonLat.transform(map.displayProjection, map.getProjectionObject());
map.setCenter(lonLat, parseInt(0));
getlanguage();
}
function getUpperLeftTileCoord(res) {
var upperLeft = new OpenLayers.Geometry.Point(
map.maxExtent.left,
map.maxExtent.top);
return getContainingTileCoords(upperLeft, res);
}
function getLowerRightTileCoord(res) {
var bottomRight = new OpenLayers.Geometry.Point(
map.maxExtent.right,
map.maxExtent.bottom);
return getContainingTileCoords(bottomRight, res);
}
function getContainingTileCoords(point, res) {
return new OpenLayers.Pixel(
Math.max(Math.floor((point.x - map.tileOrigin.lon) / (map.tileSize.w * res)),0),
Math.max(Math.floor((map.tileOrigin.lat - point.y) / (map.tileSize.h * res)),0)
);
}
function getUrl(bounds) {
var res = this.getResolution();
var originTileX = (this.tileOrigin.lon + (res * this.tileSize.w/2));
var originTileY = Math.abs((0+(res * this.tileSize.h/2)));
//originTileY=0;
var z = this.map.getZoom();
var center = bounds.getCenterLonLat();
var point = { x: center.lon, y: center.lat };
var x = (Math.round(Math.abs((center.lon - originTileX) / (res * this.tileSize.w))));
var y = (Math.round(Math.abs((center.lat-originTileY) / (res * this.tileSize.h))));
// this prevents us from getting pink tiles (non-existant tiles)
if (this.lods) {
var lod = this.lods[this.map.getZoom()];
if ((x < lod.startTileCol || x > lod.endTileCol)
|| (y < lod.startTileRow || y > lod.endTileRow)) {
return null;
}
}
else {
var start = getUpperLeftTileCoord(res);
var end = getLowerRightTileCoord(res);
if ((x < start.x || x >= end.x)
|| (y < start.y || y >= end.y)) {
return null;
}
}
//originTileX=0;
//originTileY=0;
var x2 = (Math.round(Math.abs((center.lon - originTileX) / (res * this.tileSize.w))));
var y2 = (Math.round(Math.abs((center.lat-originTileY) / (res * this.tileSize.h))));
// Write the values into our formatted url
//url = OpenLayers.String.format(url, {'x': x, 'y': y, 'z': z});
z=z+11;
//url=Hzgis.CommonMap.PGISMap+"&Col="+x2+"&Row="+y2+"&Zoom="+z+"&V=0.3";
//alert(url);
var imgsrc = "http://10.118.128.33:7001/PGIS_S_TileMapServer/Maps/default/EzMap?Service=getImage&Type=RGB&Zoom=" + z + "&Row=" + y2 + "&Col=" + x2 + "&V=0.3"
return imgsrc;
}
function playtrace(tracepoint)
{
var vectors, lineFeature;//存放线路
//线路样式
var style_green = {
strokeColor: "#0",
strokeWidth: 1,
strokeDashstyle: "dashdot",
pointRadius: 6,
pointerEvents: "visiblePainted"
};
//画线图层设置
var layer_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
layer_style.fillOpacity = 0.2;
layer_style.graphicOpacity = 1;
//画线图层
vectors = new OpenLayers.Layer.Vector("Simple Geometry", { style: layer_style });
map.addLayer(vectors);
//一下采用数组型式填充轨迹
var pointList = [];
// var readerCoo = [];
//readerCoo.push({ "lon": 120.4637146, "lan": 29.9751599 });
// readerCoo.push({ "lon": 120.4637146, "lan": 30.4486737 });
// readerCoo.push({ "lon": 119.9143982, "lan": 30.4486737 });
// readerCoo.push({ "lon": 119.9143982, "lan": 29.9751599 });
// readerCoo.push({ "lon": 120.4637146, "lan": 29.9751599 });
for (var i = 0; i < tracepoint.length; i++) {
if (parseInt(tracepoint[i].lo) < 10) continue;
var newPoint = new OpenLayers.Geometry.Point(parseFloat(tracepoint[i].lo) + 0.00469276, parseFloat(tracepoint[i].la) - 0.002422505);
newPoint.transform(map.displayProjection, map.getProjectionObject());
pointList.push(newPoint);
}
lineFeature = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(pointList), null, style_green);
vectors.addFeatures([lineFeature]);
}
function getlanguage() {
var param = {
"PlayGHz": "1",
"UserID": "81",
"limit": "100",
"pageIndex": "1",
"BegTime": "2013-05-21",
"EndTime": "2013-05-22"
};
jquerygetNewData_ajax("http://10.8.52.241:8080/Handlers/GetGisHistoryByUserID.ashx", param, function (request) {
if (request != null) {
playtrace(request);
}
}, false, false);
}
//自定义切片规则的切片路径获取
function get_my_url(bounds) {
var res = this.map.getResolution();
//var extent = new OpenLayers.Bounds(
// 119.9143982, 29.9751599,
// 120.4637146, 30.4486737
// );
//extent.transform(proj, mapproj); //投影转换
//var x1 = Math.round((extent.left - this.maxExtent.left) / (res * this.tileSize.w));
//var y1 = Math.round((this.maxExtent.top - extent.top) / (res * this.tileSize.h));
var x = Math.round((bounds.left - this.maxExtent.left)
/ (res * this.tileSize.w));
var y = Math.round((this.maxExtent.top - bounds.top)
/ (res * this.tileSize.h));
var z = parseInt(this.map.getZoom());
if (x == 0 || y == 0) return;
//http://10.118.128.33:7001/PGIS_S_TileMapServer/Maps/default/EzMap?Service=getImage&Type=RGB&Col=1922&Row=485&Zoom=13&V=0.3
var imgsrc = "http://10.118.128.33:7001/PGIS_S_TileMapServer/Maps/default/EzMap?Service=getImage&Type=RGB&Zoom=" + z + "&Row=" + y + "&Col=" + x + "&V=0.3"
//var imgsrc = this.url+ "/"+z+ "/"+ Math.floor(x/16) + "/"+ Math.floor((Math.pow(2,z) - 1 - y)/ 16) + "/"+x + "_" + (Math.pow(2, z) - 1 - y);
return imgsrc;
}
function GetParamValue(findParam, defaultValue) {
var arr0 = document.location.href.split("?");
if (arr0.length <= 1) return defaultValue;
var arr;
if (arr0[1].indexOf("&") == -1) {
arr = arr0[1].split("%26");
}
else {
arr = arr0[1].split("&");
}
for (var i = 0; i < arr.length; i++) {
if (arr[i].indexOf(findParam) == 0 && arr[i].indexOf("=") == findParam.length) {
arr = arr[i].split("=");
defaultValue = arr[1];
break;
}
}
return defaultValue;
}
</script>
</head>
<!-- body.onload is called once the page is loaded (call the 'init' function) -->
<body οnlοad="init();">
<!-- define a DIV into which the map will appear. Make it take up the whole window -->
<div style="width: 100%; height: 100%" id="map" ></div>
</body>
</html>
openlayers 对接相关推荐
- iClient for OpenLayers之快速获取UGCV5，MVT出图参数
作者:yangjl 前言 最近还是有很多小伙伴们,一遇到非wgs84坐标的ugcv5或mvt切图瓦片发布的地图服务,便不能对接出图了,或者是出了图但是看着地图边界比较模糊.今天我在这里讲干货,让小 ...
- SuperMap iClient for Openlayers 实现WFS查询功能
SuperMap iClient for classic已经实现对接WFS服务,可以对WFS进行查询并展示出查询的结果,但是官网范例中,目前没有关于Openlayers客户端的示例,在此文章中将简单介 ...
- Web端MVT矢量瓦片加载之OpenLayers篇
作者:LX 前言 MVT全称是Mapbox Vector Tile,是Mapbox标准的矢量切片.矢量瓦片具有创建效率高.传输和渲染速度快.数据和风格样式独立,更改配图方案无需重新创建瓦片.高显示质量 ...
- 如何更优雅地对接第三方API
如何更优雅地对接第三方API 本文所有示例完整代码地址:https://github.com/yu-linfeng/BlogRepositories/tree/master/repositories/ ...
- Linux中autoduck批量对接,科学网—用AutoDock进行分子对接教程——半柔性对接 - 杜文义的博文...
以下所有内容均属于个人学习过程中的总结,如有错误,欢迎批评指正! Autodock分子对接教程 First release:2017-12-20 Last update: 2018-07-24 Au ...
- OpenLayers 动态添加标记（Marker）和信息窗（Popup）
方式一:使用marker方式 1.在地图上添加标记图层 var markers =newOpenLayers.Layer.Markers("Markers"); map.addLa ...
- Nacos v0.7.0：对接CMDB，实现基于标签的服务发现能力
Nacos近期发布了0.7.0版本,该版本支持对接第三方CMDB获取CMDB数据.使用Selector机制来配置服务的路由类型.支持单机模式使用MySQL数据库.上线Node.js客户端,并修复了一些 ...
- 读书笔记(2) OpenLayers中的图层
OpenLayers有多个不同的图层类,每一个都可以连接到不同的地图服务器.例如通过Layer.WMS类可以连接到WMS地图服务器,通过Layer.Google类可以连接到谷歌地图服务器.OpenLa ...
- 一款直击痛点的优秀http框架，让我超高效率完成了和第三方接口的对接
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试文章 作者:元人部落 cnblogs.com/bryan31/p/133 ...
最新文章
- Apache2.4+Tomcat7集群搭建
- R语言ggpubr包ggsummarystats函数可视化分组条形图(自定义分组颜色、添加抖动数据点jitter、误差条)并在X轴标签下方添加分组对应的统计值（样本数N、中位数、四分位数的间距iqr)
- kubelet配置cni插件_从零开始入门 K8s | 理解 CNI 和 CNI 插件
- 一文尽览5G全产业链及新机遇
- 安装kafka过程及出现的问题解决
- 通讯录（容量不可变）
- 最真实的互联网用户画像...
- FCKeditor 在ASP.Net 中的使用说明
- php-Arrays函数-array_flip-交换数组的键值
- CMS：文章管理之视图（2）
- gis影像格式img转为ecw_微图影像地图导出拼接大图的参数说明
- Boost.Flyweight 序列化示例
- @RequestMapping和@GetMapping @PostMapping 区别
- java表数据去重_java8实现列表去重，java8的stream 和lambda的使用实例
- java陷阱常见面试题_Java常见陷阱
- python2.7 threading RLock/Condition文档翻译 (RLock/Condition详解)
- SP263 PERIOD - Period
- 制作windows7虚拟机镜像并配置网络
- 豆瓣电影Top250数据爬取、数据分析及数据可视化
- python不显示边框_python设置表格边框的具体方法