基于不同地图库的地图服务加载展示demo
1.ArcGIS API for JavaScript Demo
- 引入引入arcgis js api
<link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
<script src="https://js.arcgis.com/4.10/"></script>
- 然后导入esri/Map、esri/views/MapView 模块，创建地图
<script>
require([
"esri/Map",
"esri/views/MapView"
], function(Map, MapView) {
// 创建一个地图对象，指定地图基础服务为streets
var map = new Map({
basemap: "hybrid"
});
// 在页面中呈现地图
var view = new MapView({
container: "mapViewDiv", // html dom元素id，用来作为地图视图容器
map: map // 地图对象
});
});
</script>
- 全部的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ArcGIS API for JavaScript Demo</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
<script src="https://js.arcgis.com/4.10/"></script>
</head>
<body>
<h2>arcgis demo</h2>
<div id="mapViewDiv" style="height:600px;width:100%"></div>
<script>
require([
"esri/Map",
"esri/views/MapView"
], function(Map, MapView) {
// 创建一个地图对象，指定地图基础服务为streets
var map = new Map({
basemap: "streets"
});
// 在页面中呈现地图
var view = new MapView({
container: "mapViewDiv", // html dom元素id，用来作为地图视图容器
map: map // 地图对象
});
});
</script>
</body>
</html>
image.png
-
改变加载的地图服务类型。更换 basemap: "hybrid"就为下图效果
image.png
2.OpenLayers Demo
- 引入openlayers脚本文件和样式文件
<link href="https://cdn.bootcss.com/openlayers/4.6.5/ol.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/openlayers/4.6.5/ol.js"></script>
- 使用 ol.Map 创建地图，其中接收三个主要参数:target、layers、view，target是html DOM节点ID，layers是要加载的图层，数组，支持多图层。view定义地图视图的中心点和缩放大小等。
new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
})
})
],
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
- 完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>openlayers demo</title>
<link href="https://cdn.bootcss.com/openlayers/4.6.5/ol.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/openlayers/4.6.5/ol.js"></script>
<style>
.map{
width: 100%;
height: 600px;
}
</style>
</head>
<body>
<h2>openlayers demo</h2>
<div id="map" class="map"></div>
<script>
new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
})
})
],
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
</script>
</body>
</html>
3.Leaflet.js Demo
- 引入Leaflet.js脚本文件和样式文件
<link href="https://cdn.bootcss.com/leaflet/1.3.4/leaflet.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/leaflet/1.3.4/leaflet.js"></script>
- 新建div，然后创建map对象
var map = L.map('map', {
center: [45.51, -122.2],
zoom: 6
});
- 使用 tileLayer 来创建切片图层
// 添加图层到地图
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', { foo: 'bar' }).addTo(map);
- 通过 Polyline 来创建矢量图层（折线）
var latlngs = [
[45.51, -122.68],
[44.877, -122.43],
[44.04, -118.2]
];
//根据提供的三点坐标绘制折线
var polyline = L.polyline(latlngs, { color: 'red' }).addTo(map);
- 整个demo代码为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>leafletdemo</title>
<link href="https://cdn.bootcss.com/leaflet/1.3.4/leaflet.css"
rel="stylesheet">
<script src="https://cdn.bootcss.com/leaflet/1.3.4/leaflet.js"></script>
</head>
<body>
<h2>leaflet demo</h2>
<div id="map" style="width:100%;height: 600px;"></div>
<script>
// 创建地图实例
var map = L.map('map', {
center: [45.51, -122.2],
zoom: 6
});
// 添加图层到地图
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', { foo: 'bar' }).addTo(map);
// 绘制一条折线
var latlngs = [
[45.51, -122.68],
[44.877, -122.43],
[44.04, -118.2]
];
//根据提供的三点坐标绘制折线
var polyline = L.polyline(latlngs, { color: 'red' }).addTo(map);
</script>
</body>
</html>
