openlayer基本构建01

作者: 请叫我刚爷 | 来源:发表于2019-10-15 01:55 被阅读0次

openlayer基本构建01
Openlayer4加载ArcGIS离线瓦片地图
openlayer使用
因果关系陷阱：为什么人类心智会用因果关系作为运作的基本方式
Linux命令行与Shell脚本编程大全-构建基本脚本
Jenkins基本构建
Docker常用命令
openlayer3 图层函数详解
openlayer轨迹回放
gis-openlayer

  以下为openlayer地图的基本构建，只是一个地图的简单显示。小编使用的时openlayer的4.6.4版本，以下代码粘贴复制后，更改js引用，可直接使用。

<!doctype html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css/ol.css">
    <script type="text/javascript" src="js/ol-debug.js"></script>
    <script type="text/javascript" src="js/ol.js" ></script>
    
   <style type="text/css">
       html,body,#map{
           height: 100%;
           width: 100%;
           padding: 0px;
           margin: 0px;
           overflow: hidden;
       }
   </style>
    <title>构建地图</title>
</head>
<body>
    <div id="map" class="map"></div>
</body>
<script type="text/javascript">
    //构建地图
    var map=new ol.Map({
        target:"map",//绑定元素IP
        layers:[
            new ol.layer.Tile({
                source: new ol.source.OSM()//默认使用国外的免费地图
          })
          /* ,
            new ol.layer.Tile({
                source: new ol.source.XYZ({
                  url:'http://t0.tianditu.gov.cn/vec_c/wmts?tk ，xxxxx' //可使用第三方地图作为地图
              }) */
        ],
        view:new ol.View({ //视图创建
            projection:"EPSG:4326",//指定使用坐标的标准
            center: [116.390373,39.9078],
            zoom: 10,
            minZoom: 2,
            maxZoom: 18
        })
    });
</script>
</html>