OpenLayers开发离线地图源代码（OpenLayers开发谷歌高德百度地图）

（OpenLayers DEMO）点击下载

本案例介绍如何在离线（单机、或局域网无Internet）状态下发布离线地图，且结合OpenLayers做基于地图的二次开发。

一、 离线地图数据下载

离线地图下载，可以使用bigemap地图下载器全能版（下载地址http://www.bigemap.com/reader/download/detail201802015.html）。

打开bigemap地图下载器，左上角“选择地图”选择谷歌地球，右上角“选择行政区域”我们选择四川省为例，如下图所示：

双击下载，此次注意选择“存储选项”选择，“瓦片：bigemap”，勾选下载级别。

至此，离线地图即下载完毕，基础数据准备完成，我们可以打开下载目录简单查看瓦片目录。

二、 发布离线地图服务

基础数据准备完毕后，我们通过bigemap离线地图开发工具将地图瓦片发布成OGC协议的wmts服务，（下载地址：http://www.bigemap.com/reader/download/detail2020040918.html）。

打开离线地图开发工具，选择“添加离线地图”，如下图：

第二步：选择“添加离线地图”，弹出如下对话框

地图名称：四川地图（工具你自己的需要任意命名）

瓦片库文件：选择后面的浏览，找到你下载的离线地图瓦片，里面有个map.ini文件，选择这个文件，如下图:

创建完成，我们即可通过“浏览”按钮，在浏览器中查看刚才发布的离线地图。

浏览结果如下：

一、 基于OpenLayer加载WMTS地图服务及二次开发

接下来是下载openlayers了，我们给处理具体的案例代码和OpenLayer包（点击下载），到时候大家可自行下载。

这里采用了OpenLayers2为例,

引用Openlayers如下:

设置坐标系统和中心点位置

源代码：openlayers.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div>

 选中的经纬度：

</div>

</div>

</div>

var projection = ol.proj.get('EPSG:4326');//设置坐标系

var projectionExtent = projection.getExtent();

//分辨率

var resolutions = [

1.40625,

0.703125,

0.3515625,

0.17578125,

0.087890625,

0.0439453125,

0.02197265625,

0.010986328125,

0.0054931640625,

0.00274658203125,

0.001373291015625,

0.0006866455078125,

0.00034332275390625,

0.000171661376953125,

0.0000858306884765625,

0.00004291534423828125,

0.000021457672119140625,

0.000010728836059570312,

0.000005364418029785156,

0.000002682209014892578,

0.000001341104507446289

];

//瓦片矩阵

var matrixIds = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];

var centerXY = "104.06644285, 30.66445112";//地图中心点，默认成都

var center = ReturnCenter(centerXY);

var emap_attributions = new ol.Attribution({

html: '<span class="span_switch" οnclick="ChangeToImgMap()">点击切换地图类型</span>'

});

