零基础上手WebGIS+智慧校园实例（长期更新#3）【html by js】

请点个赞+收藏+关注支持一下博主喵！！！

明天博主将展示咱学的css3+html5设计出来的终极无敌成果！！ (ૢ˃ꌂ˂⁎)

之后代码+资料全部发到github里，希望大家能关注一下咱的Github

继续上篇博客：：：：：：：：：：：：：：：：：：：：：：：：：：：：

19. WebGIS矢量图形的绘制

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>地图参数</title><!-- 一，引入资源 --><scripttype="text/javascript">window._AMapSecurityconfig = {securityJsCode:'f00a9ad0aa34cb73b582ee0639112578',}</script><scripttype="text/javascript"src="https://webapi.amap.com/maps?v=2.0&key=af0e06deee299b6b0930c68a4b98be0b"></script><!-- 三，创建地图样式 --><style>html,body,#container {width: 100%;height: 100%;}</style>
</head>
<body><!-- 二，创建地图容器 --><div id="container"></div><!-- 四，加载地图 --><script>// 声明一个变量    (这里的所有逗号都必须打var map = new AMap.Map('container', {center: [115.8, 28.7],  // 1.设置地图中心的经纬度zoom: 18, // 2.地图的缩放比例(3~20)})// 1. 折线Polyline（句末的分号可打也可不打// (1)配置折线路径 (里面的逗号必须大var path = [new AMap.LngLat(115.800225, 28.700167),new AMap.LngLat(115.800091, 28.69926),new AMap.LngLat(115.800546, 28.699099),new AMap.LngLat(115.800223, 28.698503),]// (2)创建折线Polyline实例（里面的逗号必须打var polyline = new AMap.Polyline({path: path, // 路径为上面写的四个点路径命名为pathstrokeWeight: 2, // 线条宽度strokeColor: 'red', // 线条颜色lineJoin: 'round', // 折线拐点连接处样式})// (3)将折线添加到地图实例map.add(polyline)// (4)移除一条已创建的折线// map.remove(polyline)// (5)一次性移除多条已创建的折线// var polylines = [polyline1, polyline2, polyline3]// map.remove(polylines)// (6)显示/隐藏 一条已创建的Polyline: 格式:自己命名的一个Polyline.show()//polyline.show()   //polyline.remove()// 2. 多边形Polygon// 多边形轮廓线的节点坐标数组....var path1 = [[new AMap.LngLat(115.799622, 28.699412),new AMap.LngLat(115.799466, 28.698908),new AMap.LngLat(115.798376, 28.698956),new AMap.LngLat(115.798296, 28.699698),], [new AMap.LngLat(115.798669, 28.69939),new AMap.LngLat(115.798662, 28.699238),new AMap.LngLat(115.799013, 28.699228),new AMap.LngLat(115.799032, 28.699384),]]var polygon = new AMap.Polygon({path: path1,fillColor: '#fff',strokeWeight: 2,strokeColor: 'red',})map.add(polygon)// 将覆盖物调整到合适视野: 方法会根据地图上添加的覆盖物分布情况，自动缩放地图到合适的视野级别map.setFitView([polygon])// 给Polygon添加事件//鼠标移入事件polygon.on('mouseover', () => {polygon.setOptions({//修改多边形属性的方法fillOpacity: 0.7, //多边形填充透明度fillColor: '#7bccc4',})})//鼠标移出事件polygon.on('mouseout', () => {polygon.setOptions({fillOpacity: 1,fillColor: '#fff',})})// 3. 圆形Circle// (1)设置圆心位置var center = new AMap.LngLat(115.798962, 28.70036)// (2)设置圆的半径大小var radius = 100// (3) 创建圆形Circle实例var circle = new AMap.Circle({center: center, //圆心radius: radius, //半径borderWeight: 3, //描边的宽度strokeColor: '#FF33FF', //轮廓线颜色strokeOpacity: 1, //轮廓线透明度strokeWeight: 6, //轮廓线宽度fillOpacity: 0.4, //圆形填充透明度strokeStyle: 'dashed', //轮廓线样式strokeDasharray: [10, 10], //勾勒形状轮廓的虚线和间隙的样式，30代表线段长度 10代表间隙长度fillColor: '#1791fc', //圆形填充颜色zIndex: 50, //圆形的叠加顺序})map.add(circle)map.setFitView([ circle ])// 4. 矩形Rectangle实例// (1)设置矩形范围，由西南和东北的经纬度坐标组成的范围: ps矩形经纬度坐标点必须是左下、右上的顺序。var southwest = new AMap.LngLat(115.800657, 28.700588) //西南角的经纬度坐标var northeast = new AMap.LngLat(115.8011, 28.699649) //东北角的经纬度坐标var bounds = new AMap.Bounds(southwest, northeast)//创建一个地物对象的经纬度矩形范围// (2)创建矩形Rectangle实例var rectangle = new AMap.Rectangle({bounds: bounds, //矩形的范围strokeColor: 'red',//轮廓线颜色strokeWeight: 6, //轮廓线宽度strokeOpacity: 0.5, //轮廓线透明度strokeStyle: 'dashed', //轮廓线样式，dashed 虚线，还支持 solid 实线strokeDasharray: [30, 10], //勾勒形状轮廓的虚线和间隙的样式，30代表线段长度 10代表间隙长度fillColor: 'blue', //矩形填充颜色fillOpacity: 0.5, //矩形填充透明度cursor: 'pointer', //指定鼠标悬停时的鼠标样式zIndex: 50, //矩形在地图上的层级})map.add(rectangle)map.setFitView([rectangle])// (3)给Rectangle添加事件//鼠标移入事件rectangle.on('mouseover', () => {rectangle.setOptions({ //修改矩形属性的方法fillOpacity: 0.7,fillColor: '#7bccc4',})})//鼠标移出事件rectangle.on('mouseout', () => {rectangle.setOptions({fillOpacity: 0.5,fillColor: 'blue',})})// 编辑器示例:  eg.引入矩形编辑器插件, 其他的同理将Rectangle等效替换即可map.plugin(['AMap.RectangleEditor'], function () {//实例化矩形编辑器，传入地图实例和要进行编辑的矩形实例var rectangleEditor = new AMap.RectangleEditor(map, rectangle)//开启编辑模式, 关闭用close即可rectangleEditor.open()rectangleEditor.close()})</script>
</body>
</html>

