OpenLayers加载天地图

openlayer 是基于JavaScript的webGIS库 ,通过openlayer可以很容易的调用地图,并做相应的操作。

在head中载入openlayer的js文件:

      <link rel="stylesheet" href="https://openlayers.org/en/v4.1.1/css/ol.css" type="text/css">
       <script src="jquery-1.11.1.min.js" type="text/javascript"></script>
       <script src="http://www.scgis.net/api/ol/v4.1.1/ol/ol4.1.1_scgis.js" type="text/javascript"></script>

  

body部分只需 添加:

<div id="map" class="map"></div>

  

script代码如下:

<script>
    window.onload = function(){
        var view = new ol.View({
            projection: ol.proj.get("EPSG:4326"),
            zoom:6,    //初始化地图级别
	        rotation:0, //地图旋转弧度,默认为0,最大2π
	        center:[104.07, 30.7],   //初始化地图中心点
            minZoom: 3,
            maxZoom: 18
        });

        //定义图层
        var layers = [];
        var layer1 =new ol.scgisTileLayer(
	        "http://www.scgis.net.cn/iMap/iMapServer/DefaultRest/services/newtianditudom/", //地图服务地址
	        {token:"24TLRFm6TOrv"    //天地图四川服务访问令牌
	        });
        var layer2 =new ol.scgisTileLayer(
	        "http://www.scgis.net.cn/iMap/iMapServer/DefaultRest/services/NewTiandituDOM_SCANN/", //地图服务地址
	        {token:"24TLRFm6T"    //天地图四川服务访问令牌
	        });
        layers.push(layer1)
        layers.push(layer2)
        //定义地图
	    var map= new ol.scgcMap({
	        layers:layers,
            view:view,
	        target:"map",
            loadTilesWhileInteracting: true,
            logo:false
	    });



    }

    </script>

  

view 中  加入 logo:false 可以去掉 右下角 openlayer 的 图标

 

g

转载于:https://www.cnblogs.com/crazytao/p/9904438.html

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 要在Vue中加载地图,需要先安装OpenLayers地图的相关库。可以通过npm安装: ``` npm install ol @supermap/iclient-ol6 --save ``` 然后在Vue组件中引入OpenLayers地图的相关库: ```javascript import ol from 'ol'; import { Tianditu } from '@supermap/iclient-ol6'; ``` 接着,在Vue组件的mounted生命周期中,创建地图并添加地图图层: ```javascript mounted() { // 创建地图容器 const mapContainer = document.getElementById('map'); // 创建地图对象 const map = new ol.Map({ target: mapContainer, view: new ol.View({ center: [, ], zoom: 2 }) }); // 创建地图图层 const tiandituLayer = new Tianditu({ layerType: 'vec', key: 'your-tianditu-key' }); // 添加地图图层到地图中 map.addLayer(tiandituLayer); } ``` 其中,`your-tianditu-key`需要替换成你自己的地图开发者密钥。如果没有密钥,可以在地图开发者平台申请。 ### 回答2: Vue 是一种流行的前端框架,能够帮助开发者构建高效的用户界面。而 OpenLayers 则是一种流行的前端地图库,它提供了许多强大的地图功能,包括地图渲染、矢量数据展示、标注等等。 地图是一种常用的在线地图服务,提供了丰富的地图数据资源,包括卫星影像、地形数据、街景图等等。 为了加载地图,并在 Vue 中使用 OpenLayers 进行地图展示,我们需要采取以下步骤: 1. 获取地图的 API 密钥 地图需要注册开发者账号,并获得一个 API 密钥,才能进行在线地图服务的调用。获取密钥后,我们可以在 OpenLayers 中调用地图的 WMTS 服务,加载所需的瓦片数据。 2. 安装必要的依赖库 在 Vue 项目中使用 OpenLayers,需要先安装相关的依赖库。具体来说,我们需要安装三个库:ol、proj4 和 proj4leaflet。其中,ol 是 OpenLayers 的核心库,proj4 和 proj4leaflet 则是用于地图坐标转换的工具库。 可以使用 npm install 命令来安装这些库。 3. 在 Vue 模板中添加地图容器 在 Vue 的模板中,我们可以添加一个 div 元素,用于承载 OpenLayers地图容器。这个容器需要设置样式来确定它所占据的位置和大小。 4. 在 Vue 中引入 OpenLayers地图的配置 为了在 Vue 中加载 OpenLayers地图服务,我们需要新建一个 .js 文件,用于配置这些服务的相关信息。在这个文件中,我们需要引入 OpenLayers 和 proj4 库,以及地图的 API 密钥。 5. 在 Vue 中引入地图组件 最后,在 Vue 的组件中,我们需要引入地图组件,并在其 mounted 生命周期中,调用我们定义好的配置文件,来加载地图服务和 OpenLayers地图显示。 通过以上步骤,我们就可以在 Vue 中,轻松地加载和显示地图,并使用 OpenLayers 进行地图展示和交互。 ### 回答3: Vue是一种流行的JavaScript框架,它提供了一种开发Web应用程序的方法,使您可以使用组件,指令和状态来轻松构建丰富的用户界面。而OpenLayers是一个功能强大的JavaScript库,它可以帮助您在Web应用程序中实现各种地图和空间分析功能。 地图是一种广泛使用的中国地图服务,它提供了各种地图数据,如道路,建筑物和地形,以及各种功能,如地理编码和路径规划。对于Vue开发人员来说,整合地图OpenLayers可以为他们的Web应用程序提供丰富的地图功能。 要加载地图,需要使用OpenLayers的TileLayer组件。在Vue应用程序中,您可以使用Vue-OpenLayers,这是一个Vue组件库,为OpenLayers提供了Vue绑定。下面是一些步骤,可以帮助您在Vue中加载地图: 步骤一:安装Vue-OpenLayers组件库 您可以使用npm安装Vue-OpenLayers: npm install vue-openlayers 步骤二:导入Vue-OpenLayers组件 您需要在Vue组件中导入Vue-OpenLayers组件: import { Map, TileLayer } from 'vue-openlayers'; 步骤三:创建地图容器 您需要在模板中添加一个地图容器: <template> <div> <Map ref="map"> <TileLayer type="XYZ" url="http://t{0-7}.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}" attributions="&copy;2018 TDT&nbsp;|&nbsp;http://www.tianditu.gov.cn/" /> </Map> </div> </template> 步骤四:配置地图数据 您需要在TileLayer组件中配置地图数据。此处的URL应该是地图服务提供商提供的。 步骤五:运行应用程序 您可以运行Vue应用程序,并在浏览器中查看地图。现在,您应该能够看到一个包含地图数据的地图!您可以尝试通过添加更多图层来定制地图,或者使用OpenLayers的各种功能来实现空间分析。 在使用Vue-OpenLayers加载地图时,需要注意保护好自己的开发者密钥,在与地图服务提供商之间的交互中,应该遵守相关协议和政策。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值