function EMap() {

var map = new ol.Map({

controls: ol.control.defaults({

attribution: false

}).extend([

new ol.control.MousePosition()//是否显示鼠标所在地图点的经纬度

]),

layers: [

new ol.layer.Tile({

source: new ol.source.WMTS({

attributions: emap_attributions,

name: "四川卫星地图1-14级",

url: "http://localhost:9002/bigemap.8rs3s73l/wmts?access_token=pk.eyJ1IjoiY3VzXzA3dDJoaHZtIiwiYSI6ImR6NmRxd3F5emE2dmVrd243bzZiZGhuY2oiLCJ0IjowfQ.wm7CMiycFDUYAMRbaJ-wYMJFGhE_ybWcoSn5c-UuSPo",

layer: "bigemap.google-earth",

style: "default",

matrixSet: "4to10",

format: "image/png",

//wrapX: true,//地图缩小后，防止在一个页面出现多个一样的地图

tileGrid: new ol.tilegrid.WMTS({

origin: ol.extent.getTopLeft(projectionExtent),

resolutions: resolutions.slice(0, 15),//slice方法不清楚的请百度

matrixIds: matrixIds.slice(0, 15)

})

}),

maxResolution: resolutions[0],

minResolution: resolutions[14]

})

target: "map",

view: new ol.View({

center: center,//地图中心点

projection: projection,//投影类别

zoom: 10,//默认缩放级别

maxZoom: 20,//最大缩放级别

minZoom: 1//最小缩放级别

})

});

//鼠标点击时设置中心点覆盖物

GetElementId("map").onclick = function () {

coordinates = GetElementsByClassName('ol-mouse-position')[0].innerHTML;

SetPosition(map, coordinates);

};

}

EMap();//显示E电子地图

function GetElementId(id) {

return document.getElementById(id);

}

function GetElementsByClassName(className) {

return document.getElementsByClassName(className);

}

//中心点处理

function ReturnCenter(centerXY) {

var centerObj = centerXY.split(',');

var centerX = centerObj[0];

var centerY = centerObj[1];

return [parseFloat(centerX), parseFloat(centerY)];//一定要转换下类型，否则拖拽后，地图就消失了

}

//设置中心点覆盖物

function SetPosition(map, coordinates) {

GetElementId("Coordinates").value = coordinates;

var newcenter = ReturnCenter(coordinates);

// Position marker

var marker = new ol.Overlay({

position: newcenter,

positioning: 'bottom-center',

element: document.getElementById('marker'),

stopEvent: false

});

map.addOverlay(marker);

}

</script>

</body>

</html>

创建wmts服务：打开bigemap离线地图开发工具，找到四川省地图，选择“开发使用”，选择“WMTS服务”

使用浏览器打开wmts服务地址，配置如下几个选项（这几个选项对应到OpenLayer里面的具体参数

如下图所示，将WMTS的具体参数设置到OpenLayer

设置鼠标事件，显示经纬度

完成后，运行界面如下:

OpenLayers开发离线地图源代码（OpenLayers开发谷歌高德百度地图）相关推荐

这款软件实力秒杀奥维地图，任意浏览谷歌高德百度等多种知名地图
对于经常需要进山出差开展野外调查的工作来说,一款实用的外业勘察地图软件在渺无人烟的山区可以进行地图浏览(尤其是卫星影像).精准定位.地理信息查询(经纬度.海拔等).标签采集编辑.信息分析.轨迹记录.拍 ...
2013年12月30日星期一谷歌、百度地图拽取
2013年12月30日星期一 17:12:33 晴 by Again 2013-12-30 17.12.38 先说名几句题外话: 第一,由于需要我也是半路出家,所以多专业就谈不上了.说白了js和用到 ...
android 高德卫星地图数据,白马地图 Bmap for Android v7.3.81 强大高德百度地图应用|张小北...
Bmap for Android 是一款集成高德地图百度地图为一体的第三方地图应用APP,Bmap for Android 又叫白马地图,采用高德/百度地图数据引擎,可任意切换百度地图.高德地图数据源 ...
【批量地点检索-高德百度地图地理编码对比】
批量地点检索基于python地理位置描述转经纬度坐标前提: 需要安装部署python环境安装导入模块: import requests import json import math 发送请求 ...
门店定位怎么在地图上显示_怎么在百度地图上面显示自己店面的地址，
展开全部 1.进2113入百度地图,然5261后登录自己的百度帐号4102. 2.接着搜1653索一下自己的商铺回是否在地图答上面有标注,如没有再选择添加该地点. 3.进入到百度本地商户中心,再次搜索 ...
高德地图——浏览器定位+点击获取经纬度+去除高德百度地图左下角logo
高德地图--浏览器定位+点击获取经纬度+去除高德百度地图左下角logo 1.代码 <!doctype html> <html> <head><meta cha ...
js百度地图小车html,Web js实现百度地图实时轨迹画线小车车行驶轨迹 | 彬菌
版权声明:转载原创文章请以超链接形式请注明原文章出处,尊重作者,尊重原创! 恰饭广告注意: 1.百度地图ak换成自己在百度地图官网申请 2.建议使用firefox浏览器,google被墙无法调用gp ...
BaiduMap---百度地图官方Demo之调用百度地图（介绍如何调启百度地图实现自身业务功能）
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...
QT5百度地图开发学习——qt调用输入位置坐标位置进行百度地图定位
系列文章目录上一章: QT5百度地图开发学习--JavaScript调用qt函数并传参给qt 文章目录系列文章目录前言一.界面设计二.槽函数总结前言本文实现输入坐标然后在地图上显示位置 ...

OpenLayers开发离线地图源代码（OpenLayers开发谷歌高德百度地图）

OpenLayers开发离线地图源代码（OpenLayers开发谷歌高德百度地图）相关推荐

最新文章

热门文章