效果如下：

就得到了几个好看的图形，并且咱们配置了功能：当鼠标光标停留在图形的范围里，图形内部会变为自己设置的颜色（通常设置的比较深），在范围外，图形就只保留自己设置的颜色（通常设置的比较透）

20. WebGIS计算距离

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>地图参数</title><!-- 一，引入资源 --><scripttype="text/javascript">window._AMapSecurityconfig = {securityJsCode:'f00a9ad0aa34cb73b582ee0639112578',}</script><scripttype="text/javascript"src="https://webapi.amap.com/maps?v=2.0&key=af0e06deee299b6b0930c68a4b98be0b"></script><!-- 三，创建地图样式 --><style>html,body,#container {width: 100%;height: 100%;}</style>
</head>
<body><!-- 二，创建地图容器 --><div id="container"></div><!-- 四，加载地图 --><script>// 声明一个变量var map = new AMap.Map('container', {center: [114.3, 30.6],  // 1.设置地图中心的经纬度zoom: 12, // 2.地图的缩放比例(3~20)})// 1. 创建两个点(设置可以拖动)var m1 = new AMap.Marker({map: map, // 将m1这个点添加到地图中draggable: true, // 配置该点可以拖动position: new AMap.LngLat(114.255025, 30.621275),})var m2 = new AMap.Marker({map: map, // 将m2这个点添加到地图中draggable: true, // 配置该点可以拖动position: new AMap.LngLat(114.334332, 30.579608),})// 让地图根据覆盖物调整地图显示区域map.setFitView()// 2, 准备一条线var line = new AMap.Polyline({strokeColor: '#80d8ff', //描边的颜色isOutline: true, //包含轮廓outerlineColor: 'white', //轮廓颜色})line.setMap(map)// 3. 准备文本var text = new AMap.Text({text: '',style: {'background-color': '#29b6f6','border-color': '#e1f5fe','font-size': '16px',}})text.setMap(map)// 4. 计算function compute() {//得到m1和m2的经纬度var p1 = m1.getPosition()var p2 = m2.getPosition()// 希望text文本显示在这个经纬度的中间var textPos = p1.divideBy(2).add(p2.divideBy(2)) // (p1+p2)/2var distance = Math.round(p1.distance(p2))var path = [p1, p2]line.setPath(path) // 绘制线， 根据p1，p2起始点和终点的坐标text.setText('距离为: ' + distance + '米')text.setPosition(textPos)}compute()m1.on('dragging', compute)m2.on('dragging', compute)</script>
</body>
</html>

