openlayers 对接

最新推荐文章于 2023-09-22 09:55:08 发布
最新推荐文章于 2023-09-22 09:55:08 发布
阅读量369 收藏
点赞数

<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> 

logenliqiang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
openlayers：OpenLayers
02-04
OpenLayers 是一个高性能，功能丰富的库，用于在Web上创建交互式地图。 它可以显示从任何网页上的任何来源加载的地图图块，矢量数据和标记。 OpenLayers的开发旨在进一步利用各种地理信息。 它是完全免费的开源JavaScript，根据。 入门 安装： npm install ol 导入您所需的应用程序： import Map from 'ol/Map' ; import View from 'ol/View' ; import TileLayer from 'ol/layer/Tile' ; import XYZ from 'ol/source/XYZ' ; new Map
openlayers遮罩示例
01-29
一个基于openlayer创建地图遮罩的前端代码示例。 使用方法 1. 安装依赖 npm i 2. 项目启动 npm start
OpenLayers3加载谷歌地图
05-07
OpenLayers3加载谷歌地图，加载谷歌地图显示，实现效果很好，放大比例尺也能看得清楚。文章链接：https://blog.csdn.net/Gary_888/article/details/89914290
openlayers3版本
08-31
openlayers3版本
openlayers
03-31
openlayers 画线方法，资料共享，资料共享，资料共享，资料共享
色斑图_Python色斑图_maskout.py_python_色斑图_shp格式_
10-04
利用雨量站点 以及 shp格式底图绘制色斑图
Openlayers对接PIGS 山海易绘
ZHANGHUI3239619的专栏
12-07 1061
Openlayers对接PIGS 山海易绘
水经注地图发布服务中间件服务配置功能说明
10-26 706
《水经注地图发布服务中间件》安装后会在Windows系统服务中自动运行服务，自动发布安装包中自带的谷歌地球1-7级影像数据，点击“Web Mector 影像一键发布”可以查看本机的发布的效果。 在主界面中，点击“配置”按钮会显示“服务器配置”对话框，可以在该对话框中配置服务器IP地址、端口和缓存数据目录等。 1.服务器IP与端口配置
OpenLayer(NPM包)使用EPSG:4490/CGCS2000的瓦片服务
github_39607307的博客
09-18 467
举一反三也可以解决其他地图引擎(如Cesium,Mapbox)中的类似问题。众所周知，CGCS2000 = EPSG:4490。本文中 ol 版本为 7.5.2。
QGIS配图GeoServer发布WMTS供OpenLayers调用
Young-weiai
09-22 403
本文将介绍开源GIS工具的使用流程，从配图到发布服务、到前端调用。
PGIS资料包括切片参数
03-27
PGIS切片机制与栅格地图服务解析说明 ，1 PGIS切片参数 2 栅格地图服务地址3 ArcGIS切图级别4 在ArcGIS API for Flex中调用PGIS栅格服务
Openlayers ol与Postgis交互
guzicheng1990的博客
03-05 1271
说明 PostGIS栏目中，讨论了入库的存储格式到底是以PostGIS的Geometry格式，还是WKT格式入库比较好。此篇紧接着话题，讨论Openlayers与PostGIS数据的交互。 Geometry格式，例：‘0101000020110F0000F2D24D3662CA6841480C02EB46545241’ WKT格式，例：‘POINT(12988813.522 4798555.07...
学习笔记一：ArcGIS for Javascript 添加图层
jocelynshi的博客
04-25 1749
目录前言完整代码显示效果 前言 完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ArcGISMap</title> <link rel="stylesheet" href="https://js.arcgis.co...
使用百度地图进行定位和路线导航
weixin_33877092的博客
11-27 234
　　先去百度地图开发者中心申请APPkey：http://developer.baidu.com/map/index.php?title=iossdk ，下载百度地图的SDK。 　　导入SDK的framework文件，BaiduMapAPI_Base.framework是基础包，是必须要导入的，根据自己的需求导入需要的百度SDK的framework，新版的SDK已经可以选择下载哪些fram...
PGIS地图插件
cyf
04-23 3330
地图初始化。。 [code="java"] //地图初始化 function onLoad(){ if(_compatIE()){ setTimeout(function(){ _MapApp = new EzMap(document.getElementById("mymap")); _MapApp...
mapApi for js
java_goodstudy的博客
05-07 465
百度提供了移动端，极速版js,web端js,移动端功能相对较少，速度较快，官方demo 中并未给出 当前位置定位等功能 在1.4版本以后需要申请百度ak， 申请ak 时需要注意，白名单填写，*代表无拦截，填写不当的花会造成不能访问的问题。 js 代码属于异步加载，直接将html 粘贴出去即可使用，不需要sdk 等支持，相对移动端较为简单
js tiledMap 瓦片地图库
qq_45827064的博客
01-06 601
渲染器 TMXRenderer 渲染器 TMXHexagonalRenderer 六变形渲染器 TMXIsometricRenderer 等距渲染器 TMXOrthogonalRenderer 正交渲染器 图层 TMXLayerBase 图层基础 TMXColorLayer 颜色层 TMXImageLayer 图片层 TMXLayer 层 瓦块 TMXTile 瓦块 Ellipse 椭圆 Polygon 多边形 PolyLine 折线 T
警务态势模板提示“ezmap is none”
yongrong的专栏
11-03 1101
^^
一款综合地图应用Vue组件，内置了百度、高德、天地图瓦片
欧菲丽的博客
04-26 881
基于Openlayers的地图应用Vue组件。内置了百度、高德、天地图瓦片，并支持与方正、超图、山海经纬、航天精一等PGIS厂商对接。包含文本、图形、html、热力图、轨迹回放等20个组件，支持与ECharts结合实现散点、飞行迁徙等基于地理位置的图表，满足项目常见需求。使用者不需要有地图相关专业知识，甚至不需要写任何JS代码就能实现通用功能。
基于Springboot+Vue的墙绘产品展示交易平台毕业源码案例设计.zip
最新发布
04-27
网络技术和计算机技术发展至今，已经拥有了深厚的理论基础，并在现实中进行了充分运用，尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代，所以对于信息的宣传和管理就很关键。系统化是必要的，设计网上系统不仅会节约人力和管理成本，还会安全保存庞大的数据量，对于信息的维护和检索也不需要花费很多时间，非常的便利。 网上系统是在MySQL中建立数据表保存信息，运用SpringBoot框架和Java语言编写。并按照软件设计开发流程进行设计实现。系统具备友好性且功能完善。 网上系统在让售信息规范化的同时，也能及时通过数据输入的有效性规则检测出错误数据，让数据的录入达到准确性的目的，进而提升数据的可靠性，让系统数据的错误率降至最低。 关键词：vue；MySQL；SpringBoot框架 【引流】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值