南京地图njmaps使用，以公众版为例

比较冷门的地图，除非特殊指定，应该用的人不多，记录下，后面还要优化

1/在index.html中引入地图api相关脚本，njtoken是要自己申请的

2/添加地图容器，指定宽高，没有高度，地图不显示

3/创建地图实列，给地图增加比例尺、缩放、画点画面及搜索功能

<template><div class="map-demo"><div id="map" ref="map" class="map"></div><div class="input-card" style="max-height: calc(100% - 20rem)"><div class="input-item"><el-input type="text" id="queryText" value="" placeholder="地名地址搜索"><el-button slot="append" icon="el-icon-search" type="primary"></el-button></el-input></div><div class="info1" id="resultDom"></div><div class="close">x</div></div><div class="input-item-radio"><div class="pointbtn"><svg-icon class-name="画点" icon-class="画点" @click="changeMode(1)"></svg-icon><span class="input-text" @click="changeMode(1)">画点</span><!-- <svg-icon class-name="画线" icon-class="画线" @click="changeMode(2)"></svg-icon><span class="input-text" @click="changeMode(2)">画线</span> --><svg-icon class-name="画面" icon-class="画面" @click="changeMode(3)"></svg-icon><span class="input-text" @click="changeMode(3)">画面</span></div><div class="delbtn"><svg-icon class-name="删除按钮" icon-class="删除按钮" @click="deleteAll()"></svg-icon><span class="input-text" @click="deleteAll()">清除</span></div></div><div class="panel"><span id="font"></span></div></div>
</template>

data() {return {map: null,drawCtrl: null,}},