效果如下：

这两个坐标为我们在代码里主动“放置”的，然后计算他们的距离。。。

以下便是智慧校园-三个实例

1. 地图显示成功

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>智慧校园</title><!-- 引入资源 --><!-- 引入css相关的资源 --><link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /><link rel="stylesheet" href="./css/index.css"><!-- 引入js相关的资源 --><script type="text/javascript">window._AMapSecurityconfig = {securityJsCode: 'f00a9ad0aa34cb73b582ee0639112578',}</script><script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=af0e06deee299b6b0930c68a4b98be0b"></script><script src="./js/store.js"></script>
</head><body><!-- 创建地图容器 --><div id="container"></div><div class="info">点击地图标注热门地点</div><script>//创建地图对象var map = new AMap.Map('container', {center: [115.827196, 28.72268],zoom: 16,viewMode: '3D',pitch: 45,})// 使用控件AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.ControlBar'],function () {map.addControl(new AMap.ToolBar())map.addControl(new AMap.Scale())map.addControl(new AMap.ControlBar())})// 监听地图的点击事件map.on('click', function (e) { //e为点击的事件对象var marker = new AMap.Marker({position: e.lnglat,})map.add(marker)})</script>
</body></html>

其中我们使用引入包的方法来在外源设计css和js算法设置，这样使得其具有了类似于java类的功能，非常nice！！！！！！！！！！！！！！！！！！！！！！

css的设计*：

html,
body,
#container {width: 100%;height: 100%;
}

难点：：js的设计*：

// (封装的数据读写函数: 实现数据的持久化)
// 从localstorage中读取数据
function getData() {// 如果本地localstorage中不存在数据(所以用取反)if (!localStorage.getItem('geojson')) {localStorage.setItem('geojson', '[]') // 空数组}return JSON.parse(localStorage.getItem('geojson'))
}// 将数据保存到localstorage中
function saveData(data) {localStorage.setItem('geojson', JSON.stringify(data))
}

它保证了数据的持久化，使得多个.html能和并于一个网页

2. 数据持久化成功

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>智慧校园</title><!-- 引入资源 --><!-- 引入css相关的资源 --><link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /><link rel="stylesheet" href="./css/index.css"><!-- 引入js相关的资源 --><script type="text/javascript">window._AMapSecurityconfig = {securityJsCode: 'f00a9ad0aa34cb73b582ee0639112578',}</script><script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=af0e06deee299b6b0930c68a4b98be0b"></script><script src="./js/store.js"></script>
</head><body><!-- 创建地图容器 --><div id="container"></div><div class="info">点击地图标注热门地点</div><script>//创建地图对象var map = new AMap.Map('container', {center: [115.827196, 28.72268],zoom: 16,viewMode: '3D',pitch: 45,})// 使用控件AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.ControlBar', 'AMap.GeoJSON'],function () {map.addControl(new AMap.ToolBar())map.addControl(new AMap.Scale())map.addControl(new AMap.ControlBar())})// 定义一个全局变量， 保存geojsonvar geojson = new AMap.GeoJSON({geoJSON: null,})// 如果存在数据， 那么才导入数据 (逻辑判断)if (JSON.stringify(getData()) != '[]') { // 导入数据geojson.importData(getData())}map.add(geojson)//console.log(geojson) （两个console语句：可以康康并对比 点生成前后的geojson的内容// 监听地图的点击事件map.on('click', function (e) { //e为点击的事件对象var marker = new AMap.Marker({position: e.lnglat,})// 不再使用map.add(marker)// 而是通过geojson对象来管理覆盖物geojson.addOverlay(marker)//console.log(geojson) （两个console语句：可以康康并对比 点生成前后的geojson的内容// 保存数据(toGeoJSON函数的作用：将geojson对象转换成标准的GeoJSON格式对象)saveData(geojson.toGeoJSON())})</script>
</body></html>

