美文网首页开源
基于不同地图库的地图服务加载展示demo

基于不同地图库的地图服务加载展示demo

作者: benbensheng | 来源:发表于2019-02-27 23:23 被阅读1次

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>

相关文章

网友评论

    本文标题:基于不同地图库的地图服务加载展示demo

    本文链接:https://www.haomeiwen.com/subject/pjnfuqtx.html