1-04 2,352 views
高德API + ArcGIS WMS
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>图片图层</title>
<script src="https://webapi.amap.com/maps?v=1.4.12&key=ce99b5034e1b9e0e2c2d727f20945eeb"></script>
<style>
html,
body,
#container {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var map = new AMap.Map('container', {
resizeEnable: true,
center: [106.38189642670154, 38.99276709475413],
zoom: 15,
layers: [
new AMap.TileLayer(),
new AMap.TileLayer.WMS({
url: 'http://59.110.28.240:6080/arcgis/services/ceshi/yanhua5/MapServer/WmsServer',
params: { 'version': '1.3.0', 'layers': '0', 'styles': '' }
}),
new AMap.TileLayer.WMS({
url: 'http://59.110.28.240:6080/arcgis/services/shouhuitu/QTXHHL/MapServer/WmsServer',
params: { 'version': '1.3.0', 'layers': '0', 'styles': '' }
}),
new AMap.TileLayer.WMS({
url: 'http://218.95.176.28:6080/arcgis/services/lvyou/DXG/MapServer/WmsServer',
params: { 'version': '1.3.0', 'layers': '0', 'styles': '' }
}),
new AMap.TileLayer.WMS({
url: 'http://218.95.176.28:6080/arcgis/services/lvyou/QSS/MapServer/WmsServer',
params: { 'version': '1.3.0', 'layers': '0', 'styles': '' }
}),
new AMap.TileLayer.WMS({
url: 'http://218.95.176.28:6080/arcgis/services/lvyou/GYBWG/MapServer/WmsServer',
params: { 'version': '1.3.0', 'layers': '0', 'styles': '' }
}),
]
});
</script>
</body>
</html>OpenLayers + 高德地图 + Google Map + ArcGIS Rest 服务
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>图片图层</title>
<script src="https://cdn.bootcss.com/openlayers/4.6.5/ol.js"></script>
<link href="https://cdn.bootcss.com/openlayers/4.6.5/ol.css" rel="stylesheet">
<style>
html,
body,
#container {
background-color: #FCF9F2;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
window.onload = function () {
console.log(ol.layer)
console.log(ol.source)
var map = new ol.Map({
layers: [
// // 高德影像地图
// new ol.layer.Tile({
// source: new ol.source.XYZ({
// url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scl=2&style=6&x={x}&y={y}&z={z}'
// })
// }),
// // 高德矢量网路
// new ol.layer.Tile({
// source: new ol.source.XYZ({
// url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scl=1&style=8&x={x}&y={y}&z={z}'
// })
// }),
// Google 矢量地图
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i380072576!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0!5m1!1e0'
})
}),
// Google 影像地图
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://mt{0-3}.google.cn/vt/lyrs=y&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=G'
})
}),
// // ArcGIS Image 服务
// new ol.layer.Image({
// source: new ol.source.ImageArcGISRest({
// // projection: 'EPSG:4326',
// ratio: 1,
// params: {},
// url: 'http://59.110.28.240:6080/arcgis/rest/services/ceshi/yanhua5/MapServer'
// })
// }),
// ArcGis-WMS 服务
new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://218.95.176.28:6080/arcgis/services/lvyou/QSS/MapServer/WmsServer',
params: { 'layers': '0', }
})
}),
// SuperMap WMS 服务
new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://218.95.213.174:20007/iserver/services/map-NongTianXiaoQiHouZhanZhanDian/wms130',
params: { 'layers': '0', }
})
}),
],
view: new ol.View({
center: [106.38189642670154, 38.99276709475413],
projection: 'EPSG:4326',
zoom: 15
}),
target: 'container'
});
};
</script>
</body>
</html>- Vue集成openlayers
- Openlayers之加载高德地图
- Openlayers3 - 瓦片地图加载解析
- 高德地图叠加google的地图图层
- openlayers 加载 Arcgis
- Chinese Coordinate Transform
<template>
<div class="about">
<div id="map"></div>
</div>
</template>
<script>
import Map from "ol/Map"
import View from "ol/View"
import TileLayer from "ol/layer/Tile"
import XYZ from "ol/source/XYZ"
import {
Image as ImageLayer
} from 'ol/layer';
import {
TileArcGISRest,
ImageArcGISRest
} from 'ol/source';
import 'ol/ol.css'
export default {
mounted() {
this.initMap()
},
methods: {
initMap() {
new Map({
target: "map",
layers: [
new TileLayer({
source: new XYZ({
// tilePixelRatio: 1,
url: 'http://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}',
}),
}),
new ImageLayer({
source: new ImageArcGISRest({
ratio: 1,
params: {},
url: 'http://59.110.28.240:6080/arcgis/rest/services/ceshi/yanhua/MapServer'
})
}),
new TileLayer({
extent: [-13884991, 2870341, -7455066, 6338219],
source: new TileArcGISRest({
url: 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer',
})
})
],
view: new View({
center: [11801491, 4685733],
zoom: 4
})
});
}
}
}
</script>
<style lang="css">
.about {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
#map {
width: 100%;
height: auto;
background-color: transparent;
flex-grow: 1;
}
</style>
