html地图边框怎么去掉,地图隐藏元素.html

自定义图层颜色

body {

margin: 0;

padding: 0;

}

#map {

position: absolute;

top: 0;

bottom: 0;

width: 100%;

}

.map-overlay {

font: 12px/20px;

position: absolute;

width: 200px;

top: 0;

left: 0;

padding: 10px;

}

.map-overlay .map-overlay-inner {

background-color: #fff;

box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);

border-radius: 3px;

padding: 10px;

margin-bottom: 10px;

}

.map-overlay-inner fieldset {

border: none;

padding: 0;

margin: 0 0 10px;

}

.map-overlay-inner fieldset:last-child {

margin: 0;

}

.map-overlay-inner select {

width: 100%;

}

.map-overlay-inner label {

display: block;

font-weight: bold;

margin: 0 0 5px;

}

.map-overlay-inner button {

display: inline-block;

width: 36px;

height: 20px;

border: none;

cursor: pointer;

}

.map-overlay-inner button:focus {

outline: none;

}

.map-overlay-inner button:hover {

box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.10);

}

选择图层

水域

建筑

陆地

绿化

选择颜色

emapgo.accessToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyYW5kb20iOiIzMDA3ZTFlNmNjOTI0YjQ0ODJmZDMyYmRjMjdmODMxNCIsImV4cGlyZXMiOiItMSIsInNjb3BlIjoiQkZGRkYiLCJ1c2VyTmFtZSI6ImRlbW8tcG9ydGFsIn0.YjdkNTY4N2Y1NDE1NzAzNDE1ZGU5NmQwZjJkMzIxOWVjMzQ4ZjZmNGYxNGVmYWFkNzliM2IyZWIxZmQwMTE4Zg";

var map = new emapgo.Map({

container: "map", // 地图容器

style: "http://111.203.245.100:39090/static/styles/street.json",

center: [116.38762, 39.87456], // 默认中心点坐标

localIdeographFontFamily: '"Noto Sans", "Noto Sans CJK SC", sans-serif', // 除了几个特殊的字体剩下的加载本地字体, 提高速度

zoom: 15, // 地图默认缩放级别

pitch: 30, // 地图默认俯仰角度

maxZoom: 15, // 地图最大缩放等级

minZoom: 15, // 地图最小缩放等级

hash: false,

scrollZoom: false,

pitchWithRotate: false,

interactive: false,

});

var swatches = document.getElementById('swatches');

var layer = document.getElementById('layer');

var colors = [

'#ffffcc',

'#a1dab4',

'#41b6c4',

'#2c7fb8',

'#253494',

'#D8F3FD',

'#75CFF0',

'#29BEF5',

'#195CB1',

'#142F39',

'#fed976',

'#feb24c',

'#fd8d3c',

'#f03b20',

'#bd0026'

];

colors.forEach(function (color) {

var swatch = document.createElement('button');

swatch.style.backgroundColor = color;

swatch.addEventListener('click', function () {

if (layer.value == "china-building") {

map.setPaintProperty("建筑物-3D", "fill-extrusion-color", color);

} else if (layer.value == "china-river") {

map.setPaintProperty("区域背景-线状水系", "line-color", color);

map.setPaintProperty("区域背景-面状水系", "fill-color", color);

map.setPaintProperty("区域背景-面状水系", "fill-outline-color", color);

map.setPaintProperty("区域背景-海洋", "fill-color", color);

map.setPaintProperty("区域背景-海洋-特殊", "fill-color", color);

map.setPaintProperty("区域背景-湖泊", "fill-color", color);

map.setPaintProperty("区域背景-湖泊", "fill-outline-color", color);

} else if (layer.value == "china-land") {

map.setPaintProperty("区域背景-陆地", "background-color", color);

map.setPaintProperty("区域背景-岛屿", "fill-color", color);

} else if (layer.value == "china-green") {

map.setPaintProperty("区域背景-绿地", "fill-color", "#ffffff");

}

});

swatches.appendChild(swatch);

});

一键复制

编辑

Web IDE

原始数据

按行查看

历史