|
@@ -50,9 +50,9 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
- <div ref="map" class="map-container">
|
|
|
- <!-- <img src="'https://inews.gtimg.com/om_bt/OtxRSLxjDKPT0ajd72ZeQk6IrtFinjJu7g5Nb9oCkI6SoAA/641'" alt=""> -->
|
|
|
- </div>
|
|
|
+ <!-- <div style="margin-bottom: 20px;background-image: url('http://niu305.cn:8091/uploads/image/headphoto1.png');background-position: top right;"> -->
|
|
|
+ <div ref="map" class="map-container"></div>
|
|
|
+ <!-- </div> -->
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
<el-button class="cancelClose1" @click="run.dialogFormVisible = false;getList()">关闭</el-button>
|
|
|
</div>
|
|
@@ -197,7 +197,15 @@ export default {
|
|
|
}
|
|
|
|
|
|
// console.log(JSON.stringify(arrList),'arrList')
|
|
|
- this.path = arrList
|
|
|
+ // this.path = arrList //真实数据
|
|
|
+ // 测试数据
|
|
|
+ this.path = [
|
|
|
+ [116.317911, 39.939229], // 示例轨迹点1
|
|
|
+ [116.327911, 39.939229], // 示例轨迹点1
|
|
|
+ [116.328911, 39.939329], // 示例轨迹点1
|
|
|
+ [116.338911, 39.939429], // 示例轨迹点1
|
|
|
+ [116.342659, 39.946275]
|
|
|
+ ]
|
|
|
this.longitude = this.path[0][0] // 实景图所在位置的经度
|
|
|
this.latitude = this.path[0][1] // 实景图所在位置的纬度
|
|
|
// zoom: 15, // 实景
|
|
@@ -215,13 +223,24 @@ export default {
|
|
|
}).then(()=>{
|
|
|
|
|
|
})
|
|
|
-
|
|
|
+ // 后续牧场栏舍图
|
|
|
+ var backgroundImageUrl = 'https://amappc.cn-hangzhou.oss-pub.aliyun-inc.com/lbs/static/img/dongwuyuan.jpg'; // 示例图片链接
|
|
|
+ var imageLayer = new AMap.ImageLayer({
|
|
|
+ url: backgroundImageUrl,
|
|
|
+ bounds: new AMap.Bounds(
|
|
|
+ [116.327911, 39.939229],
|
|
|
+ [116.342659, 39.946275]
|
|
|
+ ),//图片范围大小的经纬度,传入西南和东北的经纬度坐标
|
|
|
+ zooms: [15, 20]
|
|
|
+ });
|
|
|
this.map = new window.AMap.Map(this.$refs.map, {
|
|
|
zoom: 16,
|
|
|
+ zIndex:2,
|
|
|
center: this.path[0],
|
|
|
- // layers: [
|
|
|
- // new window.AMap.TileLayer.Satellite() // 使用卫星地图图层
|
|
|
- // ]
|
|
|
+ layers: [
|
|
|
+ AMap.createDefaultLayer(),
|
|
|
+ imageLayer,
|
|
|
+ ]
|
|
|
});
|
|
|
const startMarker = new window.AMap.Marker({
|
|
|
position: this.path[0], // 起始点位置
|
|
@@ -233,31 +252,30 @@ export default {
|
|
|
map: this.map,
|
|
|
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png', // 终点图标
|
|
|
});
|
|
|
- // var imageLayer = new AMap.ImageLayer({
|
|
|
- // url: 'https://inews.gtimg.com/om_bt/OtxRSLxjDKPT0ajd72ZeQk6IrtFinjJu7g5Nb9oCkI6SoAA/641',
|
|
|
- // // bounds: new AMap.Bounds(
|
|
|
- // // [116.327911, 39.939229],
|
|
|
- // // [116.342659, 39.946275]
|
|
|
- // // ),
|
|
|
- // // zooms: [1, 50]
|
|
|
- // });
|
|
|
- // var imageLayers = new AMap.ImageLayer({
|
|
|
- // url: 'https://inews.gtimg.com/om_bt/OtxRSLxjDKPT0ajd72ZeQk6IrtFinjJu7g5Nb9oCkI6SoAA/641',
|
|
|
- // // url: this.vLoUrl,
|
|
|
- // bounds: new AMap.Bounds(
|
|
|
- // [121.97563085677434,27.92512942520125],
|
|
|
- // [131.551866454716, 36.16701972816233]
|
|
|
- // ),
|
|
|
- // zooms: [1, 50]
|
|
|
- // });
|
|
|
- // this.map.add([imageLayer,imageLayers])
|
|
|
+ // 图片显示在地图底部
|
|
|
+
|
|
|
+ // var that = this
|
|
|
+ // that.map.on('complete', function() {
|
|
|
+ // var container = that.map.getContainer();
|
|
|
+ // container.style.backgroundImage = 'url(' + backgroundImageUrl + ')';
|
|
|
+ // container.style.backgroundSize = 'cover'; // 使背景图片充满容器
|
|
|
+ // container.style.backgroundPosition = 'center'; // 将背景图片居中
|
|
|
+ // container.style.zIndex = 80;
|
|
|
+ // });
|
|
|
+ // 切片显示
|
|
|
+ // const tileLayer = new AMap.TileLayer({
|
|
|
+ // zIndex: 10,
|
|
|
+ // tileUrl: backgroundImageUrl, // 图片URL
|
|
|
+ // });
|
|
|
+
|
|
|
+ // this.map.add(tileLayer)
|
|
|
this.drawPath();
|
|
|
},
|
|
|
drawPath() {
|
|
|
const polyline = new window.AMap.Polyline({
|
|
|
path: this.path,
|
|
|
strokeStyle: 'red',
|
|
|
- strokeColor: '#3366FF',
|
|
|
+ strokeColor: '#F9423A',
|
|
|
strokeOpacity: 1,
|
|
|
strokeWeight: 3,
|
|
|
map: this.map,
|