3. 实现打卡显示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>智慧校园</title><!-- 引入资源 --><!-- 引入css相关的资源 --><link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /><link rel="stylesheet" href="./css/index.css"><!-- 引入js相关的资源 --><script type="text/javascript">window._AMapSecurityconfig = {securityJsCode: 'f00a9ad0aa34cb73b582ee0639112578',}</script><script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=af0e06deee299b6b0930c68a4b98be0b"></script><script src="./js/store.js"></script>
</head><body><!-- 创建地图容器 --><div id="container"></div><div class="info">点击地图标注热门地点, 点击地点可以打卡</div><script>//创建地图对象var map = new AMap.Map('container', {center: [117.96611, 28.43111],zoom: 16,viewMode: '3D',pitch: 45,})// 使用控件AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.ControlBar', 'AMap.GeoJSON'],function () {map.addControl(new AMap.ToolBar())map.addControl(new AMap.Scale())map.addControl(new AMap.ControlBar())})// 定义一个全局变量， 保存geojsonvar geojson = new AMap.GeoJSON({geoJSON: null,})// 如果存在数据， 那么才导入数据 (逻辑判断)if (JSON.stringify(getData()) != '[]') {// 导入数据geojson.importData(getData())// 恢复旧数据的点击事件geojson.eachOverlay(function (item) {item.on('click', function (e) {// 让点击的marker对象的click属性+1var ext = item.getExtData()// ext._geoJsonProperties.click = ext._geoJsonProperties.click + 1// var click = ext._geoJsonProperties.clickvar click = ++ext._geoJsonProperties.click//console.log('点击了' + click + '次')// 使用消息提示框(Infowindow)显示,  锚点(anchor)var infowindow = new AMap.InfoWindow({anchor: 'top-center',content: `<div>打卡了${click}次</div>`,})// 显示(打卡信息窗口)infowindow.open(map, item.getPosition()) saveData(geojson.toGeoJSON())})})}map.add(geojson)//console.log(geojson) （两个console语句：可以康康并对比 点生成前后的geojson的内容// 监听地图的点击事件map.on('click', function (e) { //e为点击的事件对象var marker = new AMap.Marker({position: e.lnglat,// 给marker对象添加自定义属性extData: {_geoJsonProperties: {gid: geojson.getOverlays().length + 1,click: 0,},},})// 使用覆盖物的点击事件marker.on('click', function (e) {//console.log(e.lnglat, '新的数据点击了')// 让点击的marker对象的click属性+1var ext = marker.getExtData()// ext._geoJsonProperties.click = ext._geoJsonProperties.click + 1// var click = ext._geoJsonProperties.clickvar click = ++ext._geoJsonProperties.click// 打印在控制台：console.log('点击了' + click + '次')// 使用消息提示框(Infowindow)显示,  锚点(anchor)var infowindow = new AMap.InfoWindow({anchor: 'top-center',content: `<div>打卡了${click}次</div>`,})// 显示(打卡信息窗口)infowindow.open(map, marker.getPosition())saveData(geojson.toGeoJSON())})// 不再使用map.add(marker)// 而是通过geojson对象来管理覆盖物geojson.addOverlay(marker)//console.log(geojson) （两个console语句：可以康康并对比 点生成前后的geojson的内容// 保存数据(toGeoJSON函数的作用：将geojson对象转换成标准的GeoJSON格式对象)saveData(geojson.toGeoJSON())})</script>
</body></html>

你就能标记点，点击点进行打卡，并且会记录于此地图中。