zoukankan      html  css  js  c++  java
  • 电子海图开发第十九篇 web电子海图 使用OpenLayers加载瓦片地图(共一百篇)

    构建OpenLayers,首先在在要web电子海图的网页中引入ol.js和ol.css这两个文件,你可以到openlayers官网去下载这个文件

    map的创建完整代码

    <!doctype html>
    <html lang="en">
      <head>
        <link rel="stylesheet" href="js/ol/ol.css" type="text/css">
        < src="js/ol4.6.5.js"></>
        <title>OpenLayers example</title>
      </head>
    <style>
          .map {
            height: 100%;
            width: 100%;
          }
        </style>
      <body>
        <h2>My Map</h2>
        <div id="map" class="map"></div>
        < type="text/java">
    var seamap = new ol.layer.Tile({
        source : new ol.source.XYZ({
            url : "http://112.126.96.159/Ship/Map?z={z}&y={y}&x={x}",
            projection : 'EPSG:3857'
        })
    });
    zoomslider = new ol.control.ZoomSlider();
    zoomcontrol = new ol.control.Zoom();  
    
    map = new ol.Map({
            layers : [ seamap ],
            view : new ol.View({
                center : ol.proj.transform([ 119.22, 39.222 ], 'EPSG:4326',
                        'EPSG:3857'),
                projection : 'EPSG:3857',
                zoom : 5,
                minZoom : 2,
                maxZoom : 15,
            }),
            target : 'map',
            controls : [ zoomslider, zoomcontrol ]
        });
    
    </>
      </body>
    </html>
    1. 这段代码的作用是在网页是显示一个地图;
    2. 地图必须显示在一个div中,因此首先创建一个div;
    3. target:'map' 指定了地图要显示在id为map的div中;
    4. new ol.layer.Tile定义了一个图层,数据来源是航易电子海图切片数据;
    5.  new ol.View定义了地图的中心位置,范围和层级。
    6. controls是显示地图的放大缩小控件;

    参考文章:电子海图开发,web电子海图开发,电子海图二次开发

  • 相关阅读:
    黑客是如何知道我们常用的密码的
    一个核物理学霸为何两次收到BlackHat的邀请
    透过大数据剖析漫画何去何从
    SJF(最短作业优先)
    RR(轮转调度算法)
    hrrf(最高响应比)
    fcfs
    Process 2(完成版)
    进程2
    进程1
  • 原文地址:https://www.cnblogs.com/ecdis/p/13391480.html
Copyright © 2011-2022 走看看