Openlayers 2.X加载高德地图
概述:
前面的有篇文章介绍了Openlayers 2.X下加载天地图,本节介绍Openlayers 2.X下加载高德地图。
实现效果:
高德地图
高德影像
图中:蓝色的省市边界为我本机发布的,能够与高德地图很好地结合在一起。
实现:
实现很简单的,主要是要获取地图的url,在Arcgis for js加载百度地图一文(http://blog.csdn.net/gisshixisheng/article/details/44853709)中做了介绍,在此不再赘述,实现代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers MapQuest Demo</title><link rel="stylesheet" type="text/css" href="http://200.200.200.222/OpenLayers-2.12/theme/default/style.css"/><style type="text/css">html, body, #map{padding:0;margin:0;height:100%;width:100%;}</style><script type="text/javascript" src="http://200.200.200.222/OpenLayers-2.12/OpenLayers.js"></script><script type="text/javascript">var map;function init(){var vecLayer = new OpenLayers.Layer.XYZ("高德矢量", ["http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x=${x}&y=${y}&z=${z}","http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x=${x}&y=${y}&z=${z}","http://webrd03.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x=${x}&y=${y}&z=${z}","http://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x=${x}&y=${y}&z=${z}"], {isBaseLayer: true,visibility: true,displayInLayerSwitcher: true});var imgLayer = new OpenLayers.Layer.XYZ("高德栅格", ["http://webst01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x=${x}&y=${y}&z=${z}","http://webst02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x=${x}&y=${y}&z=${z}","http://webst03.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x=${x}&y=${y}&z=${z}","http://webst04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x=${x}&y=${y}&z=${z}"], {isBaseLayer: true,visibility: true,displayInLayerSwitcher: true});map = new OpenLayers.Map("map",{projection: "EPSG:900913",displayProjection: "EPSG:4326",units: 'm',layers: [vecLayer, imgLayer],numZoomLevels:20,center: [11858238.665397, 4762368.6569168],zoom: 5});map.addControl(new OpenLayers.Control.LayerSwitcher());map.addControl(new OpenLayers.Control.MousePosition());var wms = new OpenLayers.Layer.WMS("省级行政区","http://200.200.200.220:8080/geoserver/wms",{LAYERS: "pro",transparent:true},{singleTile: false,ratio: 1,isBaseLayer: false,visibility:true,yx : {'EPSG:4326' : true}});map.addLayer(wms);}</script>
</head>
<body οnlοad="init()"><div id="map"></div>
</body>
转载于:https://www.cnblogs.com/lzugis/p/6539834.html
Openlayers 2.X加载高德地图相关推荐
- (转)Openlayers 2.X加载高德地图
http://blog.csdn.net/gisshixisheng/article/details/44853881 概述: 前面的有篇文章介绍了Openlayers 2.X下加载天地图,本节介绍O ...
- vue openlayers 加载高德地图等 gcj02 的图层偏移问题
vue openlayers 加载高德地图等 gcj02 的图层偏移问题 这个问题是在使用 openlayers 地图引擎加载高德地图或者是谷歌地图都会遇到的问题,所以说呢这篇博文稍微说一下解决办法. ...
- vue 项目安装 openlayer 加载高德地图
vue 项目安装 openlayer 今天呢,稍微说一下关于 vue 项目使用 openlayer 的一些操作,我也是刚开始学习,在摸索. 比较讨厌的一点就是他的官网说明文档啥的都是英文的,对英语不好 ...
- ios 高德地图加载瓦片地图_OpenLayers加载高德地图离线瓦片地图
谷歌地球离线瓦片下载使用"迈高图-地图数据下载器"(以下简称:迈高图),演示数据以湖南省长沙市7~16级瓦片数据为例. 下载演示数据 迈高图选择谷歌地球为当前地图源,地图图层选择为 ...
- 046:cesium加载高德地图(多种形式)
第046个 点击查看专栏目录 本示例的目的是介绍如何在vue+cesium中加载加载高德地图.这里区分了很多种形式,详情见核心分析和源代码. 直接复制下面的 vue+cesium源代码,操作2分钟即可 ...
- 020:Mapbox GL加载高德地图(影像瓦片图)
第020个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+mapbox中加载高德地图(影像瓦片图). 直接复制下面的 vue+mapbox源代码,操作2分钟即可运行实现效果 文章目录 示例效果 ...
- Vue+OpenLayers入门(加载高德在线地图)
开发环境的搭建在上一篇教程中已有描述,如果不知道怎么搭建,请移步Vue+OpenLayers入门(加载OSM在线地图) 此代码为加载高德在线地图以及清除地图上的默认控件: <template&g ...
- Openlayers案例1——加载OSM地图
1. 代码块 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF- ...
- OpenLayers 3 之 加载百度地图
虽然百度地图有自己的 JavaScript API,但是有时候,一个项目已经用 OpenLayers 做了很多功能,不可能弃之不用,同时,又想使用百度地图,该怎么办呢?所以很多人想使用 OpenLay ...
最新文章
- 2021全国高校计算机能力挑战赛(初赛)Java试题三
- 【PC工具】免费文库文档下载器,破解文库下载器,免费下载文库文档,文库下载器...
- Nginx读取Memcached实现页面内容缓存
- linux 系统 安装 nginx 服务
- 安装elasticsearch-php,安装 |《Elasticsearch-PHP 中文文档 6.0》| PHP 技术论坛
- Greenplum 优化CASE - 对齐JOIN字段类型,使用数组代替字符串,降低字符串处理开销,列存降低扫描开销...
- Android开发笔记(四)字符串格式化
- python文件审计系统_Python代码审计实战案例总结之CRLF和任意文件读取
- java多线程之计算数量
- 博途v16tia项目服务器,博途V16与scout TIA
- C++语言虚函数表实现多态原理
- ActiveMQ Stomp的重新投递和死信
- 卡方检验有哪些指标?卡方值怎么计算?
- 计算机设备如何巡检,计算机联锁设备巡检作业指导书.pdf
- 电池电压值转换为百分比
- ping某个域名的详细过程
- JavaScript 是世界上最好的语言?
- vue2实现京东商城
- 在c#中using和new这两个关键字有什么意义
- Twitter网页版推出通用搜索功能 复制链接
热门文章
- [YTU]_2640( 编程题:运算符重载---矩阵求和)
- Python进阶07 函数对象
- Invalid ADAPTORNAME specified. Type 'imaqhwinfo' for a list of available ADAPTORNAMEs. Image acquisi
- floodFill函数
- 现在c++链接oracle,C++ 连接Oracle
- Linux Restart PHP
- Spring Security之短信登录
- Ubuntu中清理Network下Connect to Server的入口
- Kudu安装前的建议说明(博主推荐)
- jenkins创建job不能用中文问题