当前位置: 首页 > 知识库问答 >
问题:

前端 - 超图 supermapi Server rest服务对地图实现描点功能,回显坐标轴?

刘高峯
2023-08-03

业务需求使用rest服务,而不是wms图层方法。在通过以下方法,地图能正常初始化,使用的是initMap方法,但是在进行描点的时候, rest服务的marker找不到此方法。以下是我引入的插件,和初始化代码,请教网友解答,感谢

<template>  <div  style="width: 100%; height: 100%" >    <div id="map" style="width: 100%; height: 100%"></div>  </div></template><script>import L from "leaflet";import { initMap } from "@supermap/iclient-leaflet";import "leaflet-draw/dist/leaflet.draw.css"; // 导入 Leaflet Draw CSSimport "leaflet-draw"; // 导入 Leaflet Draw 插件export default {  data() {    return {      url: "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World",//gis服务地址,我放的公开地址    };  },  mounted() {    this.getInit(this.url);  },  methods: {    getInit(url) {      this.map = initMap(url,        {            mapOptions: {              zoom: 4,              boxZoom: 18,              minZoom: 3,            },            layerOptions: {},      })      // 自定义比例尺控件      var customScaleControl = L.control.scale({        position: "bottomleft", // 设置控件显示位置        imperial: false // 使用公制单位      });      // console.log(map.marker) //报错      // console.log(customScaleControl)    },  },};</script>

共有1个答案

崔宜修
2023-08-03
getInit(url) {  this.map = initMap(url,    {        mapOptions: {          zoom: 4,          boxZoom: 18,          minZoom: 3,        },        layerOptions: {},  })  // 自定义比例尺控件  var customScaleControl = L.control.scale({    position: "bottomleft", // 设置控件显示位置    imperial: false // 使用公制单位  });  customScaleControl.addTo(this.map);  // 创建一个Marker对象  var marker = L.marker([51.5, -0.09]);  // 把Marker添加到地图上  marker.addTo(this.map);},
 类似资料:
  • 本文向大家介绍使用Python实现图像标记点的坐标输出功能,包括了使用Python实现图像标记点的坐标输出功能的使用技巧和注意事项,需要的朋友参考一下 Sometimes we have need to interact  with an application,for example by marking points in an image,or you need to annotation

  • 我要做一个类似微信分享位置的功能,不知道高德地图可以实现这种功能吗?

  • 本文向大家介绍JavaScript前端实现压缩图片功能,包括了JavaScript前端实现压缩图片功能的使用技巧和注意事项,需要的朋友参考一下 为什么要前端来压缩图片 最近在做一个移动端h5上传图片的功能,本来这个功能并不复杂,只需要将图片文件通过axios传到服务端即可,但是考虑到现在手机设配的拍照功能十分强大,随便一张照片都能动辄五六兆,而服务端的要求是上传图片必须小于两兆,而且直接传这么大图

  • 本文向大家介绍webuploader实现上传图片到服务器功能,包括了webuploader实现上传图片到服务器功能的使用技巧和注意事项,需要的朋友参考一下 本文为大家分享了webuploader实现上传图片到服务器的具体代码,供大家参考,具体内容如下 效果图: 一、引入资源文件 1.1 引入webuploader.css文件 1.2 引入webuploader.min.js文件 二、HTML代码

  • 本文向大家介绍WEB前端实现裁剪上传图片功能,包括了WEB前端实现裁剪上传图片功能的使用技巧和注意事项,需要的朋友参考一下 最后的效果如下: 这里面有几个功能,第一个是支持拖拽,第二个压缩,第三个是裁剪编辑,第四个是上传和上传进度显示,下面依次介绍每个功能的实现: 1. 拖拽显示图片 拖拽读取的功能主要是要兼听html5的drag事件,这个没什么好说的,查查api就知道怎么做了,主要在于怎么读取用

  • 本文向大家介绍Django实现前台上传并显示图片功能,包括了Django实现前台上传并显示图片功能的使用技巧和注意事项,需要的朋友参考一下 1. 前台 templates/upload/upload.html 2. 项目设定 settings.py #添加 ALLOW_UPLOAD = ['jpg', 'png', 'jpeg'] 3.app设定 urls.py views.py Django实现