实例初始化的时候用定时器包一下，防止数据先渲染，地图还没有创建好，加定时器后先创建地图，再渲染数据

 mounted() {let that = this// that.$nextTick(() => {}) // 微任务setTimeout(() => {that.getinit()}, 0) // 宏任务that.gettip()},

getinit() {let that = thisthat.map = new GeoGlobe.Map({container: 'map', // 绑定容器mapCRS: '4490', // 定义坐标系zoom: 13, // 当前缩放级别center: [118.778, 32.043], // 定位中心点maxZoom: 20, // 最大缩放级别minZoom: 8, // 最小缩放级别})var token = '2632890994340fb68c706b9df2c630f3'// this.map = map// console.log(this.map, 'this.map')// 地图加载事件that.map.on('load', function () {// 加载南京公众版矢量地图var dt_layer = new GeoGlobe.NJLayer('esri_vec_dt_public')that.map.loadSprite(dt_layer.sprite)that.map.style.setGlyphs(dt_layer.glyphs)that.map.addLayer(dt_layer)// 加载南京公众版矢量注记// 延时加载注记，优化底图加载速度setTimeout(function () {var zj_layer = new GeoGlobe.NJLayer('esri_vec_zj_public')that.map.loadSprite(zj_layer.sprite)that.map.style.setGlyphs(zj_layer.glyphs)that.map.addLayer(zj_layer)}, 10)})// 获取导航控件var Na_controlif (Na_control == undefined) {Na_control = new GeoGlobe.Control.Navigation()that.map.addControl(Na_control, 'bottom-right')// 将获取的zoom值添加到html中document.getElementById('font').innerHTML = that.map.getZoom()/*********添加zoom改变监听事件********/that.map.on('zoomend', function (e) {document.getElementById('font').innerHTML = that.map.getZoom()})}// 获取比例尺控件容器var Sca_controlif (Sca_control == undefined) {Sca_control = new GeoGlobe.Control.Scale({position: '50%',maxWidth: 80,unit: 'imperial',})that.map.addControl(Sca_control)}that.getmarker()},// 搜索输入框gettip() {// 地名地址输入提示实例var sfCodingTips = new GeoGlobe.Query.SFCodingTips()// 参数var option = {q: null, //搜索提示词}// 提示词$('#queryText').keyup(function () {var keyWord = $('#queryText').val()if (keyWord) {option['q'] = keyWordsfQueryTip(option)}})// 点击关闭按钮，隐藏结果面板$('.close').click(function () {$('#resultDom').hide()$('.close').hide()$('#queryText').val('')})// 开始查询function sfQueryTip(option) {sfCodingTips.query(option, function (data) {var html = ''let features = data.featuresfor (var i = 0; i < features.length; i++) {var name = features[i].properties.namevar address = features[i].properties.addresshtml += '<span><b>' + name + '</b><br/><label>' + address + '<label></span><br/>'}$('.close').show()$('#resultDom').show()$('#resultDom').html(html)})}},drawLIine(data) {let that = this// 画点、画线、画面if (data == 1) {that.map.on('click', function (e) {console.log(1)var lng = e.lngLat.lngvar lat = e.lngLat.lat// 添加点var monument = [lng, lat]// 直接显示信息框var popup1 = new GeoGlobe.Popup({closeOnClick: true,}).setLngLat(monument).setHTML(`<div class="mapboxgl-popup-content"><div class="map-popup"><div class="map-popup-article"><header><span >我的标记</span><span class="right">
<i title="" class="close"></i></span></header><article><div class="common">
<div class="mark-popup">
<div class="mark-popup-item"><label >名称</label><input id="mkrId" type="text" placeholder="我的标记">
</div>
<div  class="mark-popup-item"><label >备注</label><textarea rows="3" placeholder="我的备注"></textarea>
</div>
<div  class="mark-popup-item flex-end"><input type="button" value="保存"><input type="button" value="删除">
</div>
</div></div>
</article></div></div></div>`).addTo(that.map)})} else {that.map.on('dblclick', function (e) {console.log(2)var lng = e.lngLat.lngvar lat = e.lngLat.lat// 添加点var monument = [lng, lat]// 直接显示信息框var popup1 = new GeoGlobe.Popup({closeOnClick: true,}).setLngLat(monument).setHTML(`<input id="mkrId" type="text" style="border: none;"></br><input type="button" name="btnOK"  onclick="fnOK(2)" value="保存">&nbsp;&nbsp; <input type="button" name="btnClear"  onclick="fnClear(2);" value="删除">`).addTo(that.map)})}},getmarker() {// 实例化画图控件let that = thisif (that.drawCtrl == null) {that.drawCtrl = new GeoGlobe.Control.Draw({displayControlsDefault: false,})that.map.addControl(that.drawCtrl)// 以下去除连续绘制// that.drawCtrl = drawCtrl// that.map.on('draw.create', function (e) {//   //   // 连续绘制//   var model = that.drawCtrl.getMode()//   setTimeout(function () {//     that.drawCtrl.changeMode(model)//   }, 1)// })}},changeMode(mode) {let that = thisswitch (mode) {case 1:that.deleteAll()that.drawCtrl.changeMode('draw_point') // 点that.drawLIine(1)breakcase 2:that.deleteAll()that.drawCtrl.changeMode('draw_line_string') // 线that.drawLIine(2)breakcase 3:that.deleteAll()that.drawCtrl.changeMode('draw_polygon') // 面that.drawLIine(2)break}},deleteAll() {let that = thisthat.drawCtrl.deleteAll() // 控件删除that.drawCtrl.changeMode(that.drawCtrl.modes.STATIC)},

<style scoped lang="scss">
.map-demo {position: relative;height: 100%;width: 100%;.input-card {z-index: 9;display: flex;flex-direction: column;min-width: 0;word-wrap: break-word;background-color: #fff;background-clip: border-box;width: 24rem;border-width: 0;border-radius: 0.4rem;position: absolute;top: 0;left: 0;-ms-flex: 1 1 auto;flex: 1 1 auto;padding: 0.75rem 1.25rem;.close {font-size: 20px;position: absolute;right: 2rem;display: none;top: 0.6rem;cursor: pointer;}.info1 {padding: 0.75rem 1.25rem;margin-top: 1rem;background-color: white;width: auto;border-width: 0;border-top: 1px solid rgba(114, 124, 245, 0.5);display: none;}.input-item {height: 3rem;}}// 画点画面画线.input-item-radio {z-index: 9;position: absolute;top: 1rem;right: 7rem;.pointbtn {width: 13rem;height: 2rem;border-radius: 0.2rem;text-align: center;line-height: 2rem;color: #c1c1c1;background: #fff;span {padding-left: 0.2rem;padding-right: 0.2rem;}}.delbtn {position: absolute;top: 0rem;right: -6rem;background: #e62d33;width: 5rem;height: 2rem;border-radius: 0.2rem;text-align: center;line-height: 2rem;color: #fff;span {padding-left: 0.2rem;}}}.panel {z-index: 9;position: absolute;bottom: 6.5rem;right: 1rem;span {font-size: 18px;font-weight: 600;}}
}
.map {height: 100%;width: 100%;
}
// 比例尺控件容器位置
/deep/ .mapboxgl-ctrl-bottom-left {bottom: 10%;left: 0;
}
.mapboxgl-popup-content {background: none;border-radius: 0;-webkit-box-shadow: none;box-shadow: none;padding: 0;pointer-events: none;.map-popup {pointer-events: none;min-width: 260px;max-width: 500px;.map-popup-article {border: 1px solid #999;background-color: #fff;.right {float: right;.close {height: 16px;width: 20px;display: inline-block;background-repeat: no-repeat;background-position: 50%;background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAANCAYAAAB2HjRBAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAAWdEVYdENyZWF0aW9uIFRpbWUAMTEvMjcvMTJkAtf+AAAAg0lEQVQokcWSQRaDIAxEv31Fr6oeyHhUdDPdEB4qdEEXzYZkYDJ5EwZJ9Marmwm8PTn2cQOW4s6m+VxbOACSkES0oDKiBUULWw13Tjm2HfuYi2k+AZZ0+nQAlgHvktQfSvdJyvcXcqtBjfggdyt/MafZ4Ce3856T27U9c8c9GfSv7/kB0TU9azwFPjwAAAAASUVORK5CYII=);}}.common {margin: 0.8em 1em;.mark-popup {display: flex;width: 280px;.mark-popup-item {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;width: 100%;margin-bottom: 7px;}.mark-popup-item:last-child {margin-bottom: 0;}.flex-end {-webkit-box-pack: end;-ms-flex-pack: end;float: right;// justify-content: flex-end;}}}}}
}
</style>

效果如下：

南京地图njmaps使用，以公众版为例相关推荐

图吧地图(V5.0公测版) 高清地图今日公测
图吧地图(V5.0公测版) 高清地图今日公测软件简介:图吧官方网站 [http://www.mapbar.com] 图吧-首批甲级电子地图资质+专注地图导航服务的老牌+HTC/LG等大厂认证预装.惊 ...
ArcGIS在线应用介绍（4）辽宁省地理信息共享平台（公众版）
http://www.giser.net/?p=337 辽宁省地理信息共享平台(公众版) 开发语言:flex SDK:ArcGIS API for flex ArcGIS产品:ArcGIS Serve ...
对标测评YD云电脑和天翼云电脑公众版
最近听说YD也推出了自研云电脑产品,抱着吃瓜心态网上充值体验了一把YD云电脑,正好我手上有天翼云电脑,凑一对测试看看两家央企在云计算领域的技术实力究竟如何. 测试环境搭建在我的个人pc上,分别下载YD ...
vue使用百度地图3.0,使用JavaScriptAPI版,聚合点,个性化地图切换卫星地图
为什么用JavaScript版,因为用vue的百度map有问题,地图显示不全,之前还以为是我的问题,结果去了官网发现官网的地图都是显示不全,也不知道咋回事,不知道现在修好了没,所以只好用JavaScr ...
IBM Bluemix 中文公众版初体验
很荣幸收到IBM颁发的"IBM Bluemix 试用邀请函",成为 IBM Bluemix 中文公众版的首批特邀用户. 11月18日就收到了标题为"China Bluem ...
公众版与政企版，这两款云电脑我都要
8月18日,以"自主领先,畅游云端"为主题的天翼云电脑专题讲座在线上召开.天翼云科技有限公司研发二部高级产品经理梁胜蓝作为主讲人,对天翼云电脑不同版本的功能.特点进行了介绍,并分享 ...
体育场地预定球馆订场小程序APP公众版开发建设定制
体育场地预定球馆订场小程序APP公众版开发建设定制这是一款基于ThinkPHP开发的球馆场地预订微信小程序,网站系统,APP项目等程序还可以根据需求定制等适用于篮球.足球.排球.网球.乒乓球.羽 ...
漏刻有时地理信息可视化百度地图标注系统本地Excel版说明书
漏刻有时地理信息可视化百度地图本地版说明书地理信息数据可视化系统目录使用说明其他说明地理信息数据可视化漏刻有时(LOCKDATAV)地理信息可视化百度地图标注系统本地Excel版,简称地理 ...
微擎公众版、授权版和商业版有什么区别？如何选择？
微擎版本分为免费和收费两种,免费为公众版不可用于商业运营,授权版和商业版可用于商业运营,授权版相对于商业版会便宜一些为4999元,商业版8800元,功能方面会比授权版支持丰富,新手站长来详细说下微擎免 ...
2017.10.18——用户体验分析：以“南通市妇幼保健院微信公众号”为例
软件工程作业3--用户体验分析:以"南通市妇幼保健院微信公众号"为例一.作业目标基于实例分析,体会用户体验设计的 7 条准则. 二. 作业要求基于我们列出的 7 条UX评价准 ...

南京地图njmaps使用，以公众版为例

南京地图njmaps使用，以公众版为例相关推荐

最新文章

热门文章