微信公众号制作的网站开发专业网站建设科技公司
张小明 2026/1/8 19:41:12
微信公众号制作的网站开发,专业网站建设科技公司,wordpress 页面 首页,电商类网站往期内容#xff1a; WebGIS开发智慧校园#xff08;1#xff09;GIS开发的基本概念 WebGIS开发智慧校园#xff08;2#xff09;WebGIS开发平台介绍 WebGIS开发智慧校园#xff08;3#xff09;开发环境搭建 WebGIS开发智慧校园#xff08;4#xff09;Web开发HTML W…往期内容WebGIS开发智慧校园1GIS开发的基本概念WebGIS开发智慧校园2WebGIS开发平台介绍WebGIS开发智慧校园3开发环境搭建WebGIS开发智慧校园4Web开发HTMLWebGIS开发智慧校园5Web开发CSSWebGIS开发智慧校园6JavaScriptWebGIS开发智慧校园7开发准备WebGIS开发智慧校园8地图控件WebGIS开发智慧校园9点标记和几何计算WebGIS开发智慧校园10GeoJSONWebGIS开发智慧校园11测试高德APIWebGIS开发智慧校园12测试高德API地图参数WebGIS开发智慧校园13地图的组成和操作WebGIS开发智慧校园14地图控件的添加WebGIS开发智慧校园15地图点击事件的引入和点标记文末↓小助手备注【智慧校园】无偿获取 【完整版视频笔记源码】1. 折线 polyline通过构建经纬度点数组添加图层来绘制折线代码如下这里需要考虑的是如何动态的⽣成折线数组能否实现点击⼀下就添加⼀段// 折线的节点坐标数组每个元素为 AMap.LngLat 对象 var path [newAMap.LngLat(116.368904,39.913423),newAMap.LngLat(116.382122,39.901176),newAMap.LngLat(116.387271,39.912501),newAMap.LngLat(116.398258,39.904600)];// 创建折线实例varpolylinenewAMap.Polyline({path:path,borderWeight:2,// 线条宽度默认为 1 strokeColor: red, // 线条颜⾊lineJoin:round// 折线拐点连接处样式});// 将折线添加⾄地图实例map.add(polyline);2. 多边形polygon和折线的引⼊形式类似可以添加多边形。相应的代码如下// 多边形轮廓线的节点坐标数组varpath[newAMap.LngLat(116.368904,39.913423),newAMap.LngLat(116.382122,39.901176),newAMap.LngLat(116.387271,39.912501),newAMap.LngLat(116.398258,39.904600)];varpolygonnewAMap.Polygon({path:path,fillColor:#fff,// 多边形填充颜⾊borderWeight:2,// 线条宽度默认为 1strokeColor:red,// 线条颜⾊});map.add(polygon);3. 圆形circle圆形只需要指定圆⼼坐标和半径即可varcirclenewAMap.Circle({center:newAMap.LngLat(116.39,39.9),// 圆⼼位置radius:1000,// 圆半径fillColor:red,// 圆形填充颜⾊strokeColor:#fff,// 描边颜⾊strokeWeight:2,// 描边宽度});map.add(circle);这里有⼀个问题就是经纬度网其实并不见得就是矩形这⾥涉及到后面要了解的投影变换的概 念。后面要留意。代码varsouthWestnewAMap.LngLat(116.356449,39.859008)varnorthEastnewAMap.LngLat(116.417901,39.893797)varboundsnewAMap.Bounds(southWest,northEast)varrectanglenewAMap.Rectangle({bounds:bounds,strokeColor:red,strokeWeight:6,strokeOpacity:0.5,strokeDasharray:[30,10],// strokeStyle还⽀持 solidstrokeStyle:dashed,fillColor:blue,fillOpacity:0.5,cursor:pointer,zIndex:50,})map.add(rectangle)4. 折线的编辑可以引⼊编辑器插件来实现在线更新折线。// 引⼊多边形编辑器插件map.plugin([AMap.PolylineEditor],function(){// 实例化多边形编辑器传⼊地图实例和要进⾏编辑的多边形实例polylineEditornewAMap.PolylineEditor(map,polyline);// 开启编辑模式polylineEditor.open();});实现效果如下通过拖动折线的节点就可以改变折线的形状了。文末↓小助手备注【智慧校园】无偿获取 【完整版视频笔记源码】