Openlayers实现距离面积测量_openlayers测距资源-CSDN下载

107 浏览量 2021-01-18 18:45:44 上传评论收藏 75KB PDF 举报

资源推荐

资源详情

资源评论

Openlayers实现距离面积测量实现距离面积测量

本文实例为大家分享了Openlayers实现距离面积测量的具体代码，供大家参考，具体内容如下

CSS

.ol-tooltip {

position: relative;

background: rgba(0, 0, 0, 0.5);

border-radius: 4px;

color: white;

padding: 4px 8px;

opacity: 0.7;

white-space: nowrap;

font-size: 12px;

}

.ol-tooltip-measure {

opacity: 1;

font-weight: bold;

}

.ol-tooltip-static {

background-color: #ffcc33;

color: black;

border: 1px solid white;

}

.ol-tooltip-measure:before,

.ol-tooltip-static:before {

border-top: 6px solid rgba(0, 0, 0, 0.5);

border-right: 6px solid transparent;

border-left: 6px solid transparent;

content: "";

position: absolute;

bottom: -6px;

margin-left: -7px;

left: 50%;

}

.ol-tooltip-static:before {

border-top-color: #ffcc33;

}

具体实现

let layer_1 =new ol.layer.Tile({

source: new ol.source.OSM()

});

let source = new ol.source.Vector();

let vector = new ol.layer.Vector({

source: source,

style: new ol.style.Style({

fill: new ol.style.Fill({

color: 'rgba(255, 255, 255, 0.2)'

}),

stroke: new ol.style.Stroke({

color: '#ffcc33',

width: 2

}),

image: new ol.style.Circle({

radius: 7,

fill: new ol.style.Fill({

color: '#ffcc33'

})

})

})

});

let map=new ol.Map({

layers: [

layer_1 ,vector

],

view: new ol.View({

center: [-11000000, 4600000],

zoom: 5,

}),

target: 'map'

});

let count=0;

let draw;

let sketch=new ol.Feature();

let listener;

let helpTooltipElement;

let helpTooltip;

let measureTooltipElement;

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

内容反馈

weixin_38582909

粉丝: 